1. 列表页面是新的页面,需要新建页面文件 list.html
    2. 因为列表页的头部底部基本一致,所以从首页中复制粘贴过来就好
    3. 还得把初始化(base.css)、头部头部样式 common.css 引入到 list.html中
    4. 列表页面其他不同的部分就得用专有的样式 list.css

    base.csscommon.css

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7. <title>列表页-正品低价、品质保障、配送及时、轻松购物!</title>
    8. <meta name="viewport" content="width=device-width, initial-scale=1.0">
    9. <meta name="description"
    10. content="品优购-专业的综合网上购物商城,为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家,囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类,满足各种购物需求。" />
    11. <meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,品优购" />
    12. <!-- 引入favicon图标 -->
    13. <link rel="shortcut icon" href="favicon.ico" />
    14. <!-- 引入css初始化代码 -->
    15. <link rel="stylesheet" href="css/base.css">
    16. <!-- 引入公共css -->
    17. <link rel="stylesheet" href="css/common.css">
    18. </head>
    19. <body>
    20. <!-- 快捷导航模块 start -->
    21. <section class="shortcut">
    22. <div class="w">
    23. <!-- 左边 -->
    24. <div class="fl">
    25. <ul>
    26. <li>品优购欢迎您!&nbsp;</li>
    27. <li>
    28. <a href="#">请登入&nbsp;</a>
    29. <a href="#" class="style_red">免费注册</a>
    30. </li>
    31. </ul>
    32. </div>
    33. <!-- 右边 -->
    34. <div class="fr">
    35. <ul>
    36. <li>我的订单</li>
    37. <li></li>
    38. <li class="arrow-icon">我的品优购</li>
    39. <li></li>
    40. <li>品优购会员</li>
    41. <li></li>
    42. <li>企业采购</li>
    43. <li></li>
    44. <li class="arrow-icon">关注品优购</li>
    45. <li></li>
    46. <li class="arrow-icon">客户服务</li>
    47. <li></li>
    48. <li class="arrow-icon">网站导航</li>
    49. </ul>
    50. </div>
    51. </div>
    52. </section>
    53. <!-- 快捷导航模块 end -->
    54. <!-- 头部header start -->
    55. <header class="header w">
    56. <!-- logo 模块 -->
    57. <div class="logo">
    58. <h1>
    59. <a href="index.html" title="品优购商城">品优购商城</a><!-- -->
    60. </h1>
    61. </div>
    62. <!-- search 模块 -->
    63. <div class="search">
    64. <input type="text" placeholder="语言开发">
    65. <button>搜索</button>
    66. </div>
    67. <!-- hotwords 模块制作 -->
    68. <div class="hotwords">
    69. <a href="#">优惠购首发</a>
    70. <a href="#">亿元优惠</a>
    71. <a href="#">9.9元团购</a>
    72. <a href="#">美满99减30</a>
    73. <a href="#">办公用品</a>
    74. <a href="#">电脑</a>
    75. <a href="#">通信</a>
    76. </div>
    77. <!-- shopcar 购物车模块 -->
    78. <div class="shopcar">
    79. 我的购物车
    80. <i class="count">8</i>
    81. </div>
    82. </header>
    83. <!-- 头部header end -->
    84. <!-- 底部模块制作 start -->
    85. <footer class="footer">
    86. <div class="w">
    87. <div class="mod_service">
    88. <ul>
    89. <li>
    90. <h4></h4>
    91. <div class="service_txt">
    92. <h5>极速物流</h5>
    93. <p>正品保障,提供发票</p>
    94. </div>
    95. </li>
    96. <li>
    97. <h4></h4>
    98. <div class="service_txt">
    99. <h5>极速物流</h5>
    100. <p>正品保障,提供发票</p>
    101. </div>
    102. </li>
    103. <li>
    104. <h4></h4>
    105. <div class="service_txt">
    106. <h5>极速物流</h5>
    107. <p>正品保障,提供发票</p>
    108. </div>
    109. </li>
    110. <li>
    111. <h4></h4>
    112. <div class="service_txt">
    113. <h5>极速物流</h5>
    114. <p>正品保障,提供发票</p>
    115. </div>
    116. </li>
    117. <li>
    118. <h4></h4>
    119. <div class="service_txt">
    120. <h5>极速物流</h5>
    121. <p>正品保障,提供发票</p>
    122. </div>
    123. </li>
    124. </ul>
    125. </div>
    126. <div class="mod_help">
    127. <dl>
    128. <dt>购物指南</dt>
    129. <dd><a href="#">购物流程</a></dd>
    130. <dd><a href="#">会员介绍</a></dd>
    131. <dd><a href="#">生活旅行/团购</a></dd>
    132. <dd><a href="#">常见问题</a></dd>
    133. <dd><a href="#">大家电</a></dd>
    134. <dd><a href="#">联系客服</a></dd>
    135. </dl>
    136. <dl>
    137. <dt>购物指南</dt>
    138. <dd><a href="#">购物流程</a></dd>
    139. <dd><a href="#">会员介绍</a></dd>
    140. <dd><a href="#">生活旅行/团购</a></dd>
    141. <dd><a href="#">常见问题</a></dd>
    142. <dd><a href="#">大家电</a></dd>
    143. <dd><a href="#">联系客服</a></dd>
    144. </dl>
    145. <dl>
    146. <dt>购物指南</dt>
    147. <dd><a href="#">购物流程</a></dd>
    148. <dd><a href="#">会员介绍</a></dd>
    149. <dd><a href="#">生活旅行/团购</a></dd>
    150. <dd><a href="#">常见问题</a></dd>
    151. <dd><a href="#">大家电</a></dd>
    152. <dd><a href="#">联系客服</a></dd>
    153. </dl>
    154. <dl>
    155. <dt>购物指南</dt>
    156. <dd><a href="#">购物流程</a></dd>
    157. <dd><a href="#">会员介绍</a></dd>
    158. <dd><a href="#">生活旅行/团购</a></dd>
    159. <dd><a href="#">常见问题</a></dd>
    160. <dd><a href="#">大家电</a></dd>
    161. <dd><a href="#">联系客服</a></dd>
    162. </dl>
    163. <dl>
    164. <dt>购物指南</dt>
    165. <dd><a href="#">购物流程</a></dd>
    166. <dd><a href="#">会员介绍</a></dd>
    167. <dd><a href="#">生活旅行/团购</a></dd>
    168. <dd><a href="#">常见问题</a></dd>
    169. <dd><a href="#">大家电</a></dd>
    170. <dd><a href="#">联系客服</a></dd>
    171. </dl>
    172. <dl>
    173. <dt>帮助中心</dt>
    174. <dd>
    175. <img src="images/wx_cz.jpg" alt="">
    176. 品优购客户端
    177. </dd>
    178. </dl>
    179. </div>
    180. <div class="mod_copyright">
    181. <div class="links">
    182. <a href="#">关于我们</a>|
    183. <a href="#">联系我们</a>|
    184. <a href="#">联系客服</a>|
    185. <a href="#">商家入驻</a>|
    186. <a href="#">营销中心</a>|
    187. <a href="#">手机品优购</a>|
    188. <a href="#">友情链接</a>|
    189. <a href="#">销售联盟</a>|
    190. <a href="#">品优购社区</a>|
    191. <a href="#">品优购公益</a>|
    192. <a href="#">English Site</a>|
    193. <a href="#">Contact U</a>|
    194. </div>
    195. <div class="copyright">
    196. 地址:北京市昌平区建材城西路金燕龙办公楼一层 邮编:100096 电话:400-618-4000 传真:010-82935100 邮箱: zhanghj+itcast.cn <br>
    197. 京ICP备08001421号京公网安备110108007702
    198. </div>
    199. </div>
    200. </div>
    201. </footer>
    202. <!-- 底部模块制作 end -->
    203. </body>
    204. </html>