大学生网页设计（期末大作业）静态HTML网页设计 商城类网页作业制作

青旅半醒 2024-04-25 20:16 149阅读 0赞

一、网站介绍

?网页布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。

?网页程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。

?网页素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。

?网页文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

?网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

二、网页效果

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

三、代码实现

HTML部分

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>主页面</title>
  6. <link type="text/css" rel="stylesheet" href="css/index.css" />
  8. <link type="text/css" href="css/style.css" rel="stylesheet"/>
  10. <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
  11. <script type="text/javascript" src="js/jquery.event.drag-1.5.min.js"></script>
  12. <script type="text/javascript" src="js/jquery.touchSlider.js"></script>
  13. <script type="text/javascript" src="js/index.js"></script>
  14. </head>
  16. <body>
  17.     <div id="bigdiv1">
  18.         <div id="a1">
  19.             <ul>
  20.                 <li id="a3"><a href="index.html">首页</a></li>
  21.                 <li class="a1"><a href="手机卖场.html">手机卖场</a></li>
  22.                 <li class="a1"><a href="二级页面.html">电脑专场</a></li>
  23.                 <li class="a1"><a href="电视卖场.html">智能电视</a></li>
  24.                 <li class="a1"><a href="智能配件.html">智能配件</a></li>
  25.                 <li class="a1"><a href="服务.html">服务</a></li>
  27.             </ul>
  28.         </div>
  29.             <!--其余东西都在这下面写-->
  30.             <div id="b1">
  31.                 <div id="b2">
  33.                     <div class="main_visual">
  34.                         <div class="flicking_con">
  35.                             <a href="#">1</a>
  36.                             <a href="#">2</a>
  37.                             <a href="#">3</a>
  38.                             <a href="#">4</a>
  39.                             <a href="#">5</a>
  40.                         </div>
  41.                         <div class="main_image">
  42.                             <ul style="list-style-type:none;">
  43.                                 <a href="#"><li><span class="img_3"></span></li></a>
  44.                                 <a href="#"><li><span class="img_4"></span></li></a>
  45.                                 <a href="#"><li><span class="img_1"></span></li></a>
  46.                                 <a href="#"><li><span class="img_2"></span></li></a>
  47.                                 <a href="#"><li><span class="img_5"></span></li></a>
  48.                             </ul>
  49.                             <a href="javascript:;" id="btn_prev"></a>
  50.                             <a href="javascript:;" id="btn_next"></a>
  51.                         </div>
  52.                     </div>
  54.                 </div>
  55.                 <div id="b3">
  56.                     <ul>
  57.                         <li><a href="#"><img src="images/QQ图片20171121084232.png" alt="图片" /></a></li>
  58.                         <li class="b2"><a href="#"><img src="images/xmad_15111749378998_Yybvf.jpg" alt="图片" /></a></li>
  59.                         <li class="b2"><a href="#"><img src="images/xmad_15111887094058_yNXvx.jpg" alt="图片" /></a></li>
  60.                         <li class="b2"><a href="#"><img src="images/xmad_1511169106454_FejIi.jpg" alt="图片"/></a></li>
  61.                     </ul>
  62.                 </div>
  63.                 <div id="b4">
  64.                     <h3>小米实用单品</h3>
  65.                     <ul>
  66.                         <li><a href="#"><img src="images/T1MaL_BQbT1RXrhCrK.jpg" alt="图片" /></a>
  67.                             <p>小米手环</p><p class="b32">美国ADI传感器，30天超长续航</p><br /><p class="b33">69元</p></li>
  68.                         <li class="b3"><a href="#"><img src="images/T1KDAjBCAT1RXrhCrK.jpg" alt="图片" /></a>
  69.                             <p class="b31">小米路由器 mini</p><p class="b32">主流双频AC智能路由器</p><br /><p class="b33">129元</p></li>
  70.                         <li class="b3"><a href="#"><img src="images/T16eEjBKhT1RXrhCrK.jpg" alt="图片" /></a>
  71.                             <p>小米移动电源10000mAh</p><p class="b32">高密度进口电芯，仅名片大小</p><br /><p class="b33">69元起</p></li>
  72.                         <li class="b3"><a href="#"><img src="images/T1tsEgB7DT1RXrhCrK.jpg"alt="图片"/></a>
  73.                             <p class="b31">全新小米路由器</p><p class="b32">高配版路由器，企业级性能</p><br /><p class="b33">699元</p></li>
  74.                         <li class="b3"><a href="#"><img src="images/T1JnWjBCCT1RXrhCrK.jpg" alt="图片"/></a>
  75.                             <p class="b31">小米蓝牙耳机</p><p class="b32">2015德国IF大奖，高清通话音质</p><br /><p class="b33">79元</p></li>
  76.                     </ul>
  77.                 </div>
  78.                 <div id="b5">
  79.                     <h3 style="padding-top:10px;">智能配件</h3>
  80.                     <ul>
  81.                         <li class="b1"><a href="#"><img src="images/T17yC_Bmhv1RXrhCrK.jpg"  alt="图片" /></a>
  83.                         <li class="b4"><a href="#"><img src="images/T1_SDgB4KT1RXrhCrK.jpg"  alt="图片" /></a>
  84.                             <p>小米自拍杆</p><p class="b33">49元</p><br /><p class="b32">4.1万人评价</p></li>
  85.                         <li class="b4"><a href="#"><img src="images/T1bPbTBvYT1RXrhCrK.jpg"  alt="图片" /></a>
  86.                             <p>小米Note 智能唤醒翻盖保护套</p><p class="b33">49元</p><br /><p class="b32">5.6万人评价</p></li>
  87.                         <li class="b4"><a href="#"><img src="images/T1COAjB7WT1RXrhCrK.jpg"  alt="图片" /></a>
  88.                             <p>指环式防滑手机支架</p><p class="b33">12.5元</p><br /><p class="b32">366人评价</p></li>
  89.                         <li class="b4" ><a href="#"><img src="images/T1zL_vByCT1RXrhCrK.jpg"  alt="图片" /></a>
  90.                             <p>小米随身WIFI</p><p class="b33">19.9元</p><br /><p class="b32">28.1万人评价</p></li>                        
  91.                         <li class="b1" style="clear:both"><a href="#"><img src="images/T1sxWvB7Yv1RXrhCrK.jpg"  alt="图片" /></a>
  93.                         <li class="b4"><a href="#"><img src="images/T1ETWTBQhT1RXrhCrK.jpg"  alt="图片" /></a>
  94.                             <p>小米Note标准高透贴膜（2片装）</p><p class="b33">199元</p><br /><p class="b32">5.4万人评价</p></li>
  95.                         <li class="b4"><a href="#"><img src="images/T1HvCgByhv1RXrhCrK.jpg"  alt="图片" /></a>
  96.                             <p>小米Note 真皮智能翻盖手机套</p><p class="b33">99元</p><br /><p class="b32">423人评价</p></li>
  97.                         <li class="b4"><a href="#"><img src="images/T1KYYjBCKT1RXrhCrK.jpg"  alt="图片" /></a>
  98.                             <p>小米Note 实木保护套</p><p class="b33">69元</p><br /><p class="b32">3534人评价</p></li>
  99.                         <li class="b4"><a href="#"><img src="images/T1jcEgB4AT1RXrhCrK!220x220.jpg"  alt="图片" /></a>
  100.                             <p>小米插线板</p><p class="b33">49元</p><br /><p class="b32">13.3万人评价</p></li>
  101.                     </ul>
  102.                 </div>
  103.                 <div id="b6">
  104.                     <img src="images/2.png"  alt="图片"/>
  105.                 </div>
  106.             </div>
  107.             <!--其余东西都在这上面写-->
  108.         <div id="a2">
  109.             <ul class="a2">
  110.                 <h3>热门链接</h3>
  111.                 <li><a href="#">Note 13</a></li>
  112.                 <li><a href="#">Max12</a></li>
  113.                 <li><a href="#">mu摄影</a></li>
  114.                 <li><a href="#">查找手机</a></li>
  115.                 <li><a href="#">体验中心</a></li>
  116.                 <li><a href="#">常见问题</a></li>
  117.             </ul>
  118.                 <ul class="a3">
  119.                     <h3>在线购买</h3>
  120.                     <li><a href="#">官方商城</a></li>
  121.                     <li><a href="#">选购手机</a></li>
  122.                     <li><a href="#">选购配件</a></li>
  123.                     <li><a href="#">选购碎屏宝</a></li>
  124.                     <li><a href="#">服务保障</a></li>
  125.                 </ul>
  126.                 <ul class="a3">
  127.                     <h3>服务支持</h3>
  128.                     <li><a href="#">服务首页</a></li>
  129.                     <li><a href="#">服务网点查询</a></li>
  130.                     <li><a href="#">真伪查询</a></li>
  131.                     <li><a href="#">服务政策</a></li>
  132.                     <li><a href="#">预约维修</a></li>
  133.                     <li><a href="#">维修配件价格</a></li>
  134.                 </ul>    
  135.                 <ul class="a3">
  136.                     <h3>我的社区</h3>
  137.                     <li><a href="#">社区首页</a></li>
  138.                     <li><a href="#">摄影专区</a></li>
  139.                     <li><a href="#">微博</a></li>
  140.                     <li><a href="#">贴吧</a></li>
  141.                     <li><a href="#">兴趣部落</a></li>
  142.                 </ul>    
  143.                 <ul class="a3">
  144.                     <h3>关于我们</h3>
  145.                     <li><a href="#">简介</a></li>
  146.                     <li><a href="#">工作机会</a></li>
  147.                     <li><a href="#">新闻资讯</a></li>
  148.                     <li><a href="#">采购平台</a></li>
  149.                     <li><a href="#">开发者平台</a></li>
  150.                 </ul>
  151.                 <ul class="a5">
  152.                     <li style="font-size:36px">
  153.                     <p style="padding-left:327px">24小时全国服务热线:</p>
  154.                     <p style="font-size:30px; padding-left:240px">400-888-8888</p>
  155.                     <p style=" padding-left:350px"><a href="#"><img src="images/online-service-active.png" height="20px"/>在线客服</a></p>
  156.                     </li>
  157.                 </ul>
  158.         </div>
  159.     </div>>
  160. </body>
  161. </html>

CSS部分

  1. /* CSS Document */
  3. * {
  5.     margin: 0px;
  6.     padding: 0px;
  7.     font-size: 12px;
  8. }
  10. #bigdiv1 {
  12.     height: 2300px;
  13.     background-color: #fafafa
  14. }
  16. #a1 {
  18.     border: solid #000000 1px;
  19.     height: 40px;
  20.     background-color: #000000;
  21. }
  23. #a1 ul {
  25.     list-style-type: none;
  26. }
  28. #a1 ul li a {
  30.     float: left;
  31.     margin-right: 70px;
  32.     color: #FFFFFF;
  33.     font-size: 16px;
  34.     padding-top: 10px;
  35.     text-decoration: none;
  36.     list-style-type: none;
  37. }
  39. #a2 {
  41.     height: 300px;
  42. }
  44. .a2 {
  46.     float: left;
  47.     list-style-type: none;
  48.     margin-left: 60px;
  49. }
  51. .a2 li a {
  53.     font-size: 12px;
  54.     text-decoration: none;
  55.     color: #666666;
  56. }
  58. .a3 {
  60.     float: left;
  61.     list-style-type: none;
  62.     margin-left: 130px;
  63. }
  65. .a3 li a {
  67.     font-size: 12px;
  68.     text-decoration: none;
  69.     color: #666666;
  70. }
  72. #a3 {
  74.     padding-left: 30px;
  75. }
  77. .a1 {
  79.     padding-left: 480px;
  80. }
  82. #a1 a:hover {
  84.     color: #CCCCCC;
  85. }
  87. #a2 h3 {
  89.     padding-top: 60px;
  90.     padding-bottom: 30px;
  91. }
  93. #a2 li {
  95.     padding-bottom: 5px
  96. }
  98. .a3 a:hover {
  100.     color: #0099FF;
  101. }
  103. .a2 a:hover {
  105.     color: #0099FF;
  106. }
  108. .a5 {
  110.     height: 300px;
  111.     width: 500px;
  112.     margin-left: 830px;
  113.     list-style-type: none;
  114. }
  116. .a5 li {
  118.     padding: 60px 0px 0px 0px;
  119. }
  121. .a5 li p {
  123.     padding-bottom: 12px
  124. }
  126. .a5 a {
  128.     text-decoration: none;
  129.     font-size: 16px;
  130.     color: #00CCFF
  131. }
  133. #b1 {
  135.     height: 1900px;
  136.     width: 1200px;
  137.     margin: 0px auto;
  138. }
  140. #b2 {
  142.     height: 450px;
  143. }
  145. #b3 {
  147.     background-color: #FFFFFF;
  148.     height: 200px;
  149. }
  151. #b3 img {
  153.     width: 270px;
  154.     height: 180px;
  155. }
  157. #b3 ul li {
  159.     float: left;
  160.     list-style-type: none;
  161.     margin-top: 10px;
  162. }
  164. .b2 {
  166.     padding-left: 40px;
  167. }
  169. #b4 {
  171.     height: 380px;
  172.     background-color: #FFFFFF;
  173. }
  175. #b4 h3 {
  177.     font-size: 24px;
  178.     color: #333333;
  179. }
  181. #b4 ul li {
  183.     float: left;
  184.     list-style-type: none;
  185.     margin-top: 10px;
  186.     width: 215px;
  187.     height: 290px;
  188.     background-color: #fafafa;
  189.     text-align: center;
  190. }
  192. .b3 {
  194.     margin-left: 30px;
  195. }
  197. #b4 img {
  199.     width: 215px;
  200. }
  202. .b32 {
  204.     color: #666666;
  205. }
  207. .b33 {
  209.     color: #FF9900;
  210.     font-size: 16px;
  211. }
  213. #b5 {
  215.     height: 740px;
  216. }
  218. #b5 h3 {
  220.     font-size: 24px;
  221.     color: #333333;
  222. }
  224. #b5 ul li {
  226.     float: left;
  227.     list-style-type: none;
  228.     background-color: #FFFFFF;
  229.     text-align: center;
  230.     height: 300px;
  231.     width: 234px;
  232. }
  234. .b4 img {
  236.     width: 160px;
  237.     height: 160px;
  238.     padding-bottom: 30px;
  239. }
  241. .b4 {
  243.     margin-left: 7px;
  244.     margin-top: 20px;
  245. }
  247. .b1 {
  249.     margin-top: 20px;
  250. }
  252. #b6 {
  254.     height: 130px;
  255.     text-align: center;
  256. }
  258. #b3 li:hover {
  260.     margin-top: 5px;
  261. }
  263. #b4 li:hover {
  265.     margin-top: 5px;
  266. }
  268. .b4:hover {
  270.     margin-top: 15px;
  271. }
  273. .b1:hover {
  275.     margin-top: 15px;
  276. }

需要源程序私信我

发表评论

表情：
评论列表 （有 0 条评论，149人围观）

还没有评论，来说两句吧...

相关阅读

    相关 中药铺主题静态网页大作业

    > 本人是一名在医学院校学习计算机的学生，即将进入大三，写博客即是为了记录自己的学习历程，又希望能够帮助到很多和自己一样处于起步阶段的萌新。临渊羡鱼，不如退而结网。一起加油！

    末蓝、末蓝、/ 0 赞/ 54 阅读