。
图4.2首页效果图
4.1.2 顶部header的实现 1.整体布局如图4.3所示
图4.3顶部header整体布局
2.建立HTML的组织结构
。
9
。
顶部整体布局时分为四个div块，即logo，menu，hello，和nav。顶部的整体布局结构代码如下：
.menu {width:45%;height:28px;float:right; margin:-5px 50px 0px 0px;} .hello {float:right; margin:35px 500px 0px 0px; color:#636362;} .nav{width:800px;clear:both; margin-left:130px; padding-top:8px; } 4.首页头部效果图如图4.3所示
图4.4 首页头部效果图
4.1.3 主体main的实现 1.主体main整体布局如图4.5所示
zuo zhong you 图4.5 主体main整体布局
2.建立HTML的组织结构
顶部整体布局时分为三个div块，即zuo， zhong，和you。顶部的整体布局结构代码如下：
。 10
。
#main{width:100%; height:500px; margin-top:20px; }
#divzuo{width:200px;height:680px;float:left;background-image:url(images/bg 1.gif); background-repeat:no-repeat; margin-left:178px; }
#divzhong{width:524px; height:650px; float:left; margin:8px 0px 0px 8px;}
.shang{height:203px;background-image:url(images/ad-01.jpg); background-repeat:no-repeat;}
#xia{background-image:url(images/bg 1.gif);background-repeat:no-repeat;background-position:-213px -200px; width:524px; height:450px; margin-top:-10px;} #divyou{width:240px;height:680px;float:left;background-image:url(images/bg 1.gif);background-repeat:no-repeat;background-position:-740px 0px; margin-left:8px;} 4.首页主体效果图如图4.6所示
图4.6 首页主体效果图
。 11
。
4.1.4 底部footer的实现 1.整体布局只有一个div块 2.建立HTML的组织结构
height:150px;
text-align:center;line-height:20px;
图4.7 首页底部效果图
4.2 登陆页
4.1.1登陆布局的实现
登陆页和主页为同一网站的不同页面，整体布局一样，故略。 4.1.2登陆页主体布局的实现 1.登陆页整体布局如图4.8所示
zuo you 图4.8 登陆页整体布局
。 12