网页布局代码-ppt.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; } 一、思路 此网页为三行三列结构，顶部有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 div id=rightbar/div /div div id=bottom div id=guide /div div id=list /div div id=address /div /div /div 三、CSS部分代码 #main{ margin:0px auto; width:990px; } #top{} #banner{ height:100px; background:#1B94E5; } #links{ height:90px; background:#97E8F9; } #others{