- 列表页面是新的页面，需要新建页面文件 list.html
- 因为列表页的头部和底部基本一致，所以从首页中复制粘贴过来就好
- 还得把初始化（base.css)、头部和头部样式 common.css 引入到 list.html中
- 列表页面其他不同的部分就得用专有的样式 list.css
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>列表页-正品低价、品质保障、配送及时、轻松购物！</title><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="description"content="品优购-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。商品来自全球数十万品牌商家，囊括家电、手机、电脑、服装、居家、母婴、美妆、个护、食品、生鲜等丰富品类，满足各种购物需求。" /><meta name="Keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,品优购" /><!-- 引入favicon图标 --><link rel="shortcut icon" href="favicon.ico" /><!-- 引入css初始化代码 --><link rel="stylesheet" href="css/base.css"><!-- 引入公共css --><link rel="stylesheet" href="css/common.css"></head><body><!-- 快捷导航模块 start --><section class="shortcut"><div class="w"><!-- 左边 --><div class="fl"><ul><li>品优购欢迎您！ </li><li><a href="#">请登入 </a><a href="#" class="style_red">免费注册</a></li></ul></div><!-- 右边 --><div class="fr"><ul><li>我的订单</li><li></li><li class="arrow-icon">我的品优购</li><li></li><li>品优购会员</li><li></li><li>企业采购</li><li></li><li class="arrow-icon">关注品优购</li><li></li><li class="arrow-icon">客户服务</li><li></li><li class="arrow-icon">网站导航</li></ul></div></div></section><!-- 快捷导航模块 end --><!-- 头部header start --><header class="header w"><!-- logo 模块 --><div class="logo"><h1><a href="index.html" title="品优购商城">品优购商城</a><!-- --></h1></div><!-- search 模块 --><div class="search"><input type="text" placeholder="语言开发"><button>搜索</button></div><!-- hotwords 模块制作 --><div class="hotwords"><a href="#">优惠购首发</a><a href="#">亿元优惠</a><a href="#">9.9元团购</a><a href="#">美满99减30</a><a href="#">办公用品</a><a href="#">电脑</a><a href="#">通信</a></div><!-- shopcar 购物车模块 --><div class="shopcar">我的购物车<i class="count">8</i></div></header><!-- 头部header end --><!-- 底部模块制作 start --><footer class="footer"><div class="w"><div class="mod_service"><ul><li><h4></h4><div class="service_txt"><h5>极速物流</h5><p>正品保障，提供发票</p></div></li><li><h4></h4><div class="service_txt"><h5>极速物流</h5><p>正品保障，提供发票</p></div></li><li><h4></h4><div class="service_txt"><h5>极速物流</h5><p>正品保障，提供发票</p></div></li><li><h4></h4><div class="service_txt"><h5>极速物流</h5><p>正品保障，提供发票</p></div></li><li><h4></h4><div class="service_txt"><h5>极速物流</h5><p>正品保障，提供发票</p></div></li></ul></div><div class="mod_help"><dl><dt>购物指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>购物指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>购物指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>购物指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>购物指南</dt><dd><a href="#">购物流程</a></dd><dd><a href="#">会员介绍</a></dd><dd><a href="#">生活旅行/团购</a></dd><dd><a href="#">常见问题</a></dd><dd><a href="#">大家电</a></dd><dd><a href="#">联系客服</a></dd></dl><dl><dt>帮助中心</dt><dd><img src="images/wx_cz.jpg" alt="">品优购客户端</dd></dl></div><div class="mod_copyright"><div class="links"><a href="#">关于我们</a>|<a href="#">联系我们</a>|<a href="#">联系客服</a>|<a href="#">商家入驻</a>|<a href="#">营销中心</a>|<a href="#">手机品优购</a>|<a href="#">友情链接</a>|<a href="#">销售联盟</a>|<a href="#">品优购社区</a>|<a href="#">品优购公益</a>|<a href="#">English Site</a>|<a href="#">Contact U</a>|</div><div class="copyright">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn <br>京ICP备08001421号京公网安备110108007702</div></div></div></footer><!-- 底部模块制作 end --></body></html>
若有收获，就点个赞吧
0 人点赞
