《网页布局代码》PPT课件.ppt

,任务思路,任务一、一行三列布局布局。,要求:根据设计稿完成网页布局，要设计三个层。,一、思路,此网页为三行一列结构，先设计HTML部分，再根据各层次高度设计样式。,二、HTML部分,三、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部分,三、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部分,三、CSS部分代码,#main margin:0px auto; width:990px; ,#top #banner height:100px; background:#1B94E5; #links height:90px; background:#97E8F9; #others height:80px; background:#FF9D1C; ,#middlebackground:#9ECBEA; #leftbarheight:600px; width:230px; float:left; background:#0764FF; #centerbarheight:600px; width:500px; margin-left:20px; float:left; background:#F85380; #rightbarheight:600px; width:220px; float:right; background:#F96D0C; ,#bottomclear:both; #address height:50px; background:#656565; #list height:3