CSS布局（共9篇）
CSS布局 篇1
一、CSS+DIV布局简介
DIV元素是html语言中的一个元素,是标签,用来为HTML文档的内容提供结构和背景的元素。css是英语Cascading Style Sheets的缩写,中文名称为层叠样式表,它是用来表现网页外观样式的计算机语言。CSS提供了丰富的样式表现功能,如字体、段落、颜色、背景、布局等。每个HTML标签都含有style属性。利用style属性可以将CSS样式直接写入HTML文档的某个标签内。DIV+CSS的布局方法简单来说就是使用div标签作为容器,使用CSS技术来排布div标签的布局方法。
二、表格布局网页的问题
表格曾经是网页制作中应用最频繁的元素,起主要作用是定位和排版网页,便于初学者掌握和使用。但是使用表格技术制作的网页,由于嵌套了大量的表格,不仅容易产生页面内容错位,使网页维护和更新的工作量非常繁重,更重要的是产生了大量的冗余代码,从而使网页容量剧增,浏览器加载缓慢。
三、两种方式布局页面的代码对比
下面通过制作一个歌曲专辑列表页面为例,来比较两种方法布局网页的区别。效果图如下图所示:
(1)使用CSS+DIV布局代码如下:
至此,通过以上两种方式制作网页的代码比较,很明显得出以下结论:利用CSS+DIV技术制作的网页,相对于表格嵌套的方式,修改设计时更有效率。由于使用了CSS+DIV制作方法,使内容和结构分离,使得修改页面的时候更加方便,也不会破坏页面其他部分的布局样式;使得网页更加容易扩展,并且更加规整;使得网页中代码更加简洁,页面体积变小,使页面载入得更快。
四、结语
使用CSS+DIV的布局方式改变了传统html+table的布局方式。CSS+DIV尽管不是高不可及,但至少要比表格定位要复杂,如何更有效、更合理地运用DIV+CSS,需要通过不断的实践和积累丰富的实操经验,才能很好的掌握这门技术。
参考文献
[1]曾静娜.新手学CSS+DIV[M].北京希望电子出版社,2010.
[2]金峰.变幻之美CSS+DIV网页布局揭秘[M].北京:人民邮电出版社,2009.
[3]郑燕琦.CSS+DIV网页布局应用[J].科技文汇,2013,5(下).
CSS布局 篇2
制作“宝贝分类”页面 制作“公告栏”页面
为什么使用表格
表格应用场合 具体内容见ppt 表格的基本结构
具体内容见ppt
表格的基本语法
Table标签 Tr标签 Td标签 具体内容见ppt 注：表格标签中没有列标签。
如何创建表格
具体内容见ppt
跨行跨列的表格
什么是跨行跨列的表格 跨多行的表格
跨多列的表格 具体内容见ppt
表格的美化修饰
什么是表格的美化修饰 如何设置表格的尺寸和边框 width用来设置表格的宽度 height用来设置表格的高度
border用来设置表格边框尺寸大小 bordercolor用来设置表格边框颜色 如何设置背景
background属性用来设置表格的背景图片
bgcolor属性用来设置表格、行、列的背景色。HTML中颜色的表示方式：“#EBEFFF”是用RGB表示的一种颜色值，RGB指的是红绿蓝。
如何设置对其方式
align属性用来设置表格、行、列的对齐方式 为什么要使用填充属性 具体内容见ppt 什么是填充属性和间距属性
border(边框的厚度)cellpadding(单元格填充)cellspacing(单元格间距)如何使用填充、间距属性 border(边框的厚度)cellpadding(单元格填充)cellspacing(单元格间距)
表格的布局
什么是表格布局 使用表格进行布局
用表格对网页的内容进行整体控制
DIV+CSS规划页面
什么是CSS？
为什么要使用CSS？ 如何使用CSS？
DIV+CSS如何规划页面？
什么是CSS？
CSS（Cascading Style Sheet）可译为“层叠样式表”或“级联样式表”，它定义如何显示 HTML 元素，用于控制Web页面的外观。
为什么要使用CSS？
CSS的特点
便于页面的修改。便于页面风格的统一。减少网页的体积。为什么要使用CSS？ 使用CSS布局的优点 表现和内容相分离 提高页面浏览速度 易于维护和改版
CSS样式表极大地提高了工作效率
样式通常保存在外部的.css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
由于允许同时控制多重页面的样式和布局。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。内联定义
内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。
如何使用CSS？
只针对标签内的元素有效，因其没有和内容相分离，所以不建议使用。 定义内部样式块对象
你可以在你的HTML文档的和
标记之间插入一个块对象。定义方式请参阅样式表语法。这样的样式表只能针对本页有效。不能作用于其它页面。 导入样式——Style导入
与链入外部样式的功能基本相同，只是语法和实现方式上有差别。
它一般常用在另一个样式表内部。如layout.css为主页所用样式，那么我们可以把全局都需要用的公共样式放到一个global.css的文件中，然后在layout.css中以@import url(“/css/global.css”)的形式链接全局样式，这样就使代码达到很好的重用性。 导入样式——Link标签导入
使用Link标签代替Style标签来导入CSS文件。
它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。
除了内联定义是直接作用于标签本身以外，其他CSS使用方式都需要建立标签和样式之间的映射关系。主要的映射关系有： id映射 class映射 标签映射 混合映射 CSS样式和页面标签元素的对应方式
几种样式的优先级
id优先级高于class 后面的样式覆盖前面的 指定的高于继承 行内样式高于内部或外部样式
总结原则：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的。
DIV+CSS如何规划页面？
请关注上机实验3
CSS布局 篇3
关键词：DIV+CSS；TABLE；网页设计
DIV+CSS是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（TABLE）定位方式的区别。目前主流的网页设计架构大多为DIV+CSS结构，DIV+CSS区别于传统的表格定位的形式，采用以“块”为结构的定位形式，DIV本身就是容器性质的，不但可以内嵌TABLE还可以内嵌文本和其它的HTML代码。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者是通过使用樣式表格式化这个块来进行控制。CSS是（Cascading Style Sheets）的简称，中文译作“层叠样式表单”，在网页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者所有页面的外观和格式。
DIV+CSS与TABLE方式在设计时差别很大，网页开始设计前需要仔细规划，比如对组成网页的各部分元素命名，方便在CSS中进行样式定义，公共属性部分最好用类名定义。整个网站通用的样式可以放到单独的一个CSS文件中，常有的公共属性有：网页宽度、背景颜色、背景图片、字体默认大小、颜色、链接样式等。
具体来说DIV+CSS布局主要有以下几种优势：
一、网页代码标准化
网页设计采用DIV+CSS，最大的优势是实现网页代码的标准化，摒弃过时的表格布局方式，实现了样式与内容的分离，HTML代码结构性更好，更易阅读和维护。当需要进行网页外观修改时，只需要修改CSS文件即可，完全不用修改网页的结构部分代码，也不会破坏页面其他部分的布局样式。
二、提高页面加载速度
使用表格布局的网页必须将整个表格加载完成后才能显示出网页的内容，而DIV+CSS布局的网页则因DIV是一个松散的盒子而使其可以边加载边显示出网页内容，由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小，相对于表格嵌套的方式，DIV+CSS将页面独立成更多的区域，在打开页面的时候，逐层加载。
三、灵活控制页面布局
页面的下载通常是按照代码的排列顺序，比如表格布局代码的排列是从上向下，从左到右，无法改变。而通过CSS控制，可以任意改变代码的排列顺序，比如将重要的内容先加载出来。
四、利于搜索引擎的搜索
使用DIV+CSS布局，结构清晰，用只包含结构化内容的HTML代替嵌套的标签，主次分明，对搜索引擎更加友好，更容易被搜索引擎收录，易于检索。
五、简化页面，保持站点一致性
使用DIV+CSS对外观进行控制时，由于CSS可以一处定义多处使用，因此除了减少工作量外，也起到了统一站点视觉效果的功能并大大缩减了页面代码。将所有页面或所有区域统一用CSS文件控制，就避免了不同页面或不同区域所体现出的效果偏差。
六、良好的兼容多种设备
使用DIV+CSS布局时，可使站点更容易被多种浏览器和用户访问，同时能够兼容多种设备，如手机、平板电脑等。
虽然DIV+CSS在网站建设中有很多的优势，但是在实际使用中也难免存在不足：
（1）DIV+CSS在网站建设中比传统的TABLE定位要复杂的多，这就要求设计者一定要事先对网站的整体结构有一个清晰的规划和设计，合理应用块结构，否则极易出现混乱。
（2）DIV+CSS网站建设的样式元素通常会放在一个或多个外部文件中，有可能相当的复杂，甚至比较庞大，如果在网站建设中CSS文件调用出现异常，那么整个网站的外观就会面目全非。
（3）虽然说DIV+CSS解决了大部分浏览器兼容的问题，但是也有在部分浏览器中使用出现异常的情况，比如火狐浏览器，在IE中显示正常的页面，到了火狐浏览器中就可能会有异常，这样的情况经常发生，DIV+CSS还没有实现所有浏览器的统一兼容，因此在页面设计的同时，一定要注意调试浏览器的兼容性。
基于DIV+CSS的以上特点，我们在实际的网页设计中，要注意以下几个方面的应用：
（1）FLOAT属性：DIV（层）默认是占据一整行，对于常见的两列或多列布局的设计，需要能够正确设置FLOAT及WIDTH属性来实现效果。许多浏览器在显示未指定WIDTH的FLOAT元素时会有BUG，所以不管FLOAT元素的内容如何，一定要为其指定WIDTH属性。
（2）盒模式：层具有宽度WIDTH、高度HEIGHT、边框BORDER、内间距PADDING和外间距MARGIN等属性，而层实际占据的空间是上述属性值相加的大小，合理运用这些属性能实现紧凑而又美观的网页布局。
（3）层嵌套：在进行页面设计时层不宜嵌套过多，嵌套过多会导致代码复杂冗余、维护困难及运行变慢的问题，在多列布局时完全可以用层浮动来实现。
（4）兼容性： DIV+CSS相比TABLE布局，更容易出现多种浏览器不兼容的问题，主要原因是不同的浏览器对WEB标准默认值不同。在兼容性测试方面，由于国内使用IE浏览器的用户居多，特别要保证在IE多版本下的兼容问题，针对具体情况可以采用不同的解决办法，也可以使用HACK方法为IE浏览器指定特别的参数。
基于以上的分析，我们在进行网站建设的时候，要不断地加以学习，总结经验，根据实际情况有的放矢，才能更有效、更合理地运用好DIV+CSS技术。
参考文献：
[1]赵清华、林学华 《基于DIV+CSS的网页布局技术应用研究》现代计算机（专业版）2010年05期
CSS布局 篇4
由于浏览器Bug与不一致问题的存在，设计人员在使用CSS设计网站时，会使用各种各样的布局解决技术。大致上，存在两种布局技术：一种是固定布局，另一种是流体布局或弹性布局。由于对后者技术的工作原理知之甚少，阻碍了开发人员对流体布局的理解，使得固定宽度的布局成为目前最常用的的布局方式。但随着显示器屏幕宽度日益增加、手机上网用户和PDA用户的增多，以及不同视力要求下的页面文字的调整对布局的影响，固定宽度设计的缺点日渐明显。
解决这些问题的关键便是用流体布局或弹性布局来代替固定布局。
1 CSS介绍
CSS(Casecading Style Sheet)是一种将文档内容与外观分开设置的技术。通过CSS，页面设计人员能够为每个HTML页进行集合管理和创建一致的、跨越不同页面的外观。
CSS样式使用由冒号分隔的样式属性名称/值来创建CSS样式。存在两种类型的CSS样式：内嵌样式和外部样式。内嵌样式以包含样式说明，使用于文档内部。而外部样式则以单独的*.css文件存放样式说明，并使用
标签与应用的文档相互关联。
CSS布局技术指的是使用CSS约束
2 布局技术
2.1 流体布局
固定宽度布局中尺寸以像素为单位。这样无论显示器宽度如何变化，页面布局大小都不会改变。而在流体布局中，尺寸以百分比为单位，这使流体布局能够相对于浏览器窗口进行伸缩，以达到高效利用窗口空间。例如，常用布局结构图如图1。
流体布局的CSS设置如下：
以上设置以2%的宽度做为导航(sidebar)和内容(content)块间的视觉距离，以防止由舍入错误和宽度差错破坏布局。
现在设置主内容区(mainContent)与次内容区(secondContent)的宽度。假设次内容区宽度与导航区相同，由于次内容区参照内容区计算，则宽度应为23/75，约为31%;又假设主次内容区间距与上述视觉距离相同，则间距为2/75，约为3%。所以主内容区距离应为66%。
经过测试比较，此流体布局最适合1024X768分辨率。在更大或更小的屏幕分辨率上阅读也比较舒服。
流体布局的自由伸缩带来另一个问题：如果浏览器窗口太窄或太宽，会导致页面的可阅读性下降。解决方法是以像素或em为单位设置最小宽度(min-width)属性和最大宽度(max-width)属性或用填充与空白边以百分比为单位设置大小。
2.2 弹性布局
虽然流体布局可以最大限度的利用空间，但当使用IE中的文字大小调整时，字体的变化也会降低可读性。此时，使用弹性布局可确保字号变化时，整个布局也随之扩大。
弹性布局以em为单位设置元素宽度。em为字体高，任意浏览器的默认字体高都是16px，所以未经调整的浏览器都符合：1em相当于16px。则10px相当于0.625em。为了简化字体的换算，需要在body的css选择器中声明font-size=62.5%，这就使得页面默认字号改为16px×62.5%=10px，此时，1em就相当于10px。这样，12px=1.2em,750px=75em，即只需要将px数值除以10再加上em的单位。但em具有继承上级元素的大小，那么在嵌套级元素尺寸设置时，必须考虑其父级元素所导致的尺寸变化，从而正确将流体布局改为弹性布局。
2.3 混合布局
将流体与弹性技术组合在一起，便创建了混合布局。此布局以em设置宽度，用百分比设置最大宽度。在支持max-width的浏览器中，这个布局将随字号伸缩，但绝不会超过窗口的宽度。
3 影响流体布局或弹性布局的因素
试验中发现，图像是影响流体布局或弹性布局的因素之一。当布局随浏览器变化时，图像的固定尺寸会对设计产生强烈的影响：当布局宽度减小时，图像会移位;反之图像周围会出现空隙。使用隐藏或显示图像方法和图像与布局同步伸缩方法可较好地降低此种影响：
1)隐藏或显示图像
当布局扩大时，显示图像;当布局减小时，隐藏图像。图像不随布局伸缩。
组合一：
组合二：
#wrapper{height:252px;
2)图像与布局同步伸缩
当布局扩大时，图像随之扩大至最大值，保持图像不失真。当布局缩小时，图像随之等比缩小。以下示例说明，随着布局元素的扩展和收缩，图像和文本段落也会同步扩展和伸缩，从而解决固定值图像不能随布局变化的缺陷。
4 总结
CSS流体布局与弹性布局的出现改进了HTML文档在不同显示屏幕及浏览器中的表现。与传统的表格布局相比，CSS布局的代码简洁、下载速度高的特点十分突出。随着手机上网、PDA掌上终端及宽屏显示器的流行，流体与弹性技术将会得到更大的应用。
摘要：随着网页阅读屏幕的多样化,流体及弹性布局技术将代替传统的固定技术,成为网页设计中的主要布局技术。该文通过对流体及弹性布局技术的研究,介绍了基于CSS的布局实现。
关键词：CSS,流体布局,弹性布局,混合布局
参考文献
[1]Cederholm D.Buttetproof Web Design:Improving flexibility and protecting against worst-case[M].New Riders Press,2005.
[2]Cederholm D.Bulletproof Web Design:Improving flexibility and protecting against worst-case scenarios with XHTML and CSS[M].Peachpit Press,2005.
[3]Budd A,Moll C,Collison S.Css Mastery:Advanced Web Standard Solutions[M].北京:人民邮电出版社,2007.
[4]Budd A,Collison S,Moll C.精通CSS:高级Web标准解决方案(第2版)[S].2010.
DIV+CSS网页布局方法探析 篇5
一、DIV+CSS网页布局的分类
1、一列固定宽度
一列布局是所有布局的基础,也是最简单的布局方式,用DIV+CSS布局的代码如下:
2、一列自适应宽度
自适应的布局能够根据浏览器窗口的大小自动改变其宽度和高度值,是网页设计中一种非常灵活的布局形式,用DIV+CSS布局的代码如下:
3、一列固定宽度居中
页面整体居中是网页布局中最常见到形式,在传统的表格布局中,使用TABLE的align="center"属性来实现,在DIV+CSS布局中采用如下代码来实现:
4、二列固定宽度
在有一列固定宽度布局的基础上,实现二列固定宽度也就很简单了,用DIV+CSS布局的代码如下:
5、二列固定宽度居中
从一列固定宽度居中的布局方法中,我们就不难完成二列固定宽度居中了,可以使用一个居中的DIV作为容器,将二列分栏的DIV放置在容器中,从而就实现二列的居中显示。DIV+CSS的代码如下:
这里仅列举了一列、二列的布局方式,实际上三列、四列等多列的布局方式也和二列的布局方式的实现方法是一样的。事实上不管多么复杂的页面设计,在DIV+CSS网页布局中,均是以DIV为基础,通过一列、二列、三列这些基础的布局方式的相互组合与嵌套来实现复杂的布局。
二、CSS对不同浏览器的兼容性解决办法
由于CSS在不同浏览器中存在兼容性问题,所以在使用DIV+CSS布局中,可能导致相同的内容在不同浏览器中出现不同的显示效果,为了解决这些方面的问题,以下针对CSS某些属性的用法提出相应的一些解决办法。
1、页面居中问题
在IE浏览器下,可以通过定义CSS样式body{text-align:center;}来实现页面居中,但在Fire Fox(以下简写为FF)浏览器下此属性就失效了。
解决办法:使用"margin-left:auto;margin-right:auto;"
2、pa dding属性在不同浏览器的显示问题
当给DIV设置padding属性后,在FF浏览器中会导致width和height增加(DIV的实际宽度=DIV宽+Padding),但在IE浏览器中width和height不会增加,这就导致相同的内容在不同浏览器中出现不同的显示效果。
解决办法:给DIV设定IE、FF两个宽度,在IE的宽度前加上IE特有标记"*"号。例如:
3、奇怪的间隙问题
有的时候我们明明设好了高度,可在IE6上却看见一些奇怪的间隙。
解决办法:试试在有空隙的DIV上加上"font-size:0px;"
4、关于手形光标
要将页面内容的光标显示为手形,通常的做法是使CSS属性cursor:hand;但这于做法只适用于IE.
解决办法:cursor:pointer;
5、浮动在IE6产生双倍距离问题
例如:
这种情况之下IE6会产生200px的距离。
解决办法:在以上属性的基础上,加上display:inline,使浮动忽略。
6、UL和FORM标签的pa dding与ma rgin
ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值。FORM标签在IE中,将会自动margin一些边距,而在FF中margin则是0;
解决办法:css中首先都使用这样的样式ul,form{margin:0;padding:0;}
7、截字省略号
这个CSS是定义当内容溢出宽度后会自行的截掉超出部分的文字,并以省略号结尾,但注意Firefox并不支持。
三、结束语
综合以上讨论的DIV+CSS网页布局的技巧,希望能给酷爱DIV+CSS网页布局的初学者带来一些启示,但在网站建设与网页设计过程中,我认为不可盲目跟风,如何更有效、更合理的运用WEB2.0设计标准,这需要很长时间的学习和锻炼。而如何将DIV+CSS运用的更好,我觉得这需要通过不断的实践和体验,积累丰富的设计经验,才能很好的掌握这门技术。
摘要：如今的网页设计考虑得更多的是搜索引擎以及给用户带来更多的便利,传统的TABLE网页布局由于其庞大的HTML代码,使得其在搜索引擎方面显得有些无能为力,而用DIV+CSS进行网页布局具有代码精简的优点使得其在这方面又体现出更多的优势。但是又由于CSS对不同浏览器存在兼容性问题,所以对于初学者来说,在使用DIV+CSS进行网页布局过程中可能会遇到各种问题,本文就给大家探讨几点DIV+CSS布局的技巧。
关键词：DIV+CSS,网页布局,浏览器,兼容性
参考文献
[1]览众,张晓景著.DIV+CSS网页布局商业案例精粹[M].电子工业出版社,2007.12
[2]Jeffrey Zeldman著.傅捷,王宗义,祝军译.网站重构——应用Web标准进行设计[M].电子工业出版社,2005.4.
运用DIV+CSS设计网站布局 篇6
关键词：DIV+CSS,选择器,盒子模型
DIV用于搭建网站结构、CSS用于创建网站表现, 实质即使用XHTML对网站进行标准化重构, 使用CSS将表现与内容分离, 便于网站维护, 简化html页面代码, 可以获得一个较优秀的网站结构, 便于日后维护、协同工作和搜索引擎蜘蛛抓取。
仔细分析和规划页面结构, 得到类似这样的几块:
标志和站点名称
主页面内容
站点导航
子菜单
搜索框
功能区 (例如购物车、收银台)
页脚 (版权和有关法律声明)
我们通常采用DIV元素来将这些结构定义出来, 类似这样:
这是一个对内容块的语义说明。DIV容器中, 可以包含任何内容块, 也可以嵌套另一个DIV。内容块可以包含任意的HTML元素:标题、段落、图片、表格等等。每一个内容块都可以放在页面上的任何地方, 再指定这个块颜色、字体、边框、背景以及对齐属性等等。
ID的名称是控制某一内容块的手段, 通过给这个内容块套上DIV, 并加上唯一的ID, 就可以用CSS选择器精确定义每一个页面元素的外观。
CSS是CascadingStyleSheets (层叠样式表) 的缩写。是对web文档添加样式的简单机制, 属于表现层的布局语言。
CSS中有三大类型选择器:基本选择器、复合选择器、特殊选择器。基本选择器又包括标签选择器、id选择器、类选择器。
一个HTML页面可以由很多不同的标签组成, CSS标签选择器可以声明哪些标签采用哪种CSS样式。因此说, 每一种HTML标签的名称可以作为相应的标签选择器的名称。
每一个CSS选择器均包含选择器本身、属性和值, 其中属性和值可以设置多个, 以实现对同一个标签声明多种样式风格。CSS语言对所有属性和值都有严格的要求, 如果声明的属性在CSS规范中没有, 或某个属性的值不符合该属性的要求, 均不能使该CSS语句起作用。若标签选择器一旦声明, 那么页面中所有相应标签都会产生变化。
类选择器的名称可以由用户自定义, 属性和值都跟标签选择器一样, 必须符合CSS规范。
ID选择器的使用方法跟class选择器基本相同, 不同的地方在于ID选择器只能在html页面中使用一次, 所以其针对性更强。html的标签中只需利用ID属性, 就可以直接调用CSS中的ID选择器。
复合选择器是3种基本的选择器通过组合, 产生更多种类的选择器, 实现更强、更方便的选择功能, 它包括交集选择器、并集选择器和后代选择器。
CSS盒子模型是CSS控制页面时一个很重要的概念, 只有很好的掌握了盒子模型及其中每个元素的用法, 才能控制好页面中的各个元素。每个页面中的元素都可以看成是盒子, 它们占据着一定的页面空间, 这些被占据的空间往往要比单纯的内容大。可以通过调整盒子的边框和距离等参数, 调节盒子的位置和大小。
一个页面由很多盒子组成, 盒子之间会相互影响, 因此掌握盒子模型需要从两方面来理解。一是要理解一个孤立的盒子的内部结构;二是要理解多个盒子之间的相互关系。
先来看一个例子, 理解盒子的概念。假设, 在墙上整齐地排列着4幅画。对于每幅画, 都有一个边框, 英文是border, 每个画框中, 画和边框通常都会有一定距离, 这个距离称为内边距, 英文是padding, 各幅画之间通常也会有一定距离, 他们之间的距离称为外边距, 英文是margin。这些对象实际上就是一个border-padding-margin的模型。这些矩形对象可以统称为盒子, 英文是box。了解了盒子之后, 还需要理解模型这个概念。
模型就是对某种事物的本质特性的抽象。模型的种类很多, 网页布局中, 为了使纷繁复杂的各个部分合理地组织, 专家对它的本质进行研究后, 总结了一套完整的、行之有效的原则和规范。这就是盒子模型的由来。
在CSS中, 一个独立的盒子模型由content (内容) , border (边框) , padding (内边距) 和margin (外边距) 4个部分组成。一个盒子实际所占有的宽度或高度是由content+padding+border+margin组成。在CSS中, 通过设width和height的值控制内容所占矩形大小, 并且对于任何一个盒子, 都可以分别设定4个border、content、padding和margin。因此只要利用好这些属性就能够实现各种各样的排版效果。
盒子并不仅仅是用DIV定义的, 事实上, 所有的网页元素本质上都是以盒子的形式存在。网页上的各种内容, 在人的肉眼看来是文本、图像等, 在浏览器看来, 就是由许多盒子排列在一起或者相互嵌套。
在一个网页中有着大量的盒子, 他们以各种关系相互影响。为了能够方便的组织盒子有序的排列和布局, CSS规范的制定者进行了深入细致的思考, 使得这种方式既有足够的灵活性, 以适应各种排版要求, 又可能使规则尽可能简单, 让浏览器的开发者和网页设计师都能够相对容易地实现。若干种对盒子进行布局的方法, 包括浮动属性和定位属性等。
在标准流中, 每一个块级元素都是从一个新行开始显示, 而且其后的元素也需另起一行进行显示。当需要横向排列的时候, 将会用到FLOAT这个属性, FLOAT属性的作用就是改变块级元素对象的默认显示方式。如果将FLOAT属性的值设为left或right, 元素就会左侧或右侧靠紧, 同时默认情况下, 盒子的宽度不再伸展, 而是收缩, 根据盒子内容的宽度来确定。
CSS布局 篇7
1 相关概念简介
Web标准:Web标准将网页划分为三个部分,即结构、表现、行为。结构是指用来对网页中的信息进行整理与分类,常用的技术有HTML、XHTML、XML;表现用于对已经被结构化的信息进行显示上的修饰,包括版式颜色大小等,主要技术就是CSS;行为是指对整个文档内部的一个模型进行定义及交互行为的编写,主要技术有DOM、ECMAScript(Java Script脚本语言)。
Div:Div元素是用来为HTML文档内大块的内容提供结构和背景的元素。它可以将文档分割成多个有意义的区域或模块,Div的起始标签和结束标签之间的所有的内容都是用来构成这个块的,其中所包含元素的特性由Div标签的属性来控制。
CSS:CSS(Cascading Style Sheet)译作层叠样式表,是用于控制网页样式并允许样式信息与网页内容分离的一种标记性语言。使用CSS技术,可以将表现和结构分离。能更好的控制页面布局。从而制作体积更小,下载更快的网页。
Div+CSS:Div+CSS是应用在XHTML中的一种布局方式,在XHTML网站设计标准中,不再使用Table定位技术,而是采用Div+CSS的方式实现各种定位。
2 解析Div+CSS网页布局
网页布局,是指在制作页面的过程中,将整个页面划分为横纵几个功能模块进行布局。本文通过一个具体的实例解析使用Div+CSS布局网页的主要技术步骤。
2.1 分析构架
图1是一个运动用品网站的主页,通过对主页架构的分析,笔者将页面中的各元素按其功能的不同划分成以下模块:顶部部分(header),包括了logo、menu和banner图片区;内容部分(pagebody),包括了左右边栏、主体内容;底部部分,包括了作者的邮箱地址、版权信息等。页面构架与Div布局如图1。
由上可得网页Div结构如下:
以上标签名称的命名要尽量的清晰透明,让其他跟进的人员可以快速理解该标签定义的模块及含义。需要时,子标签可以继承父标签的名称作为前缀,如在main层中再详细划分时,可以命名为main_left、main_right等。
2.2 模块拆分
按照Web标准,将页面的表现与内容分离,本部分主要定义各Div的CSS样式。
此时可新建一个样式文件style.css,为了使以后的阅读代码更简单易懂,也可以添加相关注释。样式代码如下:
以上定义的CSS样式中,首先定义了
元素的边界属性值为0,取消默认的边界。然后定义了container元素的100%宽度,接着通过宽度、高度以及边界属性确定了header元素的位置。再接下来定义了header元素中的两个横向分栏,分别是banner元素和menu元素。然后同样通过宽度、高度以及边界属性确定了主体元素pagebody的位置,并使用浮动定位属性,分别定义了左右两个纵向分栏sidebar和main元素的位置。最后再次使用定义宽度、高度以及边界属性定义了footer元素的大小和显示位置。
2.3 Div标签布局
本部分主要完成页面的布局和内容的填充。新建首页页面index.htm,按照上面所说页面构架插入Div标签,部分XHTML文档如下:
最后,将上面所建的样式文件附加到首页中即可,代码如下:
按照上述的方法,每一个模块又可以继续细分成小的模块,细分到可以表现每个不同功能的页面元素,本文就不再详细介绍内容的填充过程了。
这种布局方法的优点在于:每个元素之间按照文档流和属性值显示,具有很好的扩展性。其缺点在于:由于每个元素之间相互影响,更改某个元素的相关属性时,可能会影响其他元素的显示。
2.4 总体调整
本部分是对已完成页面做最后的调整,包括色彩、内容及CSS样式部分。
2.5 Div+CSS布局时的常用技巧
1)使用margin进行页面元素水平居中的设置。margin为边界属性,包含上、下、左、右四个边界距离的设置,当想要设置居中时,只要将左右边界设置为自动即可,如:
margin:0 auto;/*0表示上下边界为0,auto表示左右边界为自动*/
2)使用line-height进行页面元素垂直居中的设置。line-height为行高属性,当行高与元素本身高相同时,行内元素是垂直居中的。如:#menu{line-height:50px;height:50px;}/*行高和标签高同为50px*/。但是这种居中的方式在表单的文本框中是没有效果的,还有一个办法就是定义上下补白,即padding属性值就可以实现想要的效果了。
3)使用clear清除左右浮动。例如定义有两个Div布局如下:
浏览显示的结果是两个层水平并排显示,如果想让这两个层垂直排列,则可以在后一个层内添加{clear:left}。又如在Div定位使用浮动的时候,常发生下面的层被浮动的层所覆盖,或者层里嵌套的子层超出了外层的范围的情况,此时解决的办法是在样式表中加入这句代码:clearfloat{clear:both;height:0;font-size:1px;line-height:0px;},然后在页面中需要清除浮动的地方加入:
即可。
4)辅助图片一律用背景处理。这是一种与传统的Table布局不一样的思维方式,样式代码如下:background:url(images/bg.jpg#ffccbb no-repeat right bottom;虽然也可以直接插在内容里,但是我们一般不这么做。这里说的辅助图片是指那些不足做为页面要表达的内容的一部分,只是仅仅用于修饰、间隔或者提醒的图片。
3 解析Div+CSS布局的优缺点
3.1 Div+CSS布局的优势
随着当前大部分网站均采用Div+CSS进行网页的排版和布局,Div+CSS已经成为一种网页设计的标准和趋势,其独立、轻巧、易维护的特性展露无遗,具体分析如下:
1)网页的表现与内容分离。Div+CSS将样式设计部分剥离出来放在一个独立的样式文件中,html文件中只存放实质的内容,这样的页面代码量小,读取速度快,能提高页面浏览速度。对于同一个页面视觉效果,采用Div+CSS重构的页面大小要比table编码的页面文件小得多,前者一般只有后者的1/2大小,这样浏览器就不用去解析大量冗长的标签,同时对搜索引擎更加友好。
2)更加简洁轻巧的网页效果。CSS的设计更加灵活,对于图片,文字,方块等有无限多变的设计方案,可以实现多种不同的视觉效果。
3)易于维护和改版。由于多个页面可以享用一个CSS文件,这样只需简单的修改CSS文件就可以重新布局整个网站的页面。大大的提高了网站维护和改版的效率,降低了网站改版的成本。
4)易于保持视觉的一致和网站风格的一致。表格的嵌套会使页面和页面之间,区域和区域之间的显示效果有偏差,层的应用在不同的分辨率下也会有不用的视觉效果,而Div+CSS避免了这样的问题,只要遵循了相同的WEB标准,显示效果的毫无偏差的。
3.2 Div+CSS布局的劣势
虽然这种布局方法存在很多优势,但是,与Table布局的上手简单,所见即所得的特性相比,也存在着代码编写量大、依赖性强、所见非所得等缺点,具体分析如下:
1)网页设计比较复杂。Div不能像Table那样直接使用属性设计,从区域的大小、定位、背景、边框到设计元素的定位、表现形式都必须一一编写CSS代码,对与初学者来说很难上手。这在一定程度上影响了XHTML网站设计语言的普及。
2)对CSS文件的依赖。一旦在文件调用或者读取的过程中,CSS文件出现异常,就会影响到这个网站的正常浏览。整个网站将变的惨不忍睹。
3)浏览器的兼容性。不同的浏览器可以会有不用的WEB标准。使用Div+CSS设计的网站能IE浏览器中正常显示并不保证在其他,比如火狐浏览器(Fir Fox)中也能正常显示。还有待于浏览器的进一步支持。
4 结束语
综上所述,使用Div+CSS布局网页能够取代Table成为当今网站的主流是技术发展的必然趋势,对于我们这些高等职业技术院校来说,更是教学改革的必然,我们必须适当的调整教学思路,在部分保留Table布局的前提下,让网页设计课程焕然一新,不仅要让学生掌握Div+CSS的网页布局方法,更重要的是以此为契机,引导学生主动接触代码,培养和保持学生代码编写的兴趣。
摘要：Div+CSS布局网页的方法越来越多的被用于网页设计中,该文通过一个具体实例解析了Div+CSS布局方法的技术步骤,总结了在布局过程中的常用技巧并结合Table布局揭示了Div+CSS布局的优缺点,从而提出了网页设计课程的教改思想。
关键词：Div,Css,网页布局,网页构架
参考文献
[1]威克·史密斯.写给大家看的CSS书[M].李松峰.译.北京:人民邮电出版社,2009.
[2]林婷婷.以Div+CSS思想引导学生学习编写网页的新教法[J].科技信息,2009(11).
CSS布局 篇8
DIV+CSS一种网页的布局方法,这种方法有别于传统的HTML网页设计语言中的表格(table)布局方式,这种方式可实现网页页面内容与表现相分离。XHTML是The Extensible HyperText Markup Language(可扩展超文本标识语言)的缩写。XHTML基于可扩展标记语言(XML),是一种在HTML基础上优化和改进的的新语言,目的是基于XML应用与强大的数据转换能力,适应未来网络应用更多的需求。在XHTML网站设计标准中,不再使用表格定位技术,而是采用DIV+CSS的方式实现各种定位。所以熟练掌握DIV+CSS定位方式是现代网页布局设计必不可缺的技能。CSS有四种定位方式,这四种方式之间又可以组合从而呈现更多样的网页布局。为了理清这些CSS的定位方法,并且能够实际应用这些定位方法,文章对CSS的定位方式和定位机制进行了一些较为全面的分析。
2 框模型
框模型是DIV+CSS布局的基础概念之一,它规定元素如何显示以及(在某种程度上)如何相互交互。页面上的每个元素被看作一个矩形框,这个框由元素的内容(content)、内边距(padding)、边框(border)和外边距(margin)组成(见图1)。填充出现在内容区域的周围。如果在元素上添加背景,那么背景会应用于由内容和填充组成的区域。因此,常常使用填充在内容周围创建一个隔离带,使内容不会与背景混在一起。添加边框会在填充的区域外边加一条线。这些线可以有多种样式,比如实线、虚线或点线。在边框外边是空白边,空白边是透明的,一般使用它控制元素之间的间隔。
div、h1或p元素常常被称为块级元素。这意味着这些元素显示为一块内容。块级框从上到下一个接一个地排列,就是说块级框会默认换行,框之间的垂直距离是由框的垂直外边距计算出来。与之相反,span和strong等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。行内框在一行中水平排列,就是说行内框不自动换行除非人为添加换行或者行内框到达其父框元素的边缘才会换行。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高(height)可以增加这个框的高度。
元素框的类型可以使用display属性改变。这意味着,通过将display属性设置为block,可以让行内元素(比如元素)表现得像块级元素一样。将display属性设置为inline,可以让块级元素表现得像行框一样。还可以通过把display设置为none,让生成的元素不可见。这样的话,该框及其所有内容就不再显示,且不占用文档流中的空间。
CSS有三种基本的定位机制:文档流(普通流)、浮动和绝对定位。
通过使用position属性,可以选择4种不同类型的定位static、relative、absolute、fixed。这四种不同的定位方式同时影响了其不同的定位机制。
如图2三个DIV框默认情况下排列应该是从上至下排列,框2元素设置为相对定位后,即CSS样式如下:
4.1.1 父元素position属性为默认值(static)
此时不管父元素是在普通文档流中还是处在浮动状态(float属性不为none)下,其子元素的position属性可以是static,relative,或者是浮动元素。
此时不管父元素是在普通文档流中还是处在浮动状态下,其子元素的position属性可以是static,relative,absolute或者是浮动元素。
4.1.3 父元素position属性为或absolute或fixed
此时父元素是绝对定位,其float属性是无效的。但子元素的position属性可以是static,relative,absolute或者是浮动元素。
参考文献
[1]Andy Budd,Cameron Moll,Simon Collison.精通CSS:高级Web标准解决方案[M].陈建瓯,译.北京:人民邮电出版社,2006:27-36.
[2]张瑞,楚书来.CSS盒子模型在网页布局中的应用研究[J].计算机光盘软件与应用,2012(6):133-134.
CSS布局 篇9
随着我国各行各业的不断发展, 小公司也好, 大公司也好, 小作坊也好, 大工厂也好, 要能在这竞争如此激烈的市场中占有一席之地, 做广告宣传是必须的, 其中一种重要的"省钱省力"的广告形式当属"网络", 即通过自己的网站宣传自己。那么制作网站一般用什么布局, 这些布局技术的异同, 这些问题在我的课堂上经常有同学问到。目前来讲网站布局主要的是用CSS+DIV来实现, 但也有少数的公司或者机关单位的网站用TABLE来实现。下面, 我通过一个简单的例子-"蓝色水平导航菜单"的制作, 来分析这两种技术的异同。实例:"蓝色水平导航菜单"的制作
1.1"蓝色水平导航菜单"图如下:
1.2要求:文本颜色为白色, 文本字体大小为14px, 文本都有空超链接, 文本超链接没有下划线;整个水平导航菜单下有一个蓝色调的渐变背景图。
1.3 下面分别用TABLE和CSS+DIV实现的代码如下。
2、用TABLE实现的代码
2.1 head部分的代码如下
2.2 body部分的代码如下
2.3 从以上代码可以看出利用table布局网页的主要特点是:显示的内容和内容修饰绝大部分混在body内, 即使有内嵌样式也是系统自己生成的。
3、用CSS+DIV实现的代码
3.1 head部分的代码如下
3.2 body部分的代码如下
3.3 从以上代码可以看出利用CSS+DIV布局网页的主要特点是:显示的内容和内容修饰分别在style标签和body标签内, 这样就使得网页要显示的内容和内容修饰代码分开了。
4、使用CSS+DIV进行网页布局相对与传统的TABLE网页布局而言具有以下四个显著优势
4.1 表现和内容相分离
将表现部分剥离出来放在一个独立CSS样式文件中或者作为内嵌样式, HTML文件中的BODY部分只存放网页要显示的信息。这点是CSS+DIV技术出现的根本所在。传统的TABLE原意是用来显示一些数字数据, 比如说涉及的财务报表等等, 而不是用于页面布局的, 只是因为当做一些简单的页面利用TABLE布局很简单, 实现起来方便, 所以在没有CSS+DIV技术前, 大家都用TABLE来做页面布局。但对于页面复杂到一定的程度时, TABLE布局的短板就暴露出来了, 于是就出现了CSS+DIV技术。
4.2 提高搜索引擎对网页的索引效率
用只包含结构化内容的HTML代替嵌套的标签, 搜索引擎将更有效地搜索到你的网页内容, 并可能给你一个较高的评价。
4.3 提高页面浏览速度
对于同一个页面视觉效果, 采用CSS+DIV重构的页面容量要比TABLE编码的页面文件容量小得多, 前者一般只有后者的1/2大小。
4.4 易于维护和改版
你只要简单的修改几个CSS文件就可以重新设计整个网站的页面。这点怎么说呢, 先说维护, 我们都知道TABLE布局是表现和内容混在一块, 都在BODY里面, 假如说你要改变所以<td>的宽, 这时需要一个一个来改, 容易出错;如果你用CSS+DIV布局的话, 我只要先定义一个td样式---td{width:88px;}就好了, 需要改的时候非常方便, 只要改一个td样式表中的宽度值就好了, 出错的概率小, 即使出错了也容易查出来, 容易修改。再说改版, 使用TABLE布局, 当要对一个网站改版时, 那就需要对每个HTML文件做修改了;而用CSS+DIV布局, 我只需要修改外部样式表 (假如你的网站样式用的只是外部样式表, 而没有用内嵌、行内样式) 就可以实现, 而不需要修改HTML文件。
5、结束语
通过一个简单的实例可以看出, 采用CSS+DIV对网站布局可以大大提升网站用户与搜索引擎的友好度。DIV+CSS布局比Table布局节省页面代码, 代码结构也更清晰明了。
DIV+CSS开发速度要比Table快, 而且布局更精确;并且利用DIV+CSS布局, 使网站版面布局修改变的更简单。
DIV+CSS布局能够适应未来多种客户端需求。
DIV+CSS布局节约站点所占空间和站点流量。这些都是DIV的好处。
总之, 利用CSS+DIV布局页面比用TABLE布局页面的优势好处多多, 所有的优势都回答了目前为什么绝大多数网站建设中页面的布局利用CSS+DIV的原因所在。
参考文献
[1]曾顺精通CSS+DIV网页样式与布局[M]人民邮电出版社, 2007.