网页布局代码.ppt

任务思路 任务一、一行三列布局布局。 要求 : 根据设计稿完成网页布局，要设计三个层。 一、思路 此网页为三行一列结构，先设计 HTML 部分，再根据各层次高度设计样式。 二、 HTML 部分 div id=main div id=top /div div id=middle /div div id=bottom /div /div 三、 CSS 部分代码 #main{ margin:10px auto; width:960px; } #top{ height:560px; background:#0290D8; } #middle{ height:57px; background:#9ECBEA; } #bottom{ height:20px; background:#5EC8FF; } 任务二、 三行两列布局 。 要求 : 根据设计稿完成网页布局，需设计五个层 。 一、思路 此网页为三行二列结构， top 层中有 banner 和 links 两层， middle 层中有左 右两层。 二、 HTML 部分 div id=main div id=top div id=banner/div div id=links/div /div div id=middle div id=leftbar /div div id=rightbar /div /div div id=bottom /div /div 三、 CSS 部分代码 #main{ margin:0px auto; width:990px; } #top{ } #banner{ height:120px; background:#F85380; } #links{ height:100px; background:#F5F5F5; } #middle{ background:#9ECBEA; } #leftbar{ height:600px; width:770px; float:left; background:#F85380; } #rightbar{ height:600px; width:190px; float:right; background:#B20000; } #bottom{ height:110px; clear:both; background:#EAEAEA; } 任务三、三行三列布局。 要求：根据设计稿完成网页布局，需设计 9 个层。 一、思路 此网页为三行三列结构，顶部有 banner,links 和 others 三个层，中部有 left,center,right 三个层，底端有 guide,list 和 address 三个层。 二、 HTML 部分 div id=main div id=top div id=banner/div div id=links/div div id=others/div /div div id=middle div id=leftbar/div div id=centerbar/div di