库花网电商1202gjx.docVIP

课程设计 课程名称： 电子商务网站规划分析 设计名称： 库花网网页设计 实验地点： 公共机房04（D106） 专业班级：电子商务1202班 学号：2012004368 学生姓名： 高建鑫 指导教师： 王天日 2015年 4月 27日 首先，我把网页分成七部分，每一部分都是用css样式做成的，每次都采用class选择器以及外部样式做成。当然，为了区分标签，我还采用了ID选择器来标注特别标签。接下来我来分析每一部分的原理以及代码。 第一部分：我采用a/a标签进行超链接，而且用hover来对其字体背景进行变化，下面看下原图： 这个部分比较简单,采用ul/ul标签，然后float：left；便可以把竖着的变成横排的。然后用hover实现颜色变化。代码如下： div class=div1 ul li class=div11a href=#公司首页/a/li lia href=#关于我们/a/li lia href=#产品介绍/a/li lia href=#售后服务/a/li lia href=#联系我们/a/li /ul /div 以及：.div .div1{ width:100%; height:30px; } .div .div1 li{list-style:none; float:left; margin-left:20px; margin-top:4px; font-size:20px;} div .div1 .div11{margin-left:-30px;} .div .div1 a:link{text-decoration:none;} .div .div1 a:hover{background-color:#930;} 第二部分：我采用div/div标签以及img/标签完成的；下面是原图和代码： 代码： div class=div2img src=image/show.jpg align=middle//div .div .div2{border:#999 3px solid; width:955px; height:300px;} 第三部分：这一部分跟第一部分一样，都是采用div/div和ul/ul标签，使用float使其由竖着排列变成横着排列，原图如下： 代码: div class=div3div id=div30div class=div31ul class=div311 li商品分类/li /ulhr/ul class=div312 li鲜花分类/li /ul div class=div99 ul li class=div313按花材/li li白玫瑰/li li水仙/li li红玫瑰/li li白玫瑰/li li水仙/li li红玫瑰/li li白玫瑰/li li水仙/li li红玫瑰/li li白玫瑰/li li水仙/li /ul/div/divdiv id=div301div class=div3011服务热线/divdiv class=div3012ulli class=divg24小时订购热线/li li class=div0img src=image/call.jpg/029-123456789/li liimg src=image/sina.jpg/鲜花/li/ul/divhr/ div class=div3013网站必威体育精装版信息/divdiv class=div3014ul li class=divhimg src=image/point.jpg/的风格和发帖工具和一个愉/liliimg src=image/point.jpg/的