HTML CSS DIV网页设计与布局（第3版）（微课版） 课件 第13章 网页布局与设计技巧.pptx

第13章网页布局与设计技巧13.1网页布局 13.2CSS布局技巧 13.3CSS盒子模型 13.4小结

13.1网页布局13.1.1网页大小 13.1.2网页栏目划分 13.1.3表格布局 13.1.4CSS布局

13.1.1网页大小1．影响网页大小的因素2．如何设计网页大小3．其他设计网页大小的方法

13.1.2网页栏目划分1．页头2．Banner3．导航区域4．内容5．页脚

13.1.3表格布局【示例13-1】根据图13.2所示的栏目划分方式，将网页不同的部分组成一个完整的网页。1 !DOCTYPEhtml2 htmlxmlns=/1999/xhtml3 head4 metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/5 title表格布局/title6 /head7 body8 tablewidth=100%9 tr10 tdcolspan=2imgsrc=img/banner.gifalt=banner//td11 /tr12 tr13 tdimgsrc=img/1-1.gifalt=什么是博客//td14 tdimgsrc=img/1-2.gifalt=分享由此开始//td15 /tr16 tr17 tdrowspan=2imgsrc=img/2-1.gifalt=每日推荐//td18 tdimgsrc=img/2-2.gifalt=搜索//td19 /tr

20 tr21 tdimgsrc=img/2-3.gifalt=博客秀//td22 /tr23 tr24 tdimgsrc=img/3-1.gifalt=名博推荐//td25 tdimgsrc=img/3-2.gifalt=最近更新//td26 /tr27 tr28 tdcolspan=2align=center29 fontcolor=#AEAEAEsize=230 公司简介-联系方法-招聘信息-客户服务-相关法律-用户反馈br/31 ××公司版权所有1997—200732 /font33 /td34 /tr35 /table36 /body37 /html

图13.2中的“最近更新”栏目可以再用一个嵌套的表格细分，如图13.3所示。然后将细分的栏目插入所在单元格中，形成多个表格的嵌套，如图13.4所示。

13.1.4CSS布局【示例13-2】根据图13.5所示的CSS布局划分方式，使用CSS创建网页。1 !DOCTYPEhtml2 htmlxmlns=/1999/xhtml3 head4 metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/5 titleCSS布局/title6 styletype=text/css7 #root{width:992px;}8 #Blog{float:left;width:595px;}9 #Suggest{float:left;width:595px;}10 #GoodBlog{float:left;width:595px;}11 #Foot{font-size:9pt;color:#AEAEAE;text-align:center;clear:left}12 /style13 /head14 body15 divid=root16 divid=Head17 imgsrc=img/banner.gifalt=banner/18 /div19 divid=Blog

20 imgsrc=img/1-1.gifalt=什么是博客/21 /div22 divid=Sharing23 imgsrc=img/1-2.gifalt=分享由此开始/24 /div25 divid=Suggest26 imgsrc=img/2-1.gifalt=每日推荐/27 /div28 divid=Searc