网页怎样布局
前端网页布局有几种方式
前端网页布局有几种方式常用的前端网页布局方式有四种，分别为静态布局;流式布局;自适应布局;响应式布局。
其中静态布局为传统的一种布局方式，网页上的所有元素都是用px为单位进行设定的。
1、静态布局最为传统的一种布局方式，网页上的所有元素都是用px为单位进行设定的。
布局特点：不管屏幕的大小，页面宽高始终不变，始终维持最初〔制定〕时的样式大小来显示。
常规的PC端网页都是用的静态布局，也就是设置了min-width，当小于这个宽度的时候出现滚动条，当大于的时候让内容居中，外加背景。
2、流式布局布局特点：当屏幕分辨率大小发生变化时，页面里的元素大小会变化但布局不会发生变化。
制定方法：使用%百分比来定义宽度，高度大都是用px来固定，可以依据可视区域(viewpoint)和父元素的实时尺寸进行调整，尽可能的去适应各种分辨率。
往往配合max-width/min-width等属性控制尺寸流动范围以免过大或者过小影响阅读。
这种布局在web前端开发的早期，用来应对不同尺寸的PC屏幕，在当今的移动端开发也是常用的布局方式。
3、自适应布局自适应布局就是为不同的屏幕定义不同的布局，就是创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。
改变不同的屏幕分辨率可以切换不同的静态布局(页面元素位置发生改变)，但在每个静态布局中，页面元素不随窗口大小的调整发生变化。
可以把自适应布局看作是静态布局的一个系列。
布局特点：当屏幕的大小发生变化时，页面里面的元素的位置会变化而大小不会变化。
制定方法：使用@media媒体查询给不同的尺寸和介质的设备切换不同样式。
在优秀的响应范围制定下可以给适配范围内的设备比较好的体验，在同一个设备下实际上还是固定的布局。
4、响应式布局响应式制定的目标是保证一个页面在所有终端上(各种尺寸的PC、手机、平板、智能手表的Web浏览器等等)都能显示出令人满意的效果，对CSS编写者来说，有多种手法可以去实现，但通常是糅合了流式布局+弹性布局，再搭配媒体查询技术使用。
网页布局方案
网页布局方案第1篇网页布局方案一、项目背景随着互联网技术的不断发展和普及，网页作为信息传播的重要载体，其界面布局的合理性、美观性和用户体验成为越来越受到重视的环节。
为满足客户需求，提高用户访问体验，确保网页信息的有效传达，特制定本网页布局方案。
二、目标定位1. 确保网页界面整体风格统一，符合品牌形象；2. 优化网页布局，提高用户体验，降低用户访问跳出率；3. 提高网页加载速度，满足不同设备访问需求；4. 合理安排内容布局，提升网页信息传达效果。
三、布局原则1. 简洁明了：界面设计简洁，易于用户理解和操作；2. 层次清晰：内容布局层次分明，便于用户快速找到所需信息；3. 一致性：整体风格、色彩搭配、字体选择等方面保持一致性；4. 灵活性：适应不同设备、分辨率和浏览器，提高兼容性；5. 响应式：根据用户行为和设备环境进行智能化布局调整。
四、具体布局方案1. 头部区域：- 标志：放置品牌标志，增强品牌形象；- 导航栏：提供全局导航，方便用户快速切换到其他页面；- 搜索框：便于用户快速查找内容。
2. banner区域：- 轮播图：展示重要信息、广告或活动，吸引用户关注；- 简洁明了，突出主题。
3. 内容区域：- 主体内容：根据用户需求，合理安排信息展示顺序，突出重点；- 侧边栏：提供辅助信息、推荐阅读等内容，提高用户粘性；- 分页：合理划分内容，提高加载速度。
4. 底部区域：- 版权信息：注明版权所有，增强法律意识；- 导航链接：提供网站地图、友情链接等，方便用户浏览；- 联系方式：提供联系方式，便于用户咨询和反馈。
五、实施步骤1. 需求分析：深入了解客户需求，明确项目目标；2. 设计草图：根据需求，绘制初步布局草图；3. 设计稿制作：根据草图，制作详细设计稿；4. 前端开发：遵循W3C标准，进行HTML、CSS和JavaScript编写；5. 测试与优化：在不同设备和浏览器上测试，优化布局效果；6. 上线部署：确认无误后，进行上线部署；7. 持续优化：根据用户反馈，持续优化网页布局。
网页布局结构与色彩搭配解析
二、色彩搭配的基本原理和常见搭配方式
3、对比度：对比度是衡量两种颜色在视觉上的差异程度。高对比度的颜色搭 配可以增强网页的视觉效果，但过多使用可能会使网页显得过于刺眼。
三、不同应用场景和需求下的色 彩搭配分析
三、不同应用场景和需求下的色彩搭配分析
1、新闻类网站：新闻类网站以传递信息为主要目的，要求色彩搭配简洁明了。 使用对比度较高的色彩搭配可以突出标题和重点段落，提高阅读体验。例如，黑 色和白色的对比搭配可以很好地突面内容。
四、总结
四、总结
网页布局结构与色彩搭配是网页设计的重要组成部分，对于提高用户体验和 提升网站质量具有关键作用。通过选择合适的布局结构和色彩搭配，能够使用户 更加愉悦地使用网站，同时也能更好地传递网站的信息和价值。
四、总结
希望本次演示的解析能对相关从业人员有所帮助，在未来的工作中注重布局 结构和色彩搭配的运用，为打造更加优秀、实用的网页提供支持。
四、实际操作案例
1、确定主题：该电商网站主要销售环保产品，主题为“绿色生活”。 2、确定色彩搭配方案：以绿色为主色调，搭配灰色和白色。绿色代表环保， 灰色和白色则可以营造出简洁、干净的视觉效果。
四、实际操作案例
3、应用色彩搭配方案：首页的背景色为淡绿色，产品图片使用深绿色，与背 景形成对比度，突出产品。标题文字使用白色，与背景色形成强烈对比，引导用 户视线。副标题和正文使用灰色，保持视觉上的平衡。
3、品牌官网：品牌官网是展示品牌形象的重要平台，色彩搭配要与品牌形象 保持一致。例如，对于科技品牌，通常使用蓝色、灰色等冷色调来营造一种专业、 可靠的形象；而对于儿童品牌，则可以使用较为鲜艳的色彩来传达一种活泼、有 趣的氛围。
四、实际操作案例
四、实际操作案例
如何使用Dreamweaver设计网页布局
如何使用Dreamweaver设计网页布局一、简介Dreamweaver是一款专业网页制作软件，在设计网页布局时非常实用。
本文将介绍如何使用Dreamweaver来设计网页布局。
二、Dreamweaver的基本布局工具1.标签工具在Dreamweaver中，标签工具是设计网页布局的基础工具之一。
通过标签工具，用户可以方便地插入并编辑HTML标签，快速构建网页结构。
2.定位工具Dreamweaver中的定位工具是一个强大的布局工具，能够帮助用户精确地定位元素在页面中的位置。
通过定位工具，用户可以指定元素的位置、大小、层叠顺序等属性，实现灵活的网页布局。
3.表格工具表格工具是Dreamweaver中常用的布局工具之一。
用户可以使用表格工具创建和编辑表格，将网页内容划分成不同的区域，并控制各个区域的位置和大小。
三、基本网页布局设计1.网页头部布局网页头部通常包含网页标题、导航栏等元素。
在Dreamweaver 中，用户可以使用定位工具将这些元素排布在页面的顶部位置，使其在整个网页中呈现统一的布局效果。
2.网页主体布局网页主体通常包括文章内容、图片、链接等元素。
用户可以使用定位工具将这些元素适当地排布在页面中间位置，使其在视觉上协调和谐。
3.网页底部布局网页底部通常包含版权信息、联系方式等元素。
用户可以使用定位工具将这些元素排布在页面的底部位置，使其呈现出整洁的布局效果。
四、响应式网页布局设计1.使用媒体查询Dreamweaver提供了响应式设计功能，可以根据不同设备的屏幕尺寸和分辨率，自动调整网页布局。
用户可以使用媒体查询功能，在样式表中指定不同的样式规则，根据不同的屏幕尺寸和分辨率来呈现不同的布局效果。
2.使用弹性布局Dreamweaver的弹性布局功能可以根据容器的大小，自动调整子元素的布局位置。
用户可以在Dreamweaver中使用弹性布局工具，将网页的不同区域划分为弹性容器和弹性项目，实现自适应的响应式网页布局。
网页设计基础：理解网页布局的五种方式
网页设计基础：理解网页布局的五种方式介绍在现代互联网时代，网页设计成为了一门非常重要的技能。
而网页布局则是网页设计中的一个关键方面。
不同的网页布局方式可以影响用户对网页信息的感知和使用体验。
本文将介绍五种常见的网页布局方式，帮助读者理解并掌握这些不同的布局方式。
一、流式布局（Fluid Layout）流式布局也被称为自适应布局，其主要特点是网页容器会根据设备屏幕宽度或浏览器窗口大小进行相应调整。
这意味着无论用户在大屏幕电脑、平板还是手机上访问，页面都能自动适应屏幕尺寸而不至于出现滚动条。
流式布局最常用于响应式设计，通过CSS媒体查询和百分比单位来实现页面元素的相对定位和缩放。
二、定宽布局（Fixed Layout）定宽布局是指将页面内容固定在一个特定宽度上而不会随设备或窗口大小变化而改变。
这种方式通常利用像素（px）作为单位来设置元素尺寸。
优势在于保持设计的稳定性和一致性，但会在不同设备上导致页面出现滚动条或被裁剪。
三、响应式布局（Responsive Layout）响应式布局是一种综合了流式布局和定宽布局的方式。
通过使用CSS媒体查询和断点设置，在不同的屏幕尺寸下重新排列和调整页面元素，以适应各种设备。
这样可以提供更好的用户体验，同时减少开发者需要为不同设备制作独立网站的工作量。
响应式布局根据屏幕宽度或浏览器窗口大小自适应调整页面布局，使得用户能够在不同设备上获得最佳呈现效果。
四、分栏布局（Grid Layout）分栏布局是指将网页内容划分为多个平行区域，并利用CSS网格系统将页面元素放置到相应的栏中。
通过使用指定的列数和行数，可以实现复杂而灵活的网格结构。
分栏布局常见于报纸、杂志等需要多个板块并存的场景。
分栏布局可以提供良好的信息组织和视觉效果，但需要使用特定的CSS框架或自定义代码来实现。
五、居中布局（Centered Layout）居中布局是将网页内容放置在页面的中间，使其居中显示。
这种布局方式适用于简单、集中展示的页面结构，如单个产品介绍、相册或简报。
网页布局设计的原则与技巧
网页布局设计的原则与技巧网页布局是网站设计的基础，它决定了用户在浏览网页时的体验和感受，也影响了网站的可读性和可用性。
因此，好的网页布局设计不仅要美观，还要符合用户阅读习惯和心理需求。
本文将介绍网页布局设计的原则和技巧。
一、网页布局设计的原则1. 简洁明了网页布局应简洁明了，避免过度堆砌元素。
网页上的元素应尽量精简，使得用户能够快速地浏览到所需要的信息。
2. 易于识别网站的布局设计应该使用户能够轻松地区分不同元素。
这包括正确使用字体，编号和列表等方法来提高可读性，从而将潜在的用户导向他们需要的信息。
3. 多样性相对单调的布局会影响到用户的兴趣和体验。
使用不同的颜色、大小、形状和排版方式来分离不同的元素，从而提高用户的关注度。
但是要注意，多样性要有度，避免过度炫耀而影响用户的使用。
4. 一致性页面上的元素应该保持一致的风格，从而提高用户的可识别性。
以同样的方式呈现标题、菜单项和链接，这将有助于使页面在整体上感觉更加有序，并全面维护用户的使用环境。
二、网页布局设计的技巧1. 使用网格系统网格系统可以让设计更加有结构，这对于在页面上放置元素以及让页面的内容吸引眼球非常有帮助。
通过使用网格系统，您可以更加准确地了解每个元素在页面上的位置。
这将使您能够创建清晰的布局，从而更好地呈现您的内容。
2. 色彩搭配正确的颜色组合可以让页面更具吸引力，提高用户的关注度。
选取适合页面的颜色调色板，并且考虑使用互补色，使每个元素看起来都很舒服，而不至于影响用户体验。
3. 分号分区可以将页面划分为明确的部分，从而使您的设计更加有条理，并有助于吸引用户眼球。
分区无需太过复杂，只需几个色块或简单的线条即可。
4. 可视化元素的对齐使用可视化元素的对齐可以使元素之间的距离更加均衡，并能使设计师更容易看到元素布局相关的任何问题。
确保相对应的元素水平、垂直对齐有助于使整个页面看起来更加有条理。
总而言之，好的网页布局设计应该既美观，又易于使用。
学会使用Dreamweaver进行网页布局
学会使用Dreamweaver进行网页布局一、Dreamweaver简介Dreamweaver是一款专业的网页设计和编程工具，由Adobe公司开发。
它提供了丰富的功能和工具，使得网页布局变得更加便捷和高效。
下面将介绍如何使用Dreamweaver进行网页布局。
二、Dreamweaver的安装和设置1. 下载和安装Dreamweaver软件：前往Adobe官网下载适合自己操作系统的Dreamweaver安装包，双击安装并按照提示操作。
2. 设置Dreamweaver：打开软件后，点击"编辑"菜单中的"首选项"选项，进行软件设置。
可以根据个人偏好设置编辑器字体、缩进等选项。
三、新建HTML文件1. 点击菜单栏的"文件"，选择"新建"，然后选择"HTML"文件类型。
2. 在弹出的对话框中，填写网页标题和保存位置，点击"创建"按钮。
四、基本布局1. 使用表格布局：点击"插入"菜单，选择"表格"选项，在弹出的对话框中设置表格的行数、列数等属性。
然后，将需要布局的内容放入表格中的每个单元格中。
2. 使用CSS布局：点击"插入"菜单，选择"CSS布局"选项，然后选择需要的布局类型。
在弹出的对话框中，设置布局的宽度、高度、对齐方式等属性。
接着，将需要布局的内容放入对应的布局区域中。
五、导航栏的创建1. 使用无序列表创建导航栏：点击"插入"菜单，选择"无序列表"选项，然后在需要放置导航栏的位置插入无序列表的代码。
接着，将每个导航项放入无序列表的列表项中。
2. 使用CSS样式创建导航栏：点击"插入"菜单，选择"CSS样式"选项，然后选择需要的导航栏样式。
网络布局的9大原则
网络布局的9大原则网络布局是指在网页设计中，将不同元素有机地组织在一起，使网页看起来整齐、美观、易读，从而提高用户体验和网页的可用性。
以下是网络布局的九大原则：1.一致性：网页中的各个元素应该在设计和排版上保持一致，如标题的字体、按钮的样式等，通过统一的设计语言使用户能够更容易理解和操作。
2.对齐：网页中的元素应该遵循对齐原则，使页面看起来整齐有序。
可以使用左对齐、右对齐和居中对齐等方式，避免过多的居中对齐使页面呈现出不稳定的感觉。
3.对比度：合理的对比度可以提高页面的可读性，提醒用户哪些是重要的内容。
通过不同颜色、字体大小、字重等方式来产生对比度，使页面更富有层次感。
4.分组：将相关的内容和元素分组在一起，使用户能够更容易理解页面的结构和内容。
可以使用边框、背景色、线条等方式进行分组，提高页面的可读性和易用性。
5.简洁性：保持页面的简洁，不过多的元素和过多的文字会给用户带来信息过载的感觉。
通过简洁的设计和排版，使用户能够更快速地获取到所需信息。
6.层次感：通过合理的排版和设计，给页面赋予层次感，使用户能够更容易从整体上理解页面的结构和内容。
可以使用字体大小、颜色、对齐等方式来区分不同层次的内容。
7.易读性：保证页面的易读性，选择合适的字体、字号和行距，避免使用过亮或过暗的颜色。
同时，合理利用字体加粗、倾斜和下划线等方式，使重要内容更加突出。
8.响应式设计：在设计网页布局时，考虑到不同设备和屏幕尺寸的适应性，采用响应式设计来自动调整布局。
确保网页在不同设备上都能够有良好的展示效果。
9.导航：网页中的导航是用户获取信息和浏览网页的重要工具，应该设计简洁、明确的导航栏，使用户能够快速找到所需内容。
同时，提供面包屑导航和功能，提高用户的查找效率。
这九大原则是网页设计中非常重要的基本原则，通过合理运用这些原则，可以使网页设计更加专业、美观、易用，提升用户的体验感和满意度。
几种常见的网布局形式
几种常见的网页布局形式网页常见的布局结构有“国”字形布局、“匡”字形布局、“三”字形布局、“川”字形布局、封面型布局、Flash布局、标题文本型布局、框架型布局与变化型布局等。
1、“国”字形布局也可以称为“同”字型,就是一些大型网站所喜欢的类型,即最上面就是网站的标题以及横幅广告条,接下来就就是网站的主要内容,左右分列两小条内容,中间就是主要部分,与左右一起罗列到底,最下面就是网站的一些基本信息、联系方式、版权声明等。
这种结构就是我们在网上见到的差不多最多的一种结构类型。
2、“匡”字形布局这种结构与上一种其实只就是形式上的区别,它去掉了“国”字形布局的最右边的部分,给主内容区释放了更多空间。
这种布局上面就是标题及广告横幅,接下来的左侧就是一窄列链接等,右列就是很宽的正文,下面也就是一些网站的辅助信息。
3、“三”字形布局这就是一种简洁明快的网页布局,在国外用的比较多,国内比较少见。
这种布局的特点就是在页面上由横向两条色块将网页整体分割为3部分,色块中大多放置广告条与更新与版权提示。
如图所示即就是一种三字形布局的网页。
4、“川”字形布局整个页面在垂直方向分为三列,网站的内容按栏目分布在这三列中,最大限度地突出主页的索引功能。
如图1-19所示的“Beijing 2008”网站就就是一种川字形的布局。
5、海报型布局这种类型基本上就是出现在一些网站的首页,大部分为一些精美的平面设计结合一些小的动画,放上几个简单的链接或者仅就是一个“进入”的链接甚至直接在首页的图片上做链接而没有任何提示。
这种类型大部分出现在企业网站与个人主页,如果说处理的好,会给人带来赏心悦目的感觉。
6、Flash布局这种布局就是指整个网页就就是一个Flash动画,它本身就就是动态的,画面一般比较绚丽、有趣,就是一种比较新潮的布局方式。
其实这种布局与封面型结构就是类似的,不同的就是由于Flash强大的功能,页面所表达的信息更丰富。
其视觉效果及听觉效果如果处理得当,会就是一种非常有魅力的布局。
网页设计中的网格布局设计技巧
网页设计中的网格布局设计技巧在网页设计中，网格布局是一种重要的设计技巧，它能够帮助设计师将网页元素有条理地排列，使页面更加美观和易于阅读。
下面将介绍一些网格布局设计的技巧，希望对您有所帮助。
1. 定义网格布局：网格布局是将网页划分为等宽的列和行，以便于放置不同的元素。
使用网格布局可以使页面看起来更加整齐、规整，并且有助于用户快速找到所需内容。
2. 选择适当的网格系统：网格系统是一种用于创建网页布局的工具，它提供了一些预定义的布局模板和网格线的参考。
常见的网格系统包括Bootstrap、Foundation等。
选择适合自己项目的网格系统，在设计时可以根据网格线进行元素的定位和对齐。
3. 使用对称网格布局：对称网格布局是指网页上的列数和行数相等的布局方式。
这种布局方式常用于展示图片或产品等元素，可以使页面看起来更加均衡和整洁。
4. 采用非对称网格布局：非对称网格布局是指网页上的列数和行数不相等的布局方式。
这种布局方式可以用来突出某个元素或内容，从而吸引用户的注意力。
5. 划分主要和次要区域：在网页设计中，主要区域通常用来放置最重要的内容，如标题、主要图片等。
而次要区域可以用来展示相关内容、广告等。
通过划分主要和次要区域，可以使页面结构更加清晰，提高用户的阅读体验。
6. 考虑响应式设计：在设计网格布局时，务必考虑到不同设备和屏幕尺寸的适配。
响应式设计是指网页能够自动调整布局和元素的大小，以适应不同的屏幕尺寸。
通过使用媒体查询和弹性盒子布局等技术，可以实现网页在不同设备上的良好显示效果。
7. 注意间距和对齐：在网页设计中，间距和对齐是非常重要的。
合理的间距能够提高页面的可读性和视觉效果，而对齐可以使页面看起来更加整齐和专业。
在使用网格布局时，要注意元素之间的间距和对齐方式，避免元素之间的杂乱和混乱。
8. 考虑色彩搭配：色彩搭配是网页设计中的另一个关键因素。
使用合适的颜色可以增强页面的吸引力，并且有助于表达设计的主题和情感。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
网页怎样布局
布局一、大框套小框。
这种布局是很多网站都常使用一种布局方式，在一个大的栏目里然后在布局几个小的相关栏目，这种布局方式大小有限，让用户专注于某一方面的内容，主体特别。
布局二、围绕式布局。
围绕式布局更加灵活方便，banner区域相对较小，但是可以在页面中安排更多的信息和内容，这种布局合适内容较多或者以内容为主的网站。
布局三、穿插式布局。
这种布局在企业网站中不常用，也不合适企业网站，这种网站就是banner的区域较大，灵活性相对差些。
布局四、通栏布局。
这种布局方式相关于大框套小框而言，用户浏览网页不在受到方框的限制，这种方式显得大气些，眼界显得更开阔些。
另外这种方式还有一个便利之处那就是主视觉部分可以随灵巧活处理，既能往上移到网站logo和导航的位置，也可以移到向下扩大的内容区域。
这种布局方式也是网站中常用的布局方式。
布局五、左中右布局。
这种布局方式也不常见，但也是一种新鲜的布局方式，这种布
局比较有条理，逻辑性较强。
布局六、导航在主视觉下方的布局。
这种布局方式在一些资讯门户网站中还是比较常见的，导航直接放置在banner的下面，这可以弥补banner中〔制定〕素材被截断的缺陷。
另外这种布局方式，用户打开网页就能看到网站的导航，这样关于新客户来说是及其友好的，新客户不用刻意去寻找网站的导航，而且访客可以通过第一眼就能分清网站主要导航内容。
2如何设置页面布局
打开准备好的word文档，切换到"页面布局'选项卡下，单击页面设置组中右下角的对话框启动器，这个时候会弹出一个对话框。
在弹出的"页面设置'对话框中，切换到"页边距'选项卡下，然后将上下页边距设置为2.54厘米，左右页边距设置为3.17厘米，其他选项默认选择即可。
在弹出的"页面设置'对话框下，切换到"纸张'选项卡下，在纸张大小下拉列表中选择A4选项。
在"页面布局'选项卡下，选择"纸张大小'选项，也可设置纸张的大小。
在弹出的"页面设置'对话框下，切换到"版式'选项卡下，然后在页眉和页脚微调框中进行输入相对应的值，在此输入页眉和页脚距离边界1.5厘米。
同样在"页面布局'选项卡下，也可以对页边距进行设置。
点击页面布局选项卡下的"页边距'选项，选择"自定义边距'，也可以弹出上一步的"页面设置'对话框，进行相应的设置。
切换到"制定'选项卡下，单击页面背景组中的"页面颜色'选项，在弹出的下拉列表中选择任意一个自己喜爱的颜色，进行设置，这样就大体制定好了。
3如何通过DIV来布局页面
我们先在一个容器里输入三个div。
如果不添加样式，直接打开页面，我们的三个div是以块来显示的，即每个div占用一块，是竖排的。
为了让div能像table那样，横排来布局页面，我们可以添加样式，为div添加 float:left的样式，让div能横排。
刷新页面，可以看到现在的三个div都能横排了。
还必须要设置一下各div的宽度。
我们为left, right， middle 三个div各设置不同的宽度。
刷新页面，可以看到现在三个div已经可以把容器分成三列的布局了。
细节上再修正一下，把中间div的左右二边的边框设置为none，现在看起来更好点了。
4网页排版布局的原则
1.平衡性
(1)文字、图像等要素的空间占用上分布均匀
(2)色彩的平衡，要给人一种协调的感觉。
2.对称性
对称是一种美，我们生活中有许多事物都是对称的。
但过度的对称就会给人一种呆板、死气沉沉的感觉，因此要适当地打破对称，制造一点变化。
3.对比性
让不同的形态、色彩等元素互相对比，来形成鲜亮的视觉效果。
例如黑白对比，圆形与方形对比等，它们往往能够创造出富有变化的效果。
4.疏密度
网页要做到疏密有度，即平常所说的"密不透风，疏可跑马'。
不要整个网页一种样式，要适当进行留白，运用空格，改变行间距、字间距等制造一些变化的效果。
5.比例
比例适当，这在布局当中非常重要，虽然不一定都要做到黄金分割，但比例一定要协调。