網(wǎng)頁(yè)布局代碼 ppt

1任務(wù)一、一行三列布局布局。要求:根據(jù)設(shè)計(jì)稿完成網(wǎng)頁(yè)布局，要設(shè)計(jì)三個(gè)層。2一、思路

此網(wǎng)頁(yè)為三行一列結(jié)構(gòu)，先設(shè)計(jì)HTML部分，再根據(jù)各層次高度設(shè)計(jì)樣式。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任務(wù)二、三行兩列布局。要求:根據(jù)設(shè)計(jì)稿完成網(wǎng)頁(yè)布局，需設(shè)計(jì)五個(gè)層。8一、思路

此網(wǎng)頁(yè)為三行二列結(jié)構(gòu)，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任務(wù)三、三行三列布局。要求：根據(jù)設(shè)計(jì)稿完成網(wǎng)頁(yè)布局，需設(shè)計(jì)9個(gè)層。15一、思路

此網(wǎng)頁(yè)為三行三列結(jié)構(gòu)，頂部有banner,links和others三個(gè)層，中部有l(wèi)eft,center,right三個(gè)層，底端有g(shù)uide,list和address三個(gè)層。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;