购物商城网站前台的设计与实现

2026/1/8 22:17:10

。

图4.2首页效果图

4.1.2 顶部header的实现 1.整体布局如图4.3所示

图4.3顶部header整体布局

2.建立HTML的组织结构

。

顶部整体布局时分为四个div块，即logo，menu，hello，和nav。顶部的整体布局结构代码如下：

3.添加css样式代码

.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

。

3.添加css样式代码

#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

购物商城网站前台的设计与实现.doc 将本文的Word文档下载到电脑

下载这篇word文档