网页课程设计报告

1、武汉软件工程职业学院课程设计报告2018-2019学年度第 一 学期题目：在线购物姓名：张德帅班级： 网络1707系部：计算机学院指导教师：日期:1、网站设计1.1确定主题网上在线购物产品分类网站首页品牌馆名表产品展示I女包饰品账号登陆1.3布局分析布局风格Div 与 Css上中下的架构 页面总体框架图T«Hlwigi <o»OK 青，TIB 3用 2 直食 名士 比。曲戟Utffl« M¥(tfwr6三兑K£=JL究=5日百餐霍生=0=S,毫厘目北口3气班牙目即3畀mat 明算可号牌MI *炉啧l，短蛀日物一的&浒端由 D+K

2、5H甫懂照阳彼马/id360。全方位感光缔造钻石美肌蟒兰的uerlain),拈克就讲好茶好的方悦犍yi II/Fli>O ihHMVWf旧* 克 IH frtOEJXSKJN?VICHY塔 | ANCUMb Qiftr AUPRES LANElGEi*，*, > r« ?niBjgirrif=-z5S *时U幽寸哥=牛皮包2： I. I 1.tf- PK tr vunai | 褊牌露 X NII A.f fLl“里L：(r斑u号X31Al陷男包一网页结构代码<div id="toubu"><div id="nav"

3、><p class="p""：好，欢迎来到优尚购物 <a href="index.html"> 登录</a>/<a href="index.html"> 注 册 </a><span id="daohang"><a href="index.html"> 我 的账户 </a>|<a href="index.html"> 订单查询 </a>|<a

4、href="index.html"> 我的优 惠券</a>|<a href="index.html"> 积分换购 </a>|<a href="#"> 购物交流 </a>|<a href="index.html”>帮助中心 </a></span></p></div><div id="logo"><div class="logo_left">

5、<img src="images/logo.gif"/></div><div class="logo_center"><form name="form1" method="get" action=""><div class="img1"></div><input class="input_text" type="text" value="请输入产品名

6、称或订单编号"border="0"><divclass="search_btn"><ahref="#"><imgsrc="images/search-btn.jpg"/></a></div></form><div class="hottext"><a href="index.html"> 热门搜索：</a><a href="index.h

7、tml"> 新品 </a><a href="index.html"> 限时特价 </a><a href="index.html"> 防晒隔离 </a><a href="index.html"> 超值换购 </a></div></div><div id="logo_right"><img src="images/telephone.jpg"/><

8、/div></div><div id="menu"><div class="shopingcar"><a href="#">购物车中有 0 件商品 </a></div><div class="menu_box"><ul class="meun_box ul"><li><a href="index.html"><img src="imag

9、es/menu1.jpg" border="0"/></a></li><li><a href="index.html"><img src="images/menu2.jpg" border="0"/></a></li><li><a href="index.html"><img src="images/menu3.jpg" border="

10、0"/></a></li><li><a href="index.html"><img src="images/menu4.jpg" border="0"/></a></li><li><a href="index.html"><img src="images/menu5.jpg" border="0"/></a></li>

11、;<li><a href="index.html"><img src="images/menu6.jpg" border="0"/></a></li><ol><ahref="index.html"><imgsrc="images/menu7.jpg"border="0"/></a></ol><ol><ahref="index.ht

12、ml"><imgsrc="images/menu8.jpg”border="0"/></a></ol><ol><ahref="index.html"><imgsrc="images/menu9.jpg”border="0"/></a></ol><ol><ahref="index.html"><imgsrc="images/menu10.jpgbo

13、rder="0"/></a></ol></ul></div></div></div><div id="Banner"><div class="banner_pic"><img src="images/banner.jpg"/></div><div class="banner_right_top"><img src="images/event_b

14、anner.jpg"/></div><div class="banner_right_down"><div class="moving_title"><img src="images/news_title.jpg"></div><ul><li class="li"><a href="index.html">国庆大促5宗罪，纯牛皮钱包免费换！ </a></li>&

15、lt;li class="li"><a href="index.html">身体护理系列满199加1元换购飘柔！ </a></li><li class="li"><a href="index.html">YOUSOO 九月新起点,价值 99 免费送! </a></li><li class="li"><a href="index.html">喜迎国庆，妆品百元红包大

16、派送！</a></li></ul></div></div><div class="clean"></div><div id="content2"><div class="con2_title”><b><a href="index.html"><img src="images/ico_jt.jpg"/></a></b><span>

17、<a href="index.html"> 新品速递 </a>|<a href="#"> 畅销排行 </a>|<a href="#"> 特价抢购</a>|<a卜伯£="#">男士护肤</a></span><img src="images/con2_title.jpg"></div><div class="linel"><

18、;/div><div class="con2_content"><a href="index.html"><img src="images/con2_content.jpg"/></a></div><div class="scroll_brand"><a href="index.html"><img src="images/scroll_brand.jpg"></a&g

19、t;</div><div class="gray_line"></div></div><div id="content4”><div class="con2_title"><b><a href="index.html"><img src="images/ico_jt.jpg"/></a></b><span><a href="index.html”&

20、gt; 新品速递 </a>|<a href="#"> 畅销排行 </a>|<a href="#"> 特价抢购</a>|<a卜伯£="#">男士护肤</a></span><img src="images/con4_title.jpg”></div><div class="line"></div><div class="con2_conten

21、t”><img src="images/con4_content.jpg"/></div></div><div class="gray_line"></div><div id="copyright"><img src="images/copyright.jpg" /></div><div id="ClassID"><p> 网络 1707班 11 号张德帅 </p&g

22、t;</div></div>年式表*margin: 0;padding: 0; bodyfont-family:幼圆 #toubumargin:auto;width: 980px;height: 155px;position: relative;margin:0 auto;.pfont-size: 14px; line-height:20px; padding-top: 5px; atext-decoration: none; a:visited text-decoration: none; color:#666a:hover text-decoration: unde

23、rline; color:#FF0.licolor: #333;#nav .pcolor: #000;input:hover color:#333;border: 0px solid #000;#daohangfloat:right;#logoposition:relative;.logo_leftwidth:277px;height:70px;.logo_centerwidth: 400px;height: 61px;position: absolute;left: 300px;top: 16px;formwidth:400px;.input_textwidth: 313px;height:

24、 26px;color:#707070;border:0 solid #FFF;background-color: transparent;position: absolute;left: 26px;top:1px;font-size:15px;.img1width:339px;height:29px;background-image:url(images/search.jpg);.search_btnwidth: 61px;height: 29px;position: absolute;top: 0px;left: 339px;#logo_rightposition:absolute;top

25、:0px;right:2px;width:228px;height:70px;.hottext amargin-right: 10px;font-size: 14px;color:#707070;text-decoration: none;line-height:20px;#menumargin:10px auto;width:980px;height:41px;.shopingcarfloat: left;width: 170px;height: 35px;background-image: url(images/shopingcar.jpg);background-repeat:no-re

26、peat;padding:7px 0 0 42px;color:#FFF;font-size:14px;.shopingcar acolor: #FFF;text-decoration: none;.meun_boxmargin-left:60px;float:left;.meun_box lifloat:left;width:54px;margin-top:18px;text-align:center;background-image:url(images/menu_fgx.jpg);background-position:right center;background-repeat:no-

27、repeat;list-style-type:none;.meun_box olfloat:left;width:55px;margin-top:18px;text-align:center;background-repeat:no-repeat;list-style-type:none;#Bannerwidth:980px;height:360px;margin:10px auto;.banner_picfloat:left;width:725px;height:345px;.banner_right_topfloat:left;margin-top:10px; margin-left:7p

28、x; width:246px;height:208px;.banner_right_down font-size: 12px; float:left;width:247px;margin-left:7px; margin-top:10px; .moving_title width:77px; height:24px;margin-bottom:10px;.banner_right_down li margin-left:24px; list-style-type:none; line-height: 24px;#content2width:980px;height:545px;margin:1

29、8px auto; overflow:hidden; margin:22px auto; .con2_titlewidth:973px;height:22px; padding-left:5px; line-height:22px;.con2_title span float:right;font-size:12px;.con2_title acolor:#333;font-size:12px;margin-left:3px; margin-right:3px; .con2_title b img margin-top:3px; float:right;.con2_title imgmargi

30、n-top:3px;.linelwidth: 980px;margin:5px auto;height: 1px;border-top:#000 solid 0px;border-bottom:#000 solid 1px;border-left:#000 solid 0px;border-right:#000 solid 0px;.con2_contentmargin-top:15px;#content4width:980px;height:250px;margin:22px auto;overflow:hidden;#copyrightmargin:22px auto;width:980p

31、x;height:110px;margin-bottom:0px;position:relative;#ClassIDfont-family:" 幼圆 "font-size:16px;color:#333;width:200px;text-align:center;position:relative;top:-45px;left:0;margin:0 auto;2、制作实现1 .购物车部分首先插入一个层来放购物车，给这个Div设置一个样式宽和高, 在里面放了个背景图图片设置了一个background-repeat:no repeat 样式Q请输入产品名称或订单铜号热门搜索；

32、新品限时特价防晒隔圈超值芭<div class="shopingcar"><a href="#"> 购物车中有 0 件商品 </a></div> 样式：.shopingcarfloat: left;width: 170px;height: 35px;background-image: url(images/shopingcar.jpg);background-repeat:no-repeat;padding:7px 0 0 42px;color:#FFF;font-size:14px; 2 .导航条制作，首

33、先也是插入一个 Div层，在里面插入了十个导航图片给他 们设置成项目列表，然后添加样式，设置样式左浮动，又设置文本居中厂有忑：声品短时特价防泗扁再招。0维工刈）688 866d09100-21： 口口兔£途，若真 女装男装：化技品tfB品女包 含袅忧尚团；特袁会：副处谓：src="images/menu1.jpgsrc="images/menu2.jpg代码：<div class="menu_box”><ul class="meun_box ul"><li><ahref="index

34、.html"><imgborder="0"/></a></li><li><ahref="index.html"><imgborder="0"/></a></li><li><ahref="index.html"><imgsrc="images/menu3.jpg"border="0"/></a></li><li><aborder="0"/></a></li>href="index.html"><imgsrc="images/menu4.jpg"<li><aborder="0"/></a></li>href="index.html"><imgsrc="images/