版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
第4章页面布局
内容提要4.4实用技巧和代码规范4.3页面布局4.2盒子模型和DIV4.1概述4.5CSShack实现网页的页面布局一般有三种方法：表格布局、框架布局以及DIV+CSS页面布局。4.1概述表格布局的实现方式比较简单。各个元素可以位于独立的单元格中，相互影响较小，而且对于浏览器的兼容性较好。表格布局也存在一些缺陷。首先，在某些浏览器下（例如IE），表格只有在全部下载完成后才可以显示。数据量比较大时会影响网页的浏览速度。其次，搜索引擎难以分析较复杂的表格，而且网页样式的改版也比较麻烦。另外，在多重表格嵌套的情况下，代码可读性较差，页面下载的速度也会受到影响。目前，除了规模较小的网站之外，一般不采用表格布局。框架布局指的是利用框架来对页面空间进行有效的划分，每个区域可以显示不同的网页内容，各个区域之间互不影响。使用框架进行布局，可以使网页更整洁、清晰，网页下载的速度较快。但是如果框架使用较多，也会影响网页的浏览速度。对于内容较多，较复杂的网站最好不要采用框架布局。另外，框架和浏览器的兼容性不好，保存比较麻烦，应用的范围有限，一般也只应用于较小规模的网站。对于规模较大的、比较复杂的网站大多数采用DIV+CSS方式来进行布局。DIV+CSS布局方式具有较为明显的优势，主要表现在以下几点。1．内容和表现相分离。2．对搜索引擎的支持更加友好。3．文件代码更加精简，执行速度更快。4．易于维护。但是DIV+CSS页面布局也存在一定的缺陷：1．DIV+CSS方式实现起来比较复杂，初学者不易掌握。2．DIV+CSS方式对于元素的控制太灵活，容易出错。3．DIV+CSS方式还没有解决浏览器的完全兼容。例如在IE浏览器上可以正常显示的页面，换作其它浏览器显示可能会面目全非。4．使用DIV+CSS布局网页的开发成本较高，开发周期较长。4.2盒子模型和DIV在CSS中，页面中的所有元素都可以看成一个盒子，占据着页面上的一定的空间。一个盒子模型由content（内容）、border（边框）、padding（填充）和margin（间隔）四部分组成。一个盒子的实际宽度或高度为：content+padding+border+marginDIV全称为Division，代表网页内容中的一个逻辑区域。DIV相当于一个容器，由起始标签<div>和结束标签</div>以及其中的内容组成。在DIV内部可以嵌套各类元素。1．position属性position属性的默认取值为static，指的是不定位，div按照默认的位置显示。当position取值为relative时，指的是相对于static方式时div的位置偏移。当position取值为absolute时，指的是绝对定位，是用top,left,right,bottom等直接定位div相对于其最近的容器的位置。实际上，absolute方式本质上仍然是相对定位。当position取值为fixed时，指的是真正的绝对定位，是用top,left,right,bottom来指定div相对于浏览器的位置，即使用户使用滚动条来滚动页面，div相对于浏览器的位置仍然不变，即在界面中div的位置是不变化的。对于目前常用的浏览器来说，除了IE6之外，其它的浏览器都可以识别fixed值。2．overflow属性overflow属性可以指定div中溢出内容的显示方式。当overflow取值为visible时，溢出的内容不会被截断，而是显示在div之外。当overflow取值为hidden时，溢出的内容会被截断，而且浏览器不出现查看内容的滚动条。当overflow取值为scroll时，溢出的内容会被截断，但是浏览器会提供查看截断内容的滚动条。当overflow取值为auto时，由浏览器决定如何显示，如果必要，则显示滚动条。3．display属性display属性可以控制div的显示方式。当display取值为none时，div不可见。当display取值为inline时，div可见，而且是行内元素。div元素前后不会换行。当display取值为block时，div可见，是块级元素，div元素前后会出现换行。4．float属性float属性可以定义div的浮动方式，当float属性取值为none时，div不会发生任何浮动，块级元素会独占一行，其后的块级元素将会在新行中显示。此时的display属性相当于取值为block，display属性会被忽略。当float属性值取为left时，div会向左端浮动，其后的div的显示方式和浏览器有关。当float属性值取right时，div会向右端浮动。5．clear属性div的clear属性可用来清除div左右的浮动。clear属性的默认值为none，指的是不清除浮动，允许div的左右两边存在浮动对象。clear属性取值为left时，清除左边的浮动对象，即不允许左边出现浮动对象。clear属性取值为right时，清除右边的浮动对象，即不允许右边出现浮动对象。clear属性取值为both时，清除左右两边的浮动对象，即不允许左右两边出现浮动对象。4.3页面布局一般的网页需要包括标志、站点名称、主页面内容、站点导航、子菜单、搜索区、功能区以及页脚等部分。每一部分可以使用一个div表示。各个div组成了整个网页的结构。每一个div都可以使用CSS的定位属性使其显示在页面的合适位置。4.3.1默认布局div的默认布局为垂直排列。每个div在默认情况下是块级元素，div前后会出现换行。layout1.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>DIV的默认布局-垂直排列</title><styletype="text/css">#lay1{width:200px;height:30px;background-color:#90EE90;}#lay2{width:200px;height:30px;background-color:#FFFACD;}#lay3{width:200px;height:30px;background-color:#F08080;}</style></head><body><divid="lay1"></div><divid="lay2"></div><divid="lay3"></div></body></html>layout1.html在IE浏览器中的显示结果如图所示。4.3.2水平排列如果要div水平排列，只需要将div的float属性设置为left即可，例如layout2.html。layout2.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>DIV的水平排列</title><styletype="text/css">#lay1{width:100px;height:30px;background-color:#90EE90;
float:left;}#lay2{width:100px;height:30px;background-color:#FFFACD;
float:left;}#lay3{width:100px;height:30px;background-color:#F08080;
float:left;}</style></head><body><divid="lay1"></div><divid="lay2"></div><divid="lay3"></div></body></html>在IE浏览器中打开layout2.html，其显示结果如图所示。当浏览器窗口变小时，div会自动换行。4.3.3div的嵌套div之间可以互相嵌套，可以通过设置div的相关属性来确定各个div之间的位置，例如layout3.html，一个div中嵌套三个垂直排列的div。layout3.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>DIV的嵌套</title><styletype="text/css">#container{width:300px;height:120px;background-color:#7B68EE;padding-top:10px;padding-right:20px;padding-bottom:10px;padding-left:20px;text-align:center;margin-left:auto;margin-right:auto;}#lay1{width:200px;height:30px;background-color:#90EE90;}#lay2{width:200px;height:30px;background-color:#FFFACD;}#lay3{width:200px;height:30px;background-color:#F08080;}</style></head><body><divid="container"><divid="lay1"></div><divid="lay2"></div><divid="lay3"></div></div></body></html>在IE浏览器中打开layout3.html，其显示结果如图所示。4.3.4div浮动当div的float属性取值为left或者right时，即成为浮动对象。div用于网页布局时，一般都是嵌套的。如果外层的div没有设定大小，而内层的div又是浮动的，浮动对象的物理位置会脱离文档流，因而对其父元素或者其后的元素的布局会产生影响，甚至会出现布局混乱的现象。layout4.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>DIV的嵌套</title><styletype="text/css">#container{background-color:#7B68EE;text-align:center;margin-left:auto;margin-right:auto;padding:10px;}
#lay1{width:30%;height:50px;background-color:#90EE90;
float:left;}#lay2{width:60%;height:60px;background-color:#FFFACD;
float:right;}</style></head><body><divid="container"><divid="lay1"></div><divid="lay2"></div></div></body></html>layout4.html在IE浏览器中的显示结果如图所示。清除浮动可以消除浮动对象对其它元素的影响。一般可以采用四种方法来清除浮动，分别为使用空标签、使用overflow属性、使用after伪对象以及浮动外部元素。1．使用空标签使用空标签是最常用的清除浮动的方法，也是W3C推荐使用的方法。空标签可以采用块级元素，例如<div>、<p>以及<br/>等，在浮动元素之后添加一个空标签，并使其clear属性取值为both（或者除none之外的其它属性值）。layout4.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>使用空标签消除浮动</title><styletype="text/css">#container{background-color:#7B68EE;text-align:center;margin-left:auto;margin-right:auto;padding:10px;}#lay1{width:30%;height:50px;background-color:#90EE90;
float:left;}
#lay2{width:60%;height:60px;background-color:#FFFACD;
float:right;}</style></head><body><divid="container"><divid="lay1"></div><divid="lay2"></div><divstyle="clear:both"></div></div></body></html>layout5.html在IE浏览器中的显示结果如图所示，改变窗口的大小，外层DIV的大小可以自适应内层元素的大小变化。2．使用overflow属性可以把父级元素的overflow属性设置成hidden、auto或者scroll来清除浮动。layout6.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>使用overflow属性消除浮动</title><styletype="text/css">#container{background-color:#7B68EE;text-align:center;margin-left:auto;margin-right:auto;padding:10px;
overflow:auto;zoom:1;}
#lay1{width:30%;height:50px;background-color:#90EE90;
float:left;}#lay2{width:60%;height:60px;background-color:#FFFACD;
float:right;}</style></head><body><divid="container"><divid="lay1"></div><divid="lay2"></div></div></body></html>layout6.html在Opera浏览器中的显示结果如图所示。3．使用after伪元素:after伪元素是在CSS2规范里提出来的，IE6/IE7并不支持。它的作用是在指定该伪元素的元素内，所有的子元素最后自动生成一个伪元素，并为伪元素设定样式，设定样式时使用clear属性清除浮动。layout7.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>使用伪元素消除浮动</title><styletype="text/css">#container:after{content:'.';
clear:both;
display:block;
visibility:hidden;height:0px;}#container{background-color:#7B68EE;text-align:center;margin-left:auto;margin-right:auto;padding:10px;}
#lay1{width:30%;height:50px;background-color:#90EE90;
float:left;zoom:1;
display:block;}#lay2{width:60%;height:60px;background-color:#FFFACD;
float:right;zoom:1;
display:block;}</style></head><body><divid="container"><divid="lay1"></div><divid="lay2"></div></div></body></html>layout7.html在Opera中的显示结果如图所示。注意：使用伪元素清除浮动时，必须将要清除浮动的元素中的伪元素的高度设置成0，将visibility设置成hidden。否则生成的伪元素会比实际高度高出若干像素。另外，伪元素的content属性值是必须的，可以为空，一般设置成“.”。4．浮动外部对象当内部元素为浮动对象时，也可以将外部元素设置成浮动对象，这样外部元素可以包含浮动元素。但是使用这种方法需要将页面中浮动元素的所有外部元素全都设置成浮动对象，一直到body，在实际应用中一般不推荐使用。4.3.5混合布局通过div的嵌套可以实现混合布局。一般的混合布局的网页主要分成head、main、footer三部分，其中main部分又可以分成左右两个部分。layout8.html:<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>混合布局</title><styletype="text/css">body{font:12px;margin:0px;text-align:center;background-color:#FFF;}#container{background-color:#FFFF93;width:100%;}#header{background-color:#FFCC99;width:100%;margin:0auto;height:100px;}#pagebody{background-color:#90EE90;width:100%;margin:0auto;height:400px;}#slidebar{background-color:orange;
float:left;width:30%;height:100%;}#mainbody{background-color:#87CEFA;
float:right;width:70%;height:100%;}#footer{width:100%;margin:0auto;height:50px;background-color:yellow;}</style></head><body><divid="container"><divid="header"></div><divid="pagebody"><divid="slidebar"></div><divid="mainbody"></div></div><divstyle="clear:both"></div><divid="footer"></div></div></body></html>layout8.html在IE浏览器中的显示结果如图所示。4.4实用技巧和代码规范1.使网页整体居中要使最外层的div在页面上居中显示，可使用以下样式：#container{margin:0auto;text-align:center;}其中，margin:0auto;指的是上下边距为0，左右为自动边距，对于IE6以上的浏览器可以实现居中。text-align:center;是为了兼容IE6以下版本的浏览器。2.颜色的表示颜色可以使用英文单词，或者使用六位十六进制数表示，如果每两位的值相同，可以使用缩写，例如“#AABBCC”，可以缩写成“#ABC”。一般情况下，在同一个CSS配置中，不要同时使用全写和缩写。3.关于上下左右的属性值写法在CSS中，有一些属性是区分上下左右的，根据属性值个数的不同，对应于上左下右。例如：padding:value1;//上下左右的内边距都是value1padding:value1value2;//上下内边距是value1，左右内边距是value2padding:value1value2value3;//上内边距是value1，左右内边距是value2，下内边距是value3padding:value1value2value3value4;//上右下左分别对应于value1,value2,value3,value44．度量单位不可省略，除非为0
在CSS中，除了行高和0值不需要定义单位之外，其它情况都必须加上单位，在数值和单位之间不可以加多余的空格。5．选择符的优先级
CSS中的类选择符可以重复使用，而id选择符一般只使用一次。如果页面元素同时使用了类选择符和id选择符，而且定义的样式出现冲突时，id选择符的优先级高于类选择符。6．选择正确的DOCTYPE<!DOCTYPE>声明位于文档的最前面的位置，此标签的作用是告知浏览器使用哪种HTML或者XML规范。如果<!DOCTYPE>使用不当，可能会造成CSS失效。HTML4.01提供了三种DTD声明可供选择。7．默认值CSS中的属性一般都有默认值，例如，通常padding的默认值为0，background-color的默认值为transparent，但是在不同的浏览器下的默认值可能不同，为了避免不兼容而造成的问题，可以使用CSS设定元素的属性值：*{margin:0;padding:0;}以上代码将所有元素的margin以及padding属性设置成0。8．超级链接的样式如果超级链接的伪类在设置样式时的顺序不正确，可能会引起超级链接访问过以后，就不能再使用:hover样式和:active样式，在CSS中声明超级链接在不同的状态的样式时，应该按照:link、:visited、:hover、:acitve的顺序。9．IE的双倍边距当页面中的元素为块级元素，左浮动并且具有左外边距时，IE会出现双倍边距的错误。例如：<divstyle=“float:left;margin-left:10px;width:420px;height:150px;border:1solidred”></div>在IE浏览器上显示时会使左外边距成为20px，解决的办法是将元素转化成内联元素，即添加display属性值为inline。10．高度问题如果DIV设置了固定的高度，但是DIV里的实际内容的高度大于设置的高度，IE浏览器会自动拉伸DIV容器。Firefox不能自动拉伸DIV的高度，超出范围的内容会出现重叠的现象。为了兼容各类浏览器，可以将高度设置成自动调整，或者将overflow属性设置成hidden。4.5CSShack目前，流行的浏览器有很多种，例如IE、Firefox、Safari、Chrome等。而同一种浏览器的版本也各不相同，例如IE6、IE7、IE8等。4.5.2CSShack的分类由于各个浏览器对CSS的解析存在差异，因此可能会导致在不同的浏览器上显示的页面不相同。为了使得各个浏览器的显示页面统一起来，需要针对不同的浏览器提供不同的CSS代码，这个过程称为CSShack。在声明CSS时，CSS的大部分属性值可以继承和覆盖。CSShack可以分为三种形式，包括CSS类内部hack，选择器hack以及HTML头部引用hack。1．CSS类内部hackCSS类内部hack指的是各个浏览器可以识别的特殊符号或标识，例如，IE6可以识别“*”和“_”；IE7可以识别“*”，但不能识别“_”；而对于Firefox来说，“*”和“_”都不识别。2．选择器hack选择器hack指的是将特殊符号和CSS的选择器结合使用。例如，*html.class{}可以被IE6识别。例如：body{
background:red;/*一般浏览器背景色为红色*/*background:blue;/*IE浏览器的背景色为蓝色，覆盖了红色*/*background:green!import;/*IE7的背景色为绿色，覆盖了蓝色*/}3．HTML头部引用hackHTML头部引用指的条件注释，根据IE浏览器的版本来决定哪些CSS代码生效，因此这种方式只对IE浏览器有效。当前的IE浏览器的主要版本是IE5、IE6、IE7和IE8，而这几个版本的IE对XHTML+CSS的解释并不完全相同。
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 优生优育与生殖健康知识普及
- 教育故事的力量与应用
- 护理师资教学能力比赛
- 胸主动脉疾病病人的护理
- 企业架构业务流程设计五步法
- 【乐山】2025年四川乐山市金口河区事业单位招聘急需紧缺专业人才13人笔试历年典型考题及考点剖析附带答案详解
- 2025年广州市白云区事业单位公开招聘工作人员笔试和笔试历年典型考题及考点剖析附带答案详解
- 【来宾】2025年广西来宾市事业单位公开招聘工作人员1684人笔试历年典型考题及考点剖析附带答案详解
- 衣服班会课件教学
- 教育行业分析课件
- 2025年 中国南水北调集团新能源投资公司第一批中层及考试笔试试卷附答案
- 叙事护理学智慧树知到答案2024年中国人民解放军海军军医大学
- 大海(张雨生)原版五线谱钢琴谱正谱乐谱
- 有限空间作业实操评分标准
- 规划展览馆方案-南京军区军史馆布展总体方案
- 六年级主题班队会记录表(6个表)
- (完整版)煤矿主扇司机考试卷(含答案)
- 双柏县工业用大麻开发种植实施计划方案
- 租赁房屋交接清单
- 吊顶检验报告(共5页)
- (完整版)10KV电力线路施工组织设计方案
评论
0/150
提交评论