网页样式制作（拓展）第9章页面排版制作固定宽度且居中网页.docxVIP

制作固定宽度且居中网页 任务描述 此任务运用CSS布局制作固定页面宽度为780px并且居中的网页，通过此任务使读者掌握宽度固定且居中的版式。制作页面如图7-3所示： 图7-3任务7效果图 制作思路 用container层作为所有层的最外层，并且居中，right层采用绝对定位apDIV，banner层、left层、footer层为普通div元素，按顺序排列。布局如图7-4所示，居中的基本代码如下： body{ text-align:center; margin：0； }#container{ position:relative;/*层内有绝对定位必须加上*/ text-align:left; width:780px;  margin:0 auto;/* ie8必须加上*/} #container #container #banner #left #right #footer 图7-4任务七布局 制作步骤 (1) 新建网页rw7.html,设置title,保存文件； (2)建立网页的基本DIV结构:使用DIV进行布局，整个网页用#container来定义层，里面包括：#banner、#left、#right、#footer。 为了设计方便，各层用不同的背景色进行区别，最后优化时再进行修改。 body div id=container div id=bannerbanner/div div id=leftleft/div div id=right正文/div div id=footerfooter/div /div /body (3) 设置body的样式：页面顶端不留空隙、居中。 body{ text-align:center; margin:0; } (4) 设置container样式，margin:0 auto;使页面主体固定宽度为780px,且恢复左对齐，并设置背景色；设置定位方式为相对定位position:relative; #container{ background-color:#d2e7ff; text-align:left; width:800px; margin:0 auto; position:relative; } (5) 在#banner用图片做背景，层的高度与图片高度相同 #banner{ background-image:url(banner1.jpg); background-repeat:no-repeat; height:190px; } (6) 设置#left和#right的宽度，让#right同时向左浮动，实现并排。#left宽度为150px，#right正文部分650px。#left和#right预设统一的高度为300px。 #left { background-color: #669; height: 400px; width: 200px; } #right{ background-color: #CCC; height: 400px; width: 580px; font-size: 14px; line-height: 24px; color: #069; letter-spacing: 3px; text-indent: 28; position:absolute; left:200px; top:141px; (7) 设置footer样式，完成布置总体布局； (8) 保存文件，完成本任务。