网页 设计 怎么让图片居中

目前居中设计在网页布局应用中非常广泛,所以如何在CSS中让设计居中显示是大多数开发人员首先要学习的重点之一。接下来小编告诉你网页设计怎么让图片居中。

一、水平居中(text-align：center;)

(资料图片仅供参考)

这个属性在没有浮动的情况下，我们可以将块级元素转换为inline/inline-block，然后其父元素加上text-align:center;属性就可以将其居中。如果是行内元素(比如span、img、a等)直接在父元素上添加text-align:center;属性即可。

二、使用margin:0 auto;水平居中

前提：给元素设定了宽度和具有display：block;的块级元素。

让一个DIV水平居中，只要设置了DIV的宽度，然后使用margin：0 auto，css自动算出左右边距，使得DIV居中。

三、定位实现居中(需计算偏移值)

原理: 通过定位使元素左上角居中，再通过偏移值margin调整使元素中心居中。 缺点：高度宽度需事先知道。

.absolute_p1 {

position: relative;

width: 200px;

height: 200px;}

.absolute_p1 .absolute_c1 {

width: 100px;

height: 100px;

position: absolute; /* fixed 同理 */

left: 50%; top: 50%;

margin-left: -50px;

margin-top: -50px; /* 需根据宽高计算偏移量 */}

该方法普遍使用，但是前提必须知道元素的宽度和高度。如果当页面的宽高是动态的，比方说页面需要弹出一个DIV层必须要居中显示，DIV的内容是动态的，所以宽高也是动态的，这是可以用jquery解决居中。

四、jquery实现水平和垂直居中。

jquery实现水平和垂直剧中的原理是通过jquery设置div的css，获取div的左，上的边距偏移量，边距偏移量的算法就是用页面窗口的宽度减去该div的宽度，得到的值再除以2即左偏移量，右偏移量算法相同。

网页设计中图片的运用

运用超大背景图

首先要谈论的趋势也就是最流行的趋势，下面就是一系列运用背景大图的网站。虽然这个方法已经差不多被用烂了，但是我们必须得承认它真的很有效。就像所有的好的设计趋势都应该发扬。

如果你的网站是为了展示，那么高清的背景大图就是一个很强的传递信息的方法。但是为了避免过于杂乱，你还是需要考虑清楚文字和标题的位置。

把背景图作为首页内容

超大型背景照片是当设计师巧妙地使用照片，把它同时作为背景的首页元素。在这些设计中，把产品放在首页最前的位置，下滑就可以看到产品的细节或者配件。通常这是使用产品或前景元素作为焦点来实现的。这种混合使得照片营造了一种时尚感，而内容又非常有价值。这一具有挑战性的方法与你的摄影师好好规划协调，得到的最终布局一定非常吸引人。

使用单色照片

如果你想要你的照片可以适应不同的风格，不妨使用PS来美化。而如果照片颜色很丰富甚至到了杂乱的地步，在某些情况下就不应该是你背景图的最好的选择。为了解决这个问题，设计师已经开始使用单色调的图片来表达所想要传递的想法和情感。比如，在网页设计中蓝色是经常被运用到的颜色，给人安全和稳定的感觉;而红色显得充满活力，生机勃勃。你应当根据你的产品或者网页界面风格来选择你的背景图的色调。

使用静音图片

静音图片的使用会让人们打开你网页的第一时间就感觉很舒服，也是最近非常流行的一种风格。大部分的静音图片都运用了渐变和颜色淡化的效果，也有复古的风格。而文字也是在图片的顶部，和图片风格非常协调。这种风格经常在一些摄影师的个人网站上面运用，自从去年开始就变得非常流行了。与这些静音图片相配合的都是一些装饰性字体，这样就起到了很好的页面平衡作用。

注重图片的意义和内涵

如果你巧妙的使用那些注重氛围和内涵的图片，曾经强烈的颜色会变得柔软，反而会对你的内容起着画龙点睛的作用。就像下图的个人网站使用太空图做背景一样，虽然乍眼看去图片和个人一点关系都没有，但仔细想想其实都很有意义，反而显得更有思想和韵味。当然对待一种风格都要用推陈出新的眼光来看待，毕竟没有一种风格适用于所有的设计。

垂直分布风格

垂直分布是对齐对象成平行或90度角，以创建组织感的过程。这种方法是比较边缘和独特的风格，设计师很少使用。再次，风格往往与设计的时髦风格有关，但它不止于此。这些照片反映超出照片本身的内容的含义。他们暗示这些照片背后的特质，他们建议规程，流程和组织意识。这些都是很好的特质，尤其是当它用于展示代表设计师和机构的时候。

网页设计课程大纲

第一节：banner图文排版

主要内容：尝试用同样的素材和文字，进行多种不同的排版练习

第二节：场景类banner合成

主要内容：简单场景合成，分析在合成中需要注意的问题

第三节：品牌类网站讲解

主要内容：通过实例进行品牌类网站的讲解，同时分享自己总结的一些排版方面的经验技巧

第四节：互动类型网站讲解

主要内容：通过实例进行互动类网站的讲解，将文案导航等信息与场景进行相应结合

第五节：活动专题类型网站讲解

主要内容：通过实例进行活动专题类型网站讲解，如何把握好活动专题的氛围打造

第六节：游戏类型网站素材修整

主要内容：通过实例演示如何修整需求方提供的各类素材

第七节：游戏类型网站各种风格标题效果打造

主要内容：主要针对萌系、硬朗、书法等不同风格的标题进行效果的打造

第八节：常规游戏类型网站讲解

主要内容：通过实例进行常规游戏类网站的讲解，主要分享人物、场景的融合及内容的摆放

第九节：多人物叠加如何做出层次感

主要内容：通过实际的游戏案例讲解，主要分享再有多人物叠加的情况下，如何拉开各个人物之间的层次感和空间感

第十节：水墨风游戏类型网站讲解

主要内容：通过实例进行水墨风格游戏类网站的讲解，主要分享设计水墨风网站时应注意的问题和水墨素材的合理拼接

第十一节：游戏页面形式感打造

主要内容：通过实例进行不同形式游戏类网站的讲解，主要分享打造不同形式时的一些经验和技巧

第十二节：如何增强页面代入感

主要内容：通过实例进行页面代入感讲解，让浏览者看到页面的第一眼就能身临其境。

第十三节：现场修改部分同学作业，现场答疑，并传授相关面试找工作方面的知识。

如何才能学习好网页设计

大概咱的要领不是最好的，不过很得当咱。要是开始过多的依赖于软件，css内里的许多样式必要好久才会记得，用起来天然不会得心应手，等渐渐熟记了手册里的每个样式今后，为了提高开辟效率，再用(dreamweaver简写，下同)写。

养成好的誊写风俗

记得大学时间1个教咱们delphi老师讲过，好的步调员写出的步调像诗1样，长短不1，很有美感。咱想讲咱们在写html与样式的时间也应该是如此的，好比在写html的时间，咱的风俗是div标签成对写好，再填内容。不然很容易落下关闭标签，出现错误很难排查，有人会讲了，写简略的页面能，不过写大的页面，通常几十个套在1起，容易写串，这种环境也会有，这就要靠适当的讲明，与缩进来克制了。写css的时间网上有许多保举的范例，好比菜单类用menu，版权用coryright，底部用footer等等，在誊写序次上1样平常是：表现属性-自身属性-文本属性。即使这些都没有硬性的划定，不过遵照1些不行文的划定不是坏事，如此让本身写的代码，容易让别人读懂。

走出误区

误区1，web尺度就是全部用div。

许多曩昔用table布局的人，学了div+css今后，你在他的代码里就再也找不到table了，以为用table是件不色泽的事。真相并非云云，web2.0 尺度也没明确提到用table还是div，因为table也是切合xml规矩的。含有table的页面还是能议决xhtml1.0的验证。 再者，div+css大概是万能的，但在有些方面并不是最好的。好比咱们在做1个表单，table绝对是最好的处理方案，div实现起来绝对没有table来的轻便。

误区2，肯定要议决验证。尺度只是促使咱们在感念上的加载不是简略的代码的转变。许多人用js诱骗validator，议决验证，如此没有通不外验证的页面，不过议决验证并不是咱们的最终目的。咱们想写出在互联网上流通无阻的网页，用户方方便用的网页。

误区3，hack用的越多，格式越多本身的水平越高。当咱们遇到不兼容的问题，通常会想到hack，不过最好是先试了其他全部可行的要领，写出简略而切合尺度的代码，不得已才用hack因为网页欣赏器的支持(向前兼容)不应该仅限于对已往欣赏器的支持，更应该是对将来的欣赏器的支持(向后兼容)，以是咱们只管即便做到尺度，才不会过时。