如果页面中所有板块使用绝对定位给我们带来的是什么？网页设计

下面是小编为大家整理的如果页面中所有板块使用绝对定位给我们带来的是什么？网页设计，本文共10篇，仅供大家参考借鉴，希望大家喜欢，并能积极分享!本文原稿由网友“打了鸡血的小北”提供。

篇1：如果页面中所有板块使用绝对定位给我们带来的是什么？网页设计

昨天下午坐我旁边的昊哥给我看了个页面，问以后我们的页面可不可以全部使用绝对定位，可能我的叛逆思维，第一反应就是组件灵活度降低，重用性不高，代码量增多，开发成本变多，不建议使用。看了下昊哥提供的页面，基本定下来结构简单，而且使用FLEX开发。

想到目前html的网页几乎全部采用相对定位；而FLASH和flex都是绝对定位（flex也可以相对定位），如果按原理来说，flash天生就是偏向绝对定位，这个和渲染引擎原理有关；html天生是偏向盒模型。因此更加想避掉昊哥的这个想法。

这时叫来了朱标，他提到以前曾经使用这个方法做过尝试。很方便做效果。更确切的说，因为各层之间没有影响，可以做很多事情。从这个角度上考虑的确也有好处。

接着昊哥开会去啦，我决定自己风暴一下。在纸上列出了如果页面中所有板块使用绝对定位给我们带来的好处和麻烦。

好处：

1.JS效果方面开发起来可能变简单

带来的影响：

1.可以没有两列式，三列式等这种布局的概念，

（这里还必须有一个脚本解决每个组件坐标的分配，同时解决当一个组件高度或宽度发生变化，各组件坐标的重新分配。）这个脚本，估计得写个好久因为做到很好的重用，这个脚本要考虑的东西实在是太多啦。

2.需要提供拖拽功能。

加入放到viframe中唯一的解决办法是新加操作按钮才能实现拖拽，否则在主编辑页面上实现拖拽效果会和其他事件发生冲突，没有细想，也许这种冲突有办法解决，但是现在是没有解决方案的。因为不是所有的组件都有固定的结构（既：头+身子）

3.性能问题。这个也是一开始就跟昊哥提出来了。个人认为一定会有性能问题。但是没有真实页面拿来测试，所以这个对性能的影响到底有多大，我也不好说。

不过如果不考虑组件内部任何图片和文字链的编辑问题，我们把一个板块（组件）看成一个对象，实现拖拽，绝对定位的制作页面加上那个觉得需要点时间构思，需要点时间开发的脚本。其实还是很完美的！

来自：www.f-dev.com/387

篇2：理解绝对定位和相对定位布局网页设计

概要：

本文主要描述XHTML中相对定位和绝对定位各自的本质、用法、区别和两者之间的关系，以及使用CSS的Left、Right、Top、Bottom属性（偏移属性）和Margin属性（外边距）对定位块级元素进行布局的方法。(本文的示例，请看这个附件demo。)

说明：

占位空间：元素在文档流中所占据的空间。

物理空间：元素本身所占据的空间。

下面分3种情况分别对相对定位和绝对定位进行讨论：

1.只使用css第一组属性布局定位元素的情况

2.只使用css第二组属性布局定位元素的情况

3.混合使用第一组和第二组属性的情况

图1为未定位时的初始效果，

层级关系为：

效果图：

图1

一、用相对定位布局块级元素

元素设置position值： position:relative

此属性值的设置，元素没有脱离文档流，还是普通流定位模型的一部分，会对文档流中其它元素布局产生影响。（说明：蓝色代表占位空间，红色代表元素）

1.仅使用left、right、top和bottom属性布局相对定位元素的情况

元素原本所占的占位空间仍保留，物理空间偏移。

图2中，设置元素的left和top的值，对box2进行布局，可以发现除了box2偏移之外，其他块级元素的位置没有被影响，可见box2的占位空间还是存在的。

层级关系为：

效果图：

图2

2.仅使用margin属性布局相对定位元素的情况

用margin-bottom属性和margin-top属性设置负值可以改变文档流中所占空间的高度，会影响文档流中的其它元素位置。例如：margin-top:负值; margin-bottom:负值

图3中，box1和box2都设置了元素margin-bottom的值，值等于它们高度的负值。box1和box2物理空间没有改变，占位空间高度为0。box3的margin-bottom值设置为0，物理空间没有改变，占位空间高度不变。再通过margin-left对box2和box3设置左偏移值。

层级关系为：

效果图：

图3

3.混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况

此情况，它们的值会产生累加的效果。在CSS2.1中所有的浏览器都使用外边距边界来完成 偏移计算。本文从数学的角度理解为偏移属性值和外边距属性值累加。

图4中，box2是在图3的基础上增加设置left的值产生的效果，可见margin-left的值和left的值产生了累加。(偏移量:80px = 110px - 30px)

层级关系为：

效果图：

图4

二、用绝对定位布局块级元素

设置position值：position:absolute;

此属性值的设置，元素从文档流完全删除。

1.仅使用left、right、top和bottom属性布局绝对定位元素的情况

绝对定位的元素的偏移位置以最近的定位(包括相对定位和绝对定位)祖先元素作参照物。如果元素没有已定位(包括相对定位和绝对定位)的祖先元素，那么它的参照物为最顶级元素（由于浏览器的默认参照物不同，物可能是BODY或 HTML 元素）。

注意：IE下参照物需设置宽度或高度bottom和right属性才可以正确的定位。

设置元素为绝对定位元素后，元素的Left、Right、Top和Bottom属性默认值不是0，只是将元素脱离文档流。以下例子说明这个问题。

在图5中，将橘黄色的祖先元素设置为定位元素（即参照物），box2设为绝对定位，文档流由box1-box2-box3变为box1-box3，可box2却没有移动到距离参照物0值的位置上，可见box2的Left、Right、Top和Bottom属性默认值不等于0，它只是脱离了文档流而已，

层级关系为：

效果图：

图5

以最近的祖先定位元素为参照物的情况

图6中，Box2设置成绝对定位元素，脱离了文档流，文档流由box1-box2-box3变为box1-box3，box2以最近的定位祖先（蓝色框）为参照物。

层级关系为：

效果图：

图6

图7中，为改变参照物（橘色框）后的效果

层级关系为：

效果图：

图7

图8中，参照物为最顶级的元素情况。

层级关系为：

效果图：

图8

2.仅使用margin属性布局绝对定位元素的情况

此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。

图9中，使用margin属性布局相对定位元素。

层级关系为：

效果图：

图9

IE6的情况下，box2前面没有兄弟节点，则margin-left的值会出现双倍边距，见图10。

层级关系为：

效果图：

图10

3.混合使用left、right、top和bottom属性与margin属性布局相对定位元素的情况

a.margin属性和top、bottom、left、right属性同时使用，如果同一方向偏移，它们的值会产生累加的效果，见图11。

例如：margin-left:120px; left:-20px; 那么box2的偏移值为120px-20px=100px;

层级关系为：

效果图：

图11

b.绝对定位和相对定位的累加加效果不同，如果top、bottom、left、right属性和margin属性偏移的方向相反，top、bottom、left、right属性值有效，反方向的margin属性值无效，见图12。

层级关系为：

效果图：

图12

总结：

相对定位的元素不会脱离文档流，占用文档流的空间，Left; Right; Top和Bottom属性与margin属性混合使用会产生累加效果。

绝对定位的元素脱离文档流，偏移不影响文档流中的其它元素，Left; Right; Top和Bottom属性与margin属性混合使用，偏移方向相同值累加，方向相反，margin属性值无效。

绝对定位的元素以最近的定位祖先元素为参照物。

本文出自：webteam.tencent.com/?p=328

篇3：详解网页设计中的定位应用

详解网页设计中的定位应用

定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的'效果实现不了,实现了的效果可能会走样.如果理清了定位的原理,那定位会让网页实现得更加完美.

篇4：页面重构中的模块化思维网页设计

最近被“模块化”缠身，又是文章又是PPT的，被逼着想了很多相关的东西，整理下我这段时间对于“模块化”的思考，大多都是我自己从事页面重构这份工作的经验和理解，在一定程度上存在局限性，也希望自己能温故而知新。

“模块化”只是我们对于过去一直使用的技术、方法的一个新潮的称谓，就像“Ajax”。不过做为页面重构发展的一种趋势，越来越被大家重视，不自觉也满口的“模块化”，只是你真的理解什么是“模块化”吗？

什么是模块化？

对“模块化”的解释，在CNKI中就有28种。可见“模块化”思维使用的广泛。最接近页面重构中的“模块化”，现有的解释应该就是软件开发中的解释了。

先看一下百度词条是怎么解释“ 模块化 ”的：

模块化是指解决一个复杂问题时自顶向下逐层把软件系统划分成若干模块的过程。每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能。模块具有以下几种基本属性：接口、功能、逻辑、状态，功能、状态与接口反映模块的外部特性，逻辑反映它的内部特性。在软件的体系结构中，模块是可组合、分解和更换的单元。

相关的书籍也蛮多的，有兴趣的同学可以搜一下。需要强调一点，我们所借鉴的是一种思维的方式。

页面制作为什么需要模块化？

站点内容越来越多、代码越来越臃肿，渐渐影响到了客户端的体验（主要是打开速度），影响到了维护的效率。有什么方法可以解决这些问题呢？

我们很容易就想到：减少代码冗余、提高代码重用率、图片压缩等等，而这些要如何实现呢？模块化思维可以解决，即可以有效减少代码冗余、提高代码重用率，更重要是可以支持到多人维护，降低维护成本。CSS写法较为灵活，容易产生代码的耦合，使用模块化也可以在一定程度上降低耦合度，对于BUG的定位也有帮助。所以，我们更应该在站点前期就重视并使用“模块化的思维”编写站点。

我们之前经常提到的站点性能优化，有相当一部分也是“模块化”的内容，比如提高代码重用，提高开发效率等等，“模块化”的优点还有很多，我大概列了一下：

提高代码重用率

提高开发效率、减少沟通成本

降低耦合

降低发布风险

减少Bug定位时间和Fix成本

提高页面容错

更好的实现快速迭代

更好的支持灰度发布

其中最重要的一点，我认为是“提高代码重用率”，这也是模块化最重要的特点之一，

如何实现“模块化”？

这里的主要问题是HTML与CSS的“模块化”，我们可以看下换肤的实现方法：

同一类名，换文件（JS）

同一文件，换类名（JS）

由此可知HTML与CSS的接口实现：

CSS引入的三种方式

类名

为了更好的实现这种接口，需要有相关的（交互、设计、页面、开发）约定、规则、规范，比如：所有当前状态都使用同一个类名“nonce”，所有变灰的表现都使用原类名后加“_n”，Tab的实现方式等等。有了这些约定、规则、规范后，HTML代码就很容易可以实现模板化，统一接口规范。

有两个误区需要先认清下：

模块化后并不是就能被使用在任何位置（模块化后的代码段也是有适用的范围限制，需要一个提供接口规则的环境）

模块化后并不是就不能再变更（模块化后的代码段可根据实际需要做修改）

完全独立的模块放在同一项目中，由于项目有自己的表现、交互统一性，所以各模块间必定出现类似的部分，这些部分可以被提出来做为公共的定义，减少冗余，这时就会出现耦合的问题，完全不耦合是不可能的，因此模块化中很重要一点就是“适度的耦合”。有了公共定义，就得调整模块样式的实现方式了，而这种调整也会影响到“接口”的实现方式。

由于本篇主要是讲模块化的思维方式，具体实现的细节留待以后的文章中探讨。相关内容可以看下之前写的《 从宜家的家具设计讲模块化 》。欢迎一起讨论。

篇5：继承──页面重构中的模块化设计网页设计

前面我们了解了 样式的作用域的分类 和 栏目级作用域 ，在权值中，还有一个很重要的因素，需要做下补充，起因是这样的，有个同学在CSS森林群里问了个问题：根据样式权值两个关键的因素

权值的大小跟选择器的类型和数量有关

样式的优先级跟样式的定义顺序有关

可以知道，如果10个标签选择器的权值应该比一个类选择的权值高，像这样：

div div div div div div div div div div div{color:blue;}.c10{color:red;}

这段文字是什么颜色？

先别急着看 答案 ，分析下。意料之中？如果 这样 呢？

div{color:blue;}.c10{color:red;}

是不是跟想的不太一样？难道前面所说的权值是有问题的？前面讲的权值并没有问题，不过漏了一个重要的规则：继承的权值小于0,0,0,1。

继承最大的意义在于可以减少重复的定义，比如要定义整个页面的文本颜色，只需要定义body的color样式，body里的所有标签都会继承body的color定义。是不是很方便？方便是相对的，当你想要为body内部分标签定义另一种文本颜色时，继承也许会成为增加重复定义、降低性能的祸首。

并不是所有的样式定义都具有继承的性质，整理了一下常用有继承性的定义^{1，这些定义在使用的时候要比较注意。}

简单分析下上面的例子，最后一部分的代码：

这段文字是什么颜色？

当定义了c10后，根据权值，类定义的权值是0,0,1,0，应该是比div这个定义0,0,0,1要高的，但由于div是直接定义到标签上的，比起从c10的定义中继承来的定义权值更高，

稍微改下就清楚了：

这段文字是什么颜色？

从 修改后的例子 可以看到，p标签继承了c10的定义，显示为红色。因此，在使用标签选择器的时候，应特别注意它的作用域，个人的建议是，除了最基本的reset之外，在公共作用域中最好不要使用标签选择器，在栏目级作用域中也应尽可能的少用。

1常用有继承性的样式定义：

text-indent

text-align

layout-flow

writing-mode

line-break

white-space

word-wrap

list-style

list-style-image

list-style-position

list-style-type

font

font-style

font-variant

font-weight

font-size

line-height

font-family

color

text-transform

letter-spacing

word-spacing

来自：www.cssforest.org/blog/index.php?id=164

篇6：网页设计中视觉元素的使用

网页设计中视觉元素的使用，讲的是关于视觉在网页设计的使用的论文。欢迎各位计算机毕业的同学借鉴!

摘 要：随着科技的进步和时代的发展，网页设计作为新的视觉语言，已经成为信息交流中极具影响力的新兴媒体，但是网页设计作为新兴媒体还存在着一些问题，本文探讨了视觉元素在网页设计中的运用方法和原则，期望能在一定程度上解决当前网页设计中存在的问题。

篇7：网页设计中视觉元素的使用

着科技的发展和社会的进步，进入21世纪以来，信息传播业发生了巨大的变革，网页作为新兴的信息载体，相对于传统媒体来说，它的构成元素更加的复杂和多样化，涵盖了文字、声音、图像、视频、动画等多种元素，是未来最重要的信息载体。网页设计作为新时代的新兴的设计领域，是技术与艺术的高度统一，为人们了解世界、认识世界，达到人与人之间的沟通和交流提供了更加方便、快捷的平台，在人们的生活工作中凸显了其愈加重要的地位。本文通过对网页设计中视觉元素的运用方法和原则的阐述，期望能在一定程度上解决当前网页设计中存在的问题，从而更好的提高国内网页设计的水平。

一、网页设计中存在的问题

1.视觉元素的`堆砌和内容的缺乏

网页中除了包括平面视觉构成的各个元素和布局机制之外，还包括了动态、多媒体、交互元素等网页特有的视觉元素。目前市场上，有很多网页在设计上缺乏审美意识，在布局规划上也有欠考虑，只是以简单的堆砌进行设计从而浪费了这些资源。网页中的文字、图像、动画、色块、广告窗口等杂乱无章的罗列着，这些都在挑战用户在浏览网页时的忍耐极限。而某些网页设计精美，在浏览者对其美观的界面进行赞叹后，却发现其内容空洞，收效甚微。

2.网页设计的利益性影响

在网页设计制作时，由于受到利益性的影响，大多数网页的设计者故意诱使用户不断刷新网页或点击广告，将真正的资源链接发在不被注意的位置，从而使浏览者将目光放在广告区域。我国国内的某些网站，经常存在悬浮的广告图片，挡住了下层页面的真正内容。这些蓄意干扰，是网页设计中的大忌。

3.模仿让网页设计失去创造性

我国网页设计中的一大软肋便是缺乏独立创造性，很多网页设计都是模仿和照搬，千篇 一律的网页不能给用户带来欣赏的愉悦感，只有与人内心深处情感共鸣的设计才是好的艺术设计。

4.技术因素带来的视觉困扰

网页设计中经常利用到的图片、影像、文字等内容需要通过专门的软件才能在计算机的屏幕上显示出来。所以网页的观赏效果不仅受到设计者和出版单位的影响，还受到用户电脑配置的制约。因为机器的不同有可能会导致网页内容面目皆非。而在观看flash动画的媒体形式时，必须下载特定的插件才能播放，否则将显示空白框和提示文字给浏览者。

二、网页设计中视觉元素的使用原则

1.主题明确、鲜明突出

网站的题材，也就是主题的定位是网站设计中首先要解决的问题。在网站主题的定位问题上，我们首先要明确建立网站的目的，这是从网站建设者的角度来考虑的。另一方面，则是网站受众人群的基本情况，明确他们的需求，以确定网站为使用者所提供的信息或经验。确定主题之后，网站在建设过程中，提供的全部信息必须根据主题进行选择、鉴别和整理。信息传达的目的性越明确，针对性越强，传达的成功率就会越高。在明确网站的主题后，设计的全过程都要围绕这一主题展开。主题必须要做到鲜明突出、力求简洁、要点明确，尽量以简单明确的语言和画面告诉所有人网站的主题，从而吸引对本网站有需求的人。

2.设计目的明确、形式鲜明

我们在进行网页设计时，要铭记网页形式的核心是要为内容服务的，但是我们不能忽略了其所具有的独立性和艺术规律。明确的设计目的和清晰的设计形式是我们设计网页时必须要明确的，因为网页设计的根本目的便是为了更好的体现和传达信息，为浏览者提供其所需要的信息或经验。在网页设计中我们要用不同形式的设计来体现不同的内容，如政府机构的网页必须要简洁、庄重，而商业网页必须根据自己商品的特征采取不同的表现形式。

三、网页设计中视觉元素的使用方法

1.文字

在网页的设计过程中，文字是设计者必须要用到的视觉元素之一，包括静态文字、动态文字、图像和色彩文字等。文字的选用包括文字的大小、样式、颜色、行距等等，必须要根据不同的版式、不同的含义来选择不同的文字。文字的使用须要简洁、明了、清晰，使浏览者产生愉悦感，从而更好的传达信息的目的。

2.图形

在网页设计中，图形的合理运用能够丰富浏览效果，更加生动、具体的表达所要传达的信息。在网页设计中采用图形，可以为浏览者带来全新的视觉感受。图形的使用不仅增加了网页提供的信息类型，也在更大程度上类化了网页界面，不仅使信息的传达多样化，也丰富了网页界面的视觉。

3.色彩

人的视觉最为敏感的元素就包括色彩，事物的色彩是我们的第一印象。在网页界面的设计中，根据不同的主题、不同的内容来选取色彩，是优秀的网页设计人员的能力。在网页中利用不同的色彩来传达不同的信息的内容，可以使所要传达的内容更加丰富和真实。

4.多媒体

多媒体是由包括声音、视频、动画等一系列元素的组合而成的，突破了传统媒体以视觉为主要传播信息的方式，增加了听觉、运动视觉的感知能力，使人们在接收信息的途径更加的多元化。网页界面最大的优势便在于增加了多媒体元素，这是网页界面独有的信息传达载体，它可以满足不同的浏览者的不同需求，丰富了视觉和听觉效果。

参考文献

[1] 黄海燕 张辉.网页设计与平面设计[J].包装教程，第25卷.

[2] 南波飞.网络媒体的视觉传达设计研究[D].湖大大学硕士学位论文，.

[3] 王绍强.版式设计风格化[M].广西：广西美术出版社，.

[4] 崔美善.网页视觉特效[M].北京：电子工业出版社，.

篇8：页面重构中的组件制作要点网页设计

在写完前面“模块化”相关的文章后，感觉试图用“模块化”本身去讲什么是“模块化”真是不容易讲得清，相信大家都多多少少能理解什么是“模块化”，但是不容易说得清，也有不少同学反馈说缺少实例。现在的团队里在推“组件化”，做为“模块化”的一个应用方式，也许正好可以从另一个方面讲讲“模块化”的实现。

这里的“组件”跟“模块”并没有本质的区别，那为什么还要提一个新的名词呢？在《 页面重构中的模块化思维 》中提到了“模块化”的应用是十分广的，而且大家已经对它有了自己的理解，想要重新认识“模块化”是不太容易的，因此决定换一个名。“模块化”更多的讲一种思维，而这里的“组件化”更多的是讲一种实现。

一个组件效果的实现，需要的支持可能是不同的，组件强调的是“效果的完整”，要保证效果完整，就需要HTML、CSS、前端脚本甚至后台脚本等的配合。

简单列下做组件时需要注意的几点：

组件需要一个底层的运行环境。特别是对于CSS，就是常说的全站公共样式，包括reset。

确保同一组件在同一底层环境中的效果完整。

组件中的定义需要注意受组件外继承定义^{1的影响。}

在使用上面这些定义的时候，应该注意继承性对作用范围中标签的影响。同理，为了减少组件中被外层定义中的有继承性定义的影响，必要时须要在组件中reset。

在做一个组件之前，有几个问题需要先搞清楚，如：

是否需要静态化？

组件有多少种状态？

是否通过脚本程序实现状态的更改？

组件更新的频率？

这些问题对于组件如何实现更优起了很重要的作用。了解了基本的实现方式后，在制作组件所要考虑的方面，大概有下面这些：

效果的完整性（同一底层环境）

良好的性能

可移植、复用（同一底层环境）

易维护

易扩展

一个好用的组件，应该是充分考虑到上面这些点，并在它们间找到平衡。

我们来看一个例子：

首先，我们需要了解基本的实现环境：

是否需要静态化？（需要）

组件有多少种状态？（三种基本状态：正常、当前、已完成）

是否通过脚本程序实现状态的更改？（不使用）

组件更新的频率？（较低）

第一步第二步第三步第一步第二步第三步第一步第二步第三步

.flow_step{width:950px;height:25px;margin:20px auto 10px;padding:0;}.flow_step ol{margin:0;padding:0;}.flow_step li{float:left;padding:0px 15px 0px 0px;list-style.:decimal inside;background:url(step.png) #E6E6E6 no-repeat 100% -50px;color:#333333;font:700 14px/25px “宋体”;text-align:center;}

/* 当前步骤 */.flow_step li.current{background-color:#FF5500;color:#FFFFFF;}

/* 已完成步骤 */.flow_step li.done{background-position:100% 0px;background-color:#FFD98D;color:#FF6600;}

/* 已完成无当前步骤 */.flow_step li.done_none{background-position:100% -50px;background-color:#FFD98D;color:#FF6600;}

/* 当前步骤的上一步 */.flow_step li.current_prev{background-position:100% -25px;background-color:#FFD98D;}

/* 最后一个步骤 */.flow_step li.last{background:none;background-color:#E6E6E6;}

/* 最后一个步骤为当前步骤 */.flow_step li.last_current{background:none;background-color:#ff5500;color:#FFFFFF;}.flow_step li.last_current_none{background:none;background-color:#FFD98D;color:#FF6600;}.flow_step .cols3 li{width:301px;}.flow_step .cols4 li{width:222px;}.flow_step .cols5 li{width:175px;}

完成效果见 Demo ，再看看它几个方面的分析：

效果的完整性，可移植、复用，良好的性能：没问题

易维护：较差。HTML维护量较大，每个状态需要一个新的HTML代码；样式的组合需要花点时间理解。

易扩展：较差。新增一个5步的导航，需要增加10个HTML代码片段；样式基本不需要更新。

较难做成程序模板，HTML代码量较大。

同一个效果，如果基本的实现环境有所改变，可能就需要一种新的作法：

是否需要静态化？（需要）

组件有多少种状态？（三种基本状态：正常、当前、已完成）

是否通过脚本程序实现状态的更改？（可使用CGI）

组件更新的频率？（有多种步骤，3~5步）

有多个步骤同在一个页面的情况

第一步第二步第三步

/* 组件页面流程图 */.flow_step{width:950px;height:25px;overflow:hidden;margin:20px auto 10px;padding:0;}.flow_step ol{width:110%;margin:0;padding:0;}.flow_step li{float:left;padding:0px 15px 0px 0px;list-style.:decimal inside;background:url(step.png) #e6e6e6 no-repeat 100% -50px;color:#333333;font:700 14px/25px “宋体”;text-align:center;}.flow_step .cols3 li{width:301px;}.flow_step .cols4 li{width:222px;}.flow_step .cols5 li{width:175px;}.flow_step .cols6 li{width:143px;}

/* 当前步骤效果 */.flow_step_no1 .step_1,.flow_step_no2 .step_2,.flow_step_no3 .step_3,.flow_step_no4 .step_4,.flow_step_no5 .step_5,.flow_step_no6 .step_6{background-position:100% -50px;background-color:#FF5500;color:#FFFFFF;}

/* 最后一步去箭头 */.cols3 .step_3,.cols4 .step_4,.cols5 .step_5,.cols6 .step_6{background-image:none;}

/* 当前步骤时前一步的效果 */.flow_step_no2 .step_1,.flow_step_no3 .step_2,.flow_step_no4 .step_3,.flow_step_no5 .step_4,.flow_step_no6 .step_5{background-position:100% -25px;background-color:#FFD98D;color:#FF6600;}

/* 前前步骤时除去前一步外已完成的效果 */.flow_step_no3 .step_1,.flow_step_no4 .step_1,.flow_step_no4 .step_2,.flow_step_no5 .step_1,.flow_step_no5 .step_2,.flow_step_no5 .step_3,.flow_step_no6 .step_1,.flow_step_no6 .step_2,.flow_step_no6 .step_3,.flow_step_no6 .step_4{background-position:100% 0;background-color:#FFD98D;color:#FF6600;}

/* 最后一步时的效果 */.flow_step_no3 .cols3 .step_3,.flow_step_no4 .cols4 .step_4,.flow_step_no5 .cols5 .step_5,.flow_step_no6 .cols6 .step_6{background-color:#ff5500;color:#ffffff;}

/* 已完成无当前步骤 */.flow_step_no1_n .step_1,.flow_step_no2_n .step_2,.flow_step_no3_n .step_3,.flow_step_no4_n .step_4,.flow_step_no5_n .step_5,.flow_step_no6_n .step_6{background-position:100% -50px;background-color:#FFD98D;color:#FF6600;}.flow_step_no2_n .step_1,.flow_step_no3_n .step_2,.flow_step_no4_n .step_3,.flow_step_no5_n .step_4,.flow_step_no6_n .step_5{background-position:100% 0;}.flow_step_no3_n .cols3 .step_3,.flow_step_no4_n .cols4 .step_4,.flow_step_no5_n .cols5 .step_5,.flow_step_no6_n .cols6 .step_6{background-color:#FFD98D;color:#FF6600;}

完成效果见 Demo ，再看看它几个方面的分析：

效果的完整性，可移植、复用，良好的性能：没问题

易维护：一般。HTML维护简单，多个步骤、状态同在一个HTML；样式的维护点较多。

易扩展：一般。HTML扩展性较好；样式的扩展性一般，基本不需更新。

可较方便的制作为程序模板。

从上面的例子可以看出，同样的效果，不同的实现方式，它的可维护、可扩展等等特性是不大相同的，在CSS森林群里讨论这个图的实现时，还看到了上面两种之外的实现方式，像完全使用脚本将各个状态输出等。

近期对模块化实现方式的一点总结，欢迎讨论。

1常用有继承性的样式定义：

text-indent

text-align

layout-flow

writing-mode

line-break

white-space

word-wrap

list-style

list-style-image

list-style-position

list-style-type

font

font-style

font-variant

font-weight

font-size

line-height

font-family

color

text-transform

letter-spacing

word-spacing

本文来自：www.cssforest.org/blog/index.php?id=146

篇9：网页设计给用户体验带来的影响

首先在深圳网站建设中网页设计对于一个人也是很重要的，这就像一个人的穿着打扮。要给大家留一个好的印象。所以第一眼很重要的，所以大家在设计网页的时候一定要设计美观一点 按照用户的体验去设计。

一 、网页速度直接影响用户体验

网页速度直接影响用户体验，而影响网页速度的主要原因有两点： 1 界面设计 很多人为追求美观，把界面设计得很漂亮，于是网页上到处都是图片，甚至连导航都用flash设计的。这样的网站确实美观，但是增加了速度的负荷，而且优化起来也不好优化。 像网易、腾讯等大站，这么庞大的数据系统，打开速度并不慢，在技术方面暂且不说，只看界面，简单但不失美观，相比下自己的网站，不需太累赘的图片也能达到美观的效果，同时还能带来很好的用户体验，在这点上还是需要多多注意的。

二 网站空间服务商

除了界面外，空间服务商也是个很重要的原因。做网站就不能因为要省下几十块钱而去买个不好的空间服务商。红姐的博客刚建立时，购买的空间不好，很多人反映网站打开速度太慢，后来红姐毅然换了空间服务商，同时也把博客换成打开速度较快的主题，这才解决了网页速度这一大问题。 所以这里我要说的是，想要做好网站，就要花多点钱购买一个稳定、带宽好点的空间。

三、颜色是影响网页的重要因素

无论是平面设计，还是网页设计，色彩永远是最重要的一环。当我们距离显示屏较远的时候，我们看到的不是优美的版式或者是美丽的图片，而是网页的色彩。 不同的颜色给用户带来不同的情绪，比如红色、橙色给人一种热情、亢奋的感觉，黄色使人联想到阳光，绿色是和平的象征，蓝色是用度最广的颜色，几乎没有人会对蓝色反感。所以，做网站时一定要给自己的网站定位好颜色，一个页面不能太多颜色，会给人很花的感觉。

四 、导航设计

导航是整个网站的指南针，带领用户准确查找所需的信息。

红姐从以下方面讲述导航设计的重要性：

1 从优化方面看导航 在第二点说到，有些人会把网站导航设计成flash的形式。flash的导航是很有特色，但是不利于优化。蜘蛛抓取网页根据文字和的脚本进行抓取，而flash导航把所有的链接都放到了flash脚本里，蜘蛛是不会抓取flash脚本里的链接的。 2 从用户体验方面看导航 有些不成熟的网站，尽管导航设计得非常漂亮非常有特色，但是用户体验并不好。为什么呢?请看下面这个网站的导航：

五、版面设计

用户浏览网站的习惯(可浏览文章用户是如何浏览你的网站的)，是以“F”字母的特性浏览。“F”，从书写上，先写上面的一横，然后一竖，最后是一横。用户浏览网页也一样，先从左向右浏览，然后从左边开始由上到下，再从左向右。所以，也就是说，最重要的信息应该放在左上的位置，通常这里是放 logo。根据这个特性，把最重要的信息排在

[网页设计给用户体验带来的影响]

篇10：在网页设计中怎样使用各种方块元素

当你欣赏下面这些案例时，留意一下他们如何以及为何使用矩形或正方形元素，会使得你思路大开，此处列举的方块元素，被用来对齐、组织、装饰、排列页面上的方与圆。在设计中使用方块元素有很多方法和原因。我们来详细了解一下。

使用方块布局的目的是什么?

或许这对你而言有点哲学和理论化，我们来看看别人选择方块布局的原因。(顺便提一句，我所指的方块也包括矩形，有些案例也使用矩形。)使用这种元素有两大原因。首先也是最重要的，它有助于组织内容。其次，它也能打造特殊的样式。它们是展现内心渴望和需求的完美元素。

看看Dennis Adelmann的作品集，显而易见，方块元素被用来组织排列他的作品。这是组织排列任意数量内容的简单途径，让事物保持简洁。

不过再看看We Love Noise这个网站，它就完全不同!是的，到处都是方块，移动鼠标时还有个有趣的动画效果。不过除了组织内容之外，你会发现方块元素也成为了设计风格的一部分。它是这种风格关键的决定性元素。

点击阅读更多学院相关文章>>

分享到 怎样用好它们?

我不觉得使用方块元素是什么难事。尤其是网页，自从诞生之初就开始使用方块形状来设计界面。但是你若想更有效地使用它，请遵循以下几个步骤。

制定希望达成的目标

根据你所要达成的目标，页面和区块会有很大的不同。一旦你确定了，方块元素就能帮助你完成目标。你是用它来组织内容?还是想为页面增添一点乐趣?

看看Paper and Paint。他们使用方块元素保持页面井井有条，并且突出了页面特有的流动性。随着鼠标向下滚动，每个方块中的不同内容都在进行着视觉差滚动――这是个非常酷的效果――每个方块都向你讲述独特的故事，汇聚成整个页面。这些方块元素的作用，就是保持各部分对齐，形成一种整洁的时尚，同时也为各个页面营造不同的故事氛围。

Anthony John Group使用方块来展示他们创作的各个项目，还有关键的公司信息，比如“幕后团队”。主页的规划与构建很棒，但也结合紧密。很明显，他们致力于创造像这个页面一样优雅的高端建筑设计，如果没有这些方块，可达不到这样的效果。

点击阅读更多学院相关文章>>

分享到 使用方块来组织内容

既然了解了你所追求的目标――尽管那几乎就是整合现有的信息――你会接触到内容组织的，

你得把内容编成目录。要如何在各个方块中组织信息――某些方块内容会比其他的更多吗?这对组织内容很有帮助，你会来回摆弄，看看哪些有用哪些没用，发现哪些内容太多，哪些内容太少。我保证这不是什么高超技巧，实际上它不太需要凭直觉，大多时候都很简单――坐下来去完成它就是了。

注意到上面这个网站没有，Block Level，方块和方块中的图标就是全部了，只有图标。这就是我所指的组织内容，Block Level的设计者故意在每个方块中只留下一个图标。下一步就是要考虑如何将调整过的内容放在令人愉悦的设计中，这正是我们下面要讲的。

调整这些方块，或者干脆不动它!

既然组织内容的工作让你了解一组组信息看起来是什么样，你就要思考应该怎么处理这些方块。这是让你打磨内容块大小的一步，可能你希望它们都保持一致――又或者你决定让它们错落杂乱排布。这还是得取决于你的具体目标。

从Nedd中可以看出，方块元素都非常巨大，它们有着近似的宽度和相等的高度，让网站看起来井井有条。我希望你注意的是，虽然这是偏向于内容组织的用法，网站的样式仍然非常有趣轻快，这主要得益于它的颜色、矢量元素、圆形的应用、字体等等。

点击阅读更多学院相关文章>>

分享到 另一方面，我们还有像Banana Café这样元素散乱的网站――如果你想，也可以这样优美地乱序排列。这个网站看起来也很好玩，得益于它的字体、颜色的选用等等。方块的这种特殊用法其实没什么，只是一种特定的设计手段。

点缀样式

有千万种设计方法，可以为你下个项目中的方块元素打造特殊风格。你可以将它们与其他元素自由组合，比如圆形，或者采用贯穿始终的矩形或正方形来营造网站的视觉焦点。最后两个例子中，你会再次见识如何将方块良好地应用于设计中，希望对你有所启发，并能在你下个项目中发挥作用。

Jan Finnesand用了全屏的宽度与高度来放置方块，每一块都有特殊作用，大多展示了他以往的项目案例。充满整个浏览器窗口的方块造就了一件非常酷的设计。

这家公司无处不用方块!主页上可以看到，他们也展示不同的案例。通过不同尺寸的正方形引导用户视线。我最喜欢的一点是，他们用两个正方形来组成一张更大的图片，但每一张都指向一个独特的项目――我觉得这很酷。