网页布局代码 ppt

1任务一、一行三列布局布局。要求:根据设计稿完成网页布局，要设计三个层。2一、思路

此网页为三行一列结构，先设计HTML部分，再根据各层次高度设计样式。3二、HTML部分<divid="main"> <divid="top"> </div> <divid="middle"> </div> <divid="bottom"> </div> </div>4三、CSS部分代码#main{ margin:10pxauto;width:960px; }5

#top{ height:560px; background:#0290D8; } #middle{ height:57px; background:#9ECBEA; }

6#bottom{ height:20px; background:#5EC8FF; }7任务二、三行两列布局。要求:根据设计稿完成网页布局，需设计五个层。8一、思路

此网页为三行二列结构，top层中有banner和links两层，middle层中有左右两层。9二、HTML部分<divid="main"> <divid="top"> <divid="banner"></div> <divid="links"></div> </div> <divid="middle"> <divid="leftbar"></div> <divid="rightbar"></div> </div> <divid="bottom"> </div></div>10三、CSS部分代码#main{ margin:0pxauto;width:990px; }11

#top{ } #banner{ height:120px; background:#F85380; } #links{ height:100px; background:#F5F5F5; }

12

#middle{ background:#9ECBEA;} #leftbar{ height:600px; width:770px; float:left; background:#F85380; } #rightbar{ height:600px; width:190px; float:right; background:#B20000; }13

#bottom{height:110px; clear:both; background:#EAEAEA; }14任务三、三行三列布局。要求：根据设计稿完成网页布局，需设计9个层。15一、思路

此网页为三行三列结构，顶部有banner,links和others三个层，中部有left,center,right三个层，底端有guide,list和address三个层。16二、HTML部分<divid="main"> <divid="top"> <divid="banner"></div> <divid="links"></div> <divid="others"></div> </div><divid="middle"> <divid="leftbar"></div> <divid="centerbar"></div> <divid="rightbar"></div> </div>17

<divid="bottom"> <divid="guide"> </div> <divid="list"> </div> <divid="address"> </div></div> </div>18三、CSS部分代码

#main{ margin:0pxauto;width:990px; }19#top{} #banner{ height:100px; background:#1B94E5; } #links{ height:90px; background:#97E8F9; } #others{ height:80px; background:#FF9D1C; }20

#middle{background:#9ECBEA;} #leftbar{height:600px; width:230px; float:left; background:#0764FF;} #centerbar{height:600px; width:500px; margin-left:20px; float:left; background:#F85380;} #rightbar{height:600px; width:220px; float:right; background:#F96D0C;}21

#bottom{clear:both;} #address{ height:50px; background:#656565;