第3章-网页布局精要.ppt

3.4 中间自适应宽度三栏页面布局 所以，我们可以： 在#header{}和#nav{}中增加“border-bottom:1px solid #ccc;”； 在#footer{}中增加“border-top:1px solid #ccc;”； 在#left{}中增加“border-right:1px solid #ccc;”； 在#right{}中增加“border-left:1px solid #ccc;”。 3.5 固定宽度布局 本节重点介绍如何使用CSS+DIV创建固定宽度布局，对于包含很多大图片和其他元素的内容，由于它们在流式布局中不能很好地表现，因此固定宽度布局是处理这种内容的最好方法 。 1. 一列固定宽度 一列布局是所有布局的基础，也是最简单的布局形式。一列固定宽度是常见的网页布局方式，多用于封面型的主页设计中，标题正文型也属于这种。 3.5 固定宽度布局 2. 两列固定宽度 两列固定宽度非常简单，可参考前面“DIV+CSS布局设计方法”小节中的例子，这种布局也很常见，比如个人博客多采用这种布局形式。 3.5 固定宽度布局 3. 三列固定宽度居中 三列固定宽度居中，可以采用将所有区块放入一个大的容器container中的方式，只需要设置container左右边距为自动就可以实现居中了。下面介绍以“中间自适应宽度三栏页面布局”小节示例为基础修改成“三列固定宽度居中”的方法。 3.5 固定宽度布局 首先添加container容器，将content区块恢复到left和right区块之间，示例HTML代码如下。 div id=container div id=header头部区块/div div id=nav水平导航区块/div div id=left左边固定宽度栏/div div id=“content”中间固定宽度栏/div div id=right右边固定宽度栏/div div id=footer页脚版权区块/div /div 3.5 固定宽度布局 然后，在样式表中为content添加float和width属性，添加container的margin属性为左右自动（即容器水平居中显示）。最后为footer添加clear属性以清除footer的float属性，示例CSS代码如下。 #container {width：800px;margin：0px auto; border-left：1px solid #ccc;border-right：1px solid #ccc；} #content {width:390px；float：left；height：400px;} #footer { clear：both；border-top：1px solid #ccc；border-bottom：1px solid #ccc；} 3.6 HTML5的文档结构元素 HTML5引入了多个新的元素用来更加细致地描述页面及文档结构，包括header、nav、section、article、aside和footer，这些元素可以让文档页面更加具有意义、更加易读，也可以让有哪些信誉好的足球投注网站引擎更好地理解页面的内容和各个部分之间的关系。 如图3-2所示非常清晰地表述了各个元素对应的文档内容关系。 3.6 HTML5的文档结构元素 需要注意的是，这些元素的布局和呈现方式并不是由其自身定义，而是由CSS来呈现，就像是呈现div元素，但div元素没有语义，而这几个元素有语义。 图3-2 HTML5 的结构元素使用 3.6 HTML5的文档结构元素 1. 文章语义（article、header、footer）元素 根据WHATWG（The Web Hypertext Application Technology Working Group）给出的定义，article元素表示在文档、页面、应用程序或网站中自我包含的部分，也就是指在页面中用来表示一套结构完整且独立的内容部分，原则上讲是独立分布和重复使用的。比如论坛的一个帖子、杂志或报纸中的一篇文章、一篇博客、用户提交的一个评论内容，以及页面上可用于互动的一个widget（微件）模块等。 3.6 HTML5的文档结构元素 article元素可以被嵌套使用，内层的内容原则上要与外层内容相关联。例如，一篇博客文章与针对该文章的评论。但与article元素相关联的作者信息却只能使用address元素来表示。 WHATWG规范将header元素简单地描述为“一组前言或导航助手”，我们曾经习惯使用的div id=”header”就可以用它来代替，但这个元素没有每页只用一次的限制，比如我们可以在每一个章节中再次使用he