CSS/HTML静态购物网站项目源码解析（品优购）——该项目包含主页、注册页、列表页三个网页

注：该项目所涉及的素材文件请QQ联系作者（Etui：3416252112）

首先：

上图！

index.html------主页

register.html-------注册页

list.html-----列表页

摘要：作为一个前端初学者，这是我学完html和css基础后做的第二个练习（第一个是小米商城），在练习过程中也遇到了很多困难，好在最终都一一解决，这是一个成长的过程！
这个项目是我在B站中pink老师的教程里看到的，我先是自己尝试敲了一遍，然后再回头看一遍老师的方法。（我感觉这种学习方法很不错，但是不得不说老师的方法真的很别致）

我做这个项目是分模块进行编写，例如我将主页分为九部分编写，如图：

这样编写的好处是便于修改，而且如果其他页面有公共的标题栏或者底栏也可以是用相同的css样式。例如该项目中三个页面的备案栏都是相同，此时我们便可以使用公共的样式（该项目中的common.css便是公共样式文件）

下面是我编写该项目的目录：

其中css文件夹为样式，fonts为图标字体文件，images为网页中固定的（不更改的）图片文件，upload文件夹为网页中可切换的图片。
favicon.ico文件为网页图标（必须放在根目录，和index.html一起）
index.html为主页
list.html为列表页
register.html为注册页

以下为这个项目的源码：
index.html

<!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><!-- 清除默认样式 --><link rel="stylesheet" href="./css/reset.css"><!-- 引入类型样式 --><link rel="stylesheet" href="./css/style.css"><!-- 引用公共样式 --><link rel="stylesheet" href="./css/base.css"><link rel="shortcut icon" href="/favicon.ico"><!-- 引入iconfont --><link rel="stylesheet" href="./fonts/iconfont/iconfont.css"><!-- 引入公共底栏common.css --><link rel="stylesheet" href="./css/common.css">
</head>
<body><!-- 顶部菜单 --><div class="top_bar"><div class="topbar w"><div class="left_login"><span>品优购欢迎您！</span><a href="#">请登录</a><a href="register.html" class="a2">免费注册</a></div><div class="right_menu"><ul class="rightmenu"><li><a href="">我的订单</a><span>|</span></li><li><a href="">我的品优购<i class="iconfont icon-xia-xi"></i></a><span>|</span></li><li><a href="">品优购会员</a><span>|</span></li><li><a href="">企业采购</a><span>|</span></li><li><a href="">关注品优购<i class="iconfont icon-xia-xi"></i></a><span>|</span></li><li><a href="">客户服务<i class="iconfont icon-xia-xi"></i></a><span>|</span></li><li><a href="">导航网站<i class="iconfont icon-xia-xi"></i></a></li></ul></div></div></div><!-- 头部搜索栏 --><div class="top_nav"><div class="topnav w"><!-- 左侧logo --><div class="left-img"><a href=""><img src="./images/logo.png" alt=""></a></div><div class="center_search"><div class="search"><input type="text" value="语言开发"><button>搜索</button></div><div class="bt_nav"><ul><li><a href="">优惠购首发</a></li><li><a href="">亿元优惠</a></li><li><a href="">9.9元团购</a></li><li><a href="">每满99减30</a></li><li><a href="">办公用品</a></li><li><a href="">电脑</a></li><li><a href="">通信</a></li></ul></div></div><!-- 右侧购物车 --><div class="right_shop"><i class="shop_car iconfont icon-shop"></i><span>我的购物车</span><i class="arrow iconfont icon-you-xi"></i><p class="count">8</p></div></div></div><!-- 头部菜单栏 --><div class="header_bar"><div class="headerbar w"><ul><li class="first"><a href="">全部商品分类</a></li><div class="shop_list"><ul><li class="iconfont"><a href="">家用电器</a></li><li class="iconfont"><a href="list.html">手机 数码 通信</a></li><li class="iconfont"><a href="">电脑、办公</a></li><li class="iconfont"><a href="">家居、家具、家装、厨具</a></li><li class="iconfont"><a href="">男装、女装、童装、内衣</a></li><li class="iconfont"><a href="">个护化妆、清洁用品、宠物</a></li><li class="iconfont"><a href="">鞋靴、箱包、珠宝、奢侈品</a></li><li class="iconfont"><a href="">户外运动、钟表</a></li><li class="iconfont"><a href="">汽车、汽车用品</a></li><li class="iconfont"><a href="">母婴、玩具乐器</a></li><li class="iconfont"><a href="">食品、酒类、生鲜、特产</a></li><li class="iconfont"><a href="">医药保健</a></li><li class="iconfont"><a href="">图书、音像、电子书</a></li><li class="iconfont"><a href="">彩票、旅行、充值、票务</a></li><li class="iconfont"><a href="">理财、众筹、白条、保险</a></li></ul></div><li><a href="">服装城</a></li><li><a href="">服装城</a></li><li><a href="">服装城</a></li><li><a href="">服装城</a></li><li><a href="">服装城</a></li><li><a href="">服装城</a></li><li><a href="">服装城</a></li></ul></div></div><!-- 中部轮播、快报模块 --><div class="banner_auter"><div class="banner w"><div class="center_images"><img src="./upload/focus1.png" alt=""></div><div class="right_bulletin"><div class="title"><span class="s1">品优购快报</span><span class="s2">更多<i class="iconfont icon-you-xi"></i></span></div><div class="list"><ul><li><a href=""><strong>[重磅]</strong>他来了他来了,头戴绿帽过来了</a></li><li><a href=""><strong>[重磅]</strong>他来了他来了,头戴绿帽过来了</a></li><li><a href=""><strong>[重磅]</strong>他来了他来了,头戴绿帽过来了</a></li><li><a href=""><strong>[重磅]</strong>他来了他来了,头戴绿帽过来了</a></li><li><a href=""><strong>[重磅]</strong>他来了他来了,头戴绿帽过来了</a></li></ul></div><div class="skip_list"><ul><li class="first"><a href=""><i class="iconfont icon-shouji"></i><p>话费</p></a></li><li><a href=""><i class="iconfont icon-shouji"></i><p>话费</p></a></li><li><a href=""><i class="iconfont icon-shouji"></i><p>话费</p></a></li><li><a href=""><i class="iconfont icon-shouji"></i><p>话费</p></a></li><li class="first"><a href=""><i class="iconfont icon-shouji"></i><p>话费</p></a></li><li><a href=""><i class="iconfont icon-shouji"></i><p>话费</p></a></li><li><a href=""><i class="iconfont icon-shouji"></i><p>话费</p></a></li><li><a href=""><i class="iconfont icon-shouji"></i><p>话费</p></a></li><li class="first"><a href=""><i class="iconfont icon-shouji"></i><p>话费</p></a></li><li><a href=""><i class="iconfont icon-shouji"></i><p>话费</p></a></li><li><a href=""><i class="iconfont icon-shouji"></i><p>话费</p></a></li><li><a href=""><i class="iconfont icon-shouji"></i><p>话费</p></a></li></ul></div><div class="images"><img src="./upload/bargain.png" alt=""></div></div></div></div><!-- 今日推荐栏 --><div class="banner2_auter"><div class="banner2 w"><div class="today"><img src="./images/recom.png" alt=""></div><div class="recommend"><ul><li><a href=""><img src="./upload/recom_03.jpg" alt=""></a></li><li><a href=""><img src="./upload/recom_03.jpg" alt=""></a></li><li><a href=""><img src="./upload/recom_03.jpg" alt=""></a></li><li><a href=""><img src="./upload/recom_03.jpg" alt=""></a></li></ul></div></div></div><!-- 家用电器栏 --><div class="banner3_auter"><div class="banner3 w"><!-- 头部标题 --><div class="header_bar"><div class="left_title"><span>家用电器</span></div><div class="right_menu"><ul><li><a href="">热门</a><span>|</span></li><li><a href="">大家电</a><span>|</span></li><li><a href="">生活电器</a><span>|</span></li><li><a href="">厨房电器</a><span>|</span></li><li><a href="">生活电器</a><span>|</span></li><li><a href="">个护健康</a><span>|</span></li><li><a href="">应季电器</a><span>|</span></li><li><a href="">空气/净水</a><span>|</span></li><li><a href="">新奇特</a><span>|</span></li><li><a href="">高端电器</a></li></ul></div></div><!-- 主体 --><div class="body_auter"><div class="left_list"><ul><li><a href="">节能补贴</a></li><li><a href="">节能补贴</a></li><li><a href="">节能补贴</a></li><li><a href="">节能补贴</a></li><li><a href="">节能补贴</a></li><li><a href="">节能补贴</a></li></ul><div class="imgs"><a href=""><img src="./upload/floor-1-1.png" alt=""></a></div></div><div class="image_list"><ul><li><a href=""><img src="./upload/floor-1-b01.png" alt=""></a></li><div class="center_img1"><li><a href=""><img src="./upload/floor-1-2.png" alt=""></a></li><li><a href=""><img src="./upload/floor-1-3.png" alt=""></a></li></div><li class="img4"><a href=""><img src="./upload/floor-1-4.png" alt=""></a></li><div class="center_img2"><li><a href=""><img src="./upload/floor-1-5.png" alt=""></a></li><li><a href=""><img src="./upload/floor-1-6.png" alt=""></a></li></div></ul></div></div></div><!-- 手机通讯 --><div class="banner3 w"><!-- 头部标题 --><div class="header_bar"><div class="left_title"><span>手机通讯</span></div><div class="right_menu"><ul><li><a href="">热门</a><span>|</span></li><li><a href="">大家电</a><span>|</span></li><li><a href="">生活电器</a><span>|</span></li><li><a href="">厨房电器</a><span>|</span></li><li><a href="">生活电器</a><span>|</span></li><li><a href="">个护健康</a><span>|</span></li><li><a href="">应季电器</a><span>|</span></li><li><a href="">空气/净水</a><span>|</span></li><li><a href="">新奇特</a><span>|</span></li><li><a href="">高端电器</a></li></ul></div></div><!-- 主体 --><div class="body_auter"><div class="left_list"><ul><li><a href="">节能补贴</a></li><li><a href="">节能补贴</a></li><li><a href="">节能补贴</a></li><li><a href="">节能补贴</a></li><li><a href="">节能补贴</a></li><li><a href="">节能补贴</a></li></ul><div class="imgs"><a href=""><img src="./upload/floor-1-1.png" alt=""></a></div></div><div class="image_list"><ul><li><a href=""><img src="./upload/floor-1-b01.png" alt=""></a></li><div class="center_img1"><li><a href=""><img src="./upload/floor-1-2.png" alt=""></a></li><li><a href=""><img src="./upload/floor-1-3.png" alt=""></a></li></div><li class="img4"><a href=""><img src="./upload/floor-1-4.png" alt=""></a></li><div class="center_img2"><li><a href=""><img src="./upload/floor-1-5.png" alt=""></a></li><li><a href=""><img src="./upload/floor-1-6.png" alt=""></a></li></div></ul></div></div></div></div><!-- 底栏 --><div class="bottom1_auter"><div class="bottom1 w"><div class="guarantee"><ul><li><div class="i"><i class="iconfont icon-65"></i></div><div class="f"><span>正品保障</span><p>正品保障，提供发票</p></div></li><li><div class="i"><i class="iconfont icon-65"></i></div><div class="f"><span>正品保障</span><p>正品保障，提供发票</p></div></li><li><div class="i"><i class="iconfont icon-65"></i></div><div class="f"><span>正品保障</span><p>正品保障，提供发票</p></div></li><li><div class="i"><i class="iconfont icon-65"></i></div><div class="f"><span>正品保障</span><p>正品保障，提供发票</p></div></li></ul></div></div><!-- 服务指南 --><div class="service w"><div class="service_in"><div class="service_sun"><h1>服务指南</h1><ul><li><a href="">购物流程</a></li><li><a href="">会员介绍</a></li><li><a href="">生活旅行/团购</a></li><li><a href="">常见问题</a></li><li><a href="">大家电</a></li><li><a href="">联系客服</a></li></ul></div><div class="service_sun"><h1>服务指南</h1><ul><li><a href="">购物流程</a></li><li><a href="">会员介绍</a></li><li><a href="">生活旅行/团购</a></li><li><a href="">常见问题</a></li><li><a href="">大家电</a></li><li><a href="">联系客服</a></li></ul></div><div class="service_sun"><h1>服务指南</h1><ul><li><a href="">购物流程</a></li><li><a href="">会员介绍</a></li><li><a href="">生活旅行/团购</a></li><li><a href="">常见问题</a></li><li><a href="">大家电</a></li><li><a href="">联系客服</a></li></ul></div><div class="service_sun"><h1>服务指南</h1><ul><li><a href="">购物流程</a></li><li><a href="">会员介绍</a></li><li><a href="">生活旅行/团购</a></li><li><a href="">常见问题</a></li><li><a href="">大家电</a></li><li><a href="">联系客服</a></li></ul></div><div class="service_sun"><h1>服务指南</h1><ul><li><a href="">购物流程</a></li><li><a href="">会员介绍</a></li><li><a href="">生活旅行/团购</a></li><li><a href="">常见问题</a></li><li><a href="">大家电</a></li><li><a href="">联系客服</a></li></ul></div><div class="QRcode"><h1>帮助中心</h1><img src="./images/wx_cz.jpg" alt=""><p>品优购客户端</p></div></div></div></div><!-- 备案栏 --><div class="bottom_auter"><div class="bottom w"><ul><li><a href="">关于我们</a><span>|</span></li><li><a href="">联系我们</a><span>|</span></li><li><a href="">联系客服</a><span>|</span></li><li><a href="">商家入驻</a><span>|</span></li><li><a href="">营销中心</a><span>|</span></li><li><a href="">手机品优购</a><span>|</span></li><li><a href="">友情链接</a><span>|</span></li><li><a href="">销售联盟</a><span>|</span></li><li><a href="">品优购社区</a><span>|</span></li><li><a href="">品优购公益</a><span>|</span></li><li><a href="">English Site</a><span>|</span></li><li><a href="">Contact U</a></li></ul><div class="pp"><p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱：zhanghj+itcast.cn</p><p>京ICP备08001421号京公安网备案110108007702</p></div></div></div>
</body>
</html>

list.html

<!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><!-- 引入重置样式 --><link rel="stylesheet" href="./css/reset.css"><!-- 引入公共模块样式 --><link rel="stylesheet" href="./css/common.css"><!-- 引入公共样式 --><link rel="stylesheet" href="./css/base.css"><!-- 引入iconfont文件 --><link rel="stylesheet" href="./fonts/iconfont/iconfont.css"><!-- 引入list.css --><link rel="stylesheet" href="./css/list.css">
</head>
<body><!-- 顶部菜单 --><div class="top_bar"><div class="topbar w"><div class="left_login"><span>品优购欢迎您！</span><a href="#">请登录</a><a href="#" class="a2">免费注册</a></div><div class="right_menu"><ul class="rightmenu"><li><a href="">我的订单</a><span>|</span></li><li><a href="">我的品优购<i class="iconfont icon-xia-xi"></i></a><span>|</span></li><li><a href="">品优购会员</a><span>|</span></li><li><a href="">企业采购</a><span>|</span></li><li><a href="">关注品优购<i class="iconfont icon-xia-xi"></i></a><span>|</span></li><li><a href="">客户服务<i class="iconfont icon-xia-xi"></i></a><span>|</span></li><li><a href="">导航网站<i class="iconfont icon-xia-xi"></i></a></li></ul></div></div></div><!-- 头部搜索栏 --><div class="top_nav"><div class="topnav w"><!-- 左侧logo --><div class="left-img"><a href="index.html"><img src="./images/logo.png" alt=""></a><div class="ms"><img src="./images/sk.png" alt=""></div></div><div class="center_search"><div class="search"><input type="text" value="语言开发"><button>搜索</button></div><div class="bt_nav"><ul><li><a href="">优惠购首发</a></li><li><a href="">亿元优惠</a></li><li><a href="">9.9元团购</a></li><li><a href="">每满99减30</a></li><li><a href="">办公用品</a></li><li><a href="">电脑</a></li><li><a href="">通信</a></li></ul></div></div><!-- 右侧购物车 --><div class="right_shop"><i class="shop_car iconfont icon-shop"></i><span>我的购物车</span><i class="arrow iconfont icon-you-xi"></i><p class="count">8</p></div></div></div><!-- 标题栏 --><div class="nav_auter"><div class="nav w"><ul><li><a href="">品优秒杀</a></li><li><a href="">品优秒杀</a></li><li><a href="">品优秒杀</a></li><li><a href="">女装</a></li><li><a href="">女装</a></li><li><a href="">女装</a></li><li><a href="">女装</a></li><li><a href="">女装</a></li><li><a href="">女装</a></li><li><a href="">女装</a></li><li><a href="">女装</a></li><li><a href="">全部分类<i class="iconfont icon-xia-xi"></i></a></li></ul></div></div><!-- 头部图片 --><div class="header_image w"><img src="./upload/bg_03.png" alt=""></div><!-- 商品列表 --><div class="body_list w"><ul><li><a href=""><img src="./upload/list.jpg" alt=""></a></li><li><a href=""><img src="./upload/list.jpg" alt=""></a></li><li><a href=""><img src="./upload/list.jpg" alt=""></a></li><li><a href=""><img src="./upload/list.jpg" alt=""></a></li><li><a href=""><img src="./upload/list.jpg" alt=""></a></li><li><a href=""><img src="./upload/list.jpg" alt=""></a></li><li><a href=""><img src="./upload/list.jpg" alt=""></a></li><li><a href=""><img src="./upload/list.jpg" alt=""></a></li><li><a href=""><img src="./upload/list.jpg" alt=""></a></li></ul></div><!-- 底栏 --><div class="bottom1_auter"><div class="bottom1 w"><div class="guarantee"><ul><li><div class="i"><i class="iconfont icon-65"></i></div><div class="f"><span>正品保障</span><p>正品保障，提供发票</p></div></li><li><div class="i"><i class="iconfont icon-65"></i></div><div class="f"><span>正品保障</span><p>正品保障，提供发票</p></div></li><li><div class="i"><i class="iconfont icon-65"></i></div><div class="f"><span>正品保障</span><p>正品保障，提供发票</p></div></li><li><div class="i"><i class="iconfont icon-65"></i></div><div class="f"><span>正品保障</span><p>正品保障，提供发票</p></div></li></ul></div></div><!-- 服务指南 --><div class="service w"><div class="service_in"><div class="service_sun"><h1>服务指南</h1><ul><li><a href="">购物流程</a></li><li><a href="">会员介绍</a></li><li><a href="">生活旅行/团购</a></li><li><a href="">常见问题</a></li><li><a href="">大家电</a></li><li><a href="">联系客服</a></li></ul></div><div class="service_sun"><h1>服务指南</h1><ul><li><a href="">购物流程</a></li><li><a href="">会员介绍</a></li><li><a href="">生活旅行/团购</a></li><li><a href="">常见问题</a></li><li><a href="">大家电</a></li><li><a href="">联系客服</a></li></ul></div><div class="service_sun"><h1>服务指南</h1><ul><li><a href="">购物流程</a></li><li><a href="">会员介绍</a></li><li><a href="">生活旅行/团购</a></li><li><a href="">常见问题</a></li><li><a href="">大家电</a></li><li><a href="">联系客服</a></li></ul></div><div class="service_sun"><h1>服务指南</h1><ul><li><a href="">购物流程</a></li><li><a href="">会员介绍</a></li><li><a href="">生活旅行/团购</a></li><li><a href="">常见问题</a></li><li><a href="">大家电</a></li><li><a href="">联系客服</a></li></ul></div><div class="service_sun"><h1>服务指南</h1><ul><li><a href="">购物流程</a></li><li><a href="">会员介绍</a></li><li><a href="">生活旅行/团购</a></li><li><a href="">常见问题</a></li><li><a href="">大家电</a></li><li><a href="">联系客服</a></li></ul></div><div class="QRcode"><h1>帮助中心</h1><img src="./images/wx_cz.jpg" alt=""><p>品优购客户端</p></div></div></div></div><!-- 备案栏 --><div class="bottom_auter"><div class="bottom w"><ul><li><a href="">关于我们</a><span>|</span></li><li><a href="">联系我们</a><span>|</span></li><li><a href="">联系客服</a><span>|</span></li><li><a href="">商家入驻</a><span>|</span></li><li><a href="">营销中心</a><span>|</span></li><li><a href="">手机品优购</a><span>|</span></li><li><a href="">友情链接</a><span>|</span></li><li><a href="">销售联盟</a><span>|</span></li><li><a href="">品优购社区</a><span>|</span></li><li><a href="">品优购公益</a><span>|</span></li><li><a href="">English Site</a><span>|</span></li><li><a href="">Contact U</a></li></ul><div class="pp"><p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱：zhanghj+itcast.cn</p><p>京ICP备08001421号京公安网备案110108007702</p></div></div></div></body>
</html>

<!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><!-- 引入公共模块样式 --><link rel="stylesheet" href="./css/common.css"><!-- 引入重置样式 --><link rel="stylesheet" href="./css/reset.css"><!-- 引入公共样式 --><link rel="stylesheet" href="./css/base.css"><!-- 引入iconfont.css --><link rel="stylesheet" href="./fonts/iconfont2/iconfont.css"><!-- 引入register.css --><link rel="stylesheet" href="./css/register.css">
</head>
<body><!-- 头部主页logo --><div class="auter w"><div class="header_logo"><a href="index.html"><img src="./images/logo.png" alt=""></a></div><div class="register"><div class="head_bar"><h1>注册新用户</h1><p>我有账号，去<a href="">登录</a></p></div><div class="body_form"><form action=""><ul><li><label for="" class="first">手机号：</label><input type="text"><i class="iconfont icon-cuowu"></i><label for="" class="end">手机号码格式不正确，请重新输入</label></li><li><label for="" class="first">短信验证码：</label><input type="text"><i class="iconfont icon-dui success"></i><label for="" class="success end">短信验证码输入正确</label></li><li><label for="" class="first">登录密码：</label><input type="text"><i class="iconfont icon-cuowu"></i><label for="" class="end">登录密码格式不正确，请重新输入</label></li><div class="grades"><label for="" class="first">安全程度</label><label for="" class="grade1">弱</label><label for="" class="grade2">中</label><label for="" class="grade3">强</label></div><li><label for="" class="first">确认密码：</label><input type="text"><i class="iconfont icon-cuowu"></i><label for="" class="end">登录密码格式不正确，请重新输入</label></li><div class="checks"><input type="checkbox" class="check"><label for="">同意协议并注册<span>《知晓用户协议》</span></label></div><li><button>完成注册</button></li></ul></form></div></div></div><!-- 备案栏 --><div class="bottom_auter"><div class="bottom w"><ul><li><a href="">关于我们</a><span>|</span></li><li><a href="">联系我们</a><span>|</span></li><li><a href="">联系客服</a><span>|</span></li><li><a href="">商家入驻</a><span>|</span></li><li><a href="">营销中心</a><span>|</span></li><li><a href="">手机品优购</a><span>|</span></li><li><a href="">友情链接</a><span>|</span></li><li><a href="">销售联盟</a><span>|</span></li><li><a href="">品优购社区</a><span>|</span></li><li><a href="">品优购公益</a><span>|</span></li><li><a href="">English Site</a><span>|</span></li><li><a href="">Contact U</a></li></ul><div class="pp"><p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱：zhanghj+itcast.cn</p><p>京ICP备08001421号京公安网备案110108007702</p></div></div></div>
</body>
</html>

一下为样式文件
base.css(公共样式)

html{box-sizing: border-box;
}
.w{width: 1200px;margin: 0 auto;color: #666;
}
a{text-decoration: none;color: #666;
}input:focus,
button:focus{padding: none;outline: none;
}

common.less

//顶部导航栏
.top_bar{background-color: #F1F1F1;width: 100%;height: 31px;.topbar{display: flex;justify-content: space-between;height: 31px;line-height: 31px;font-size: 12px;.left_login{width: 230px;height: 100%;// background-color: red;a:hover{color: #CB1680;}.a2{color: #CB1680;}}.right_menu{width: 635px;height: 100%;// background-color: wheat;.rightmenu{li{float: left;i{font-size: 12px;font-weight: bold;margin-left: 4px;}span{margin: 0px 14px;// font-weight: bold;}}}}}
}//头部搜索栏
.top_nav{// margin-top: 10px;height: 105px;// background-color: wheat;.topnav{height: 100%;display: flex;align-items: center;justify-content: space-between;.center_search{width: 538px;height: 100%;// background: lightpink;.search{height: 32px;margin-top: 19px;width: 534px;border: 2px #B1191A solid;input{float: left;font-size: 14px;height: 32px;width: 444px;border: none;padding: 0px;color: #757575;padding-left: 10px;}button{float: left;font-size: 16px;color: white;border: none;padding: 0px;width: 80px;height: 32px;background-color: #B1191A;}}.bt_nav{width: 528px;height: 39px;padding-left: 10px;padding-top: 10px;li{float: left;font-size: 12px;margin-right: 22px;a:hover{color: #C81623;}}li:nth-child(1){a{color: #C81623;}}   }}.right_shop{position: relative;height: 34px;width: 140px;margin-top: -25px;background-color: #F7F7F7;border: 1px #DFDFDF solid;line-height: 34px;text-align: center;span{font-size: 13px;}.shop_car{color: #B1191A;margin-right: 6px}.arrow{color: #172B60;font-weight: bold;margin-left: 10px;}p{position: absolute;left: 105px;top: -5px;width: 18px;height: 14px;background-color: #E60012;font-size: 12px;text-align: center;line-height: 14px;color: white;border-top-left-radius: 7px;border-top-right-radius: 7px;border-bottom-right-radius: 7px;}}}
}//底部公共栏
.bottom1_auter{height: 295px;background-color: #F5F5F5;.bottom1{height: 109px;border-bottom: 1px #CCCCCC solid;ul{display: flex;justify-content: space-around;li{margin-top: 30px;.i{width: 50px;height: 50px;float: left; line-height: 50px;background-color: #C81623;text-align: center;border-radius: 25px;color: white;margin-right: 8px;i{font-size: 30px;font-weight: bold;}}.f{float: left;height: 50px;line-height: 17px;span{display: block;margin-top: 7px;font-size: 13px;font-weight: bold;}p{font-size: 12px;}}}}}//服务指南.service{height: 164px;border-bottom: 1px #CCC solid;//.service_in{margin: 20px 50px 0px 50px;display: flex;justify-content: space-around;.service_sun{width: 200px;height: 142px;h1{font-size: 16px;height: 24px;margin-bottom: 10px;}li{font-size: 12px;line-height: 18px;a:hover{color: #C81623;}}}.QRcode{width: 90px;height: 142px;text-align: center;h1{font-size: 16px;height: 24px;margin-bottom: 10px;}p{font-size: 12px;}}}}
}//尾部备案栏
.bottom_auter{height: 93px;width: 100%;background-color: #f5f5f5;padding: 20px 0px;.bottom{height: 73px;display: flex;flex-wrap: wrap;justify-content: center;ul{height: 18px;line-height: 18px;li{float: left;font-size: 12px;a:hover{color: #C81623;}span{margin: 0px 5px;}}}.pp{height: 20px;line-height: 20px;font-size: 12px;text-align: center;}}
}

style.less(主页的样式)


// 头部菜单栏
.header_bar{height: 45px;width: 100%;border-bottom: 2px #B1191A solid;.headerbar{height: 45px;// background-color: wheat;line-height: 45px;position: relative;li{margin: 0px 25px;float: left;}li:hover{a{color: #B1191A;   }}.first,.first:hover{width: 210px;height: 45px;margin: 0px;text-align: center;background-color: #B1191A;a{color: white;}}.shop_list{position: absolute;top: 47px;width: 210px;height: 465px;background-color: #C81623;li{width: 198px;margin: 0px;float: none;padding-left: 10px;margin-left: 2px;height: 31px;line-height: 31px;a{font-size: 14px;color: white;}}li::after{content: '\e620';float: right;color: white;line-height: 31px;font-weight: bold;margin-right: 10px;}li:hover{background-color: white;a{color: #B1191A;}}}}
}//中部轮播图、快报模块
.banner_auter{.banner{height: 455px;margin-top: 10px;// background: wheat;.center_images{height: 455px;width: 721px;margin: 0px 0px 0px 220px;float: left;}.right_bulletin{width: 250px;height: 455px;float: right;// margin-top: 10px;//快报标题.title{height: 33px;border: 1px #E4E4E4 solid;border-bottom: 1px #E4E4E4 dotted;line-height: 33px;display: flex;justify-content: space-between;font-size: 14px;.s1{margin-left: 10px;font-weight: bold;}.s2{margin-right: 10px;font-size: 12px;i{font-weight: bold;}}.s2:hover{color: #B1191A;}}//快报列表.list{// width: 250px;border-left: 1px #E4E4E4 solid;border-right: 1px #E4E4E4 solid;border-bottom: 1px #E4E4E4 solid;ul{margin: 0px 15px;padding-top: 5px;padding-bottom: 5px;font-size: 13px;li{width: 218px;height: 24px;line-height: 24px;overflow: inherit;strong{font-weight: bold;margin-right: 3px;}a:hover{color: #C81623;}}}}//方格.skip_list{width: 250px;height: 207px;// background-color: wheat;border-left: 1px #E4E4E4 solid;ul{.first{width: 62px;}li{float: left;width: 61px;height: 68px;border-right: 1px #E4E4E4 solid;border-bottom: 1px #E4E4E4 solid;text-align: center;i{height: 50px;line-height: 45px;font-size: 25px;color: #C81623;}p{font-size: 13px;}}}}.images{height: 77px;width: 250px;margin-top: 7px;}}}
}//今日推荐栏
.banner2_auter{.banner2{height: 163px;margin-top: 12px;// background-color: wheat; display: flex;.today{width: 205px;height: 163px;display: flex;justify-content: space-around;align-items: center;background-color: #5C5251;}.recommend{height: 100%;width: 995px;background-color: #EBEBEB;ul{width: 100%;display: flex;position: relative;li{width: 163px;width: 249px;}li:nth-child(1):after,li:nth-child(2):after,li:nth-child(3):after{content: '';position:absolute;width: 1px;height: 145px;top: 9px;background-color: #ddd;}}}}
}// 家用电器栏
.banner3_auter{height: 812px;// background-color: rgb(248, 231, 228);.banner3{height: 391px;margin-top: 30px;// 标题.header_bar{height: 28px;border-bottom: 2px #B1191A solid;display: flex;justify-content: space-between;line-height: 28px;.left_title{font-size: 19px;color: #B1191A;}.right_menu{height: 28px;margin-right: 15px;li{float: left;font-size: 12px;a:hover{color: #B1191A;}span{margin: 0px 15px;}}li:nth-child(1){a{color: #B1191A;}}}}// 主体.body_auter{height: 361px;width: 100%;display: flex;justify-content: space-between;.left_list{width: 210px;height: 361px;background-color: #fbfbfb;display: flex;flex-wrap: wrap;ul{height: 84px;width: 210px;display: flex;flex-wrap: wrap;justify-content: space-evenly;li{width: 85px;height: 33px;line-height: 33px;text-align: center;border-bottom: 1px #ddd solid;font-size: 13px;}}.imgs{margin: 0px auto;}}.image_list{height: 361px;width: 990px;ul{display: flex;.center_img1{border-right: 1px #CCCCCC solid;li:nth-child(1){height: 180px;border-bottom: 1px #CCCCCC solid;}}.img4{border-right: 1px #CCCCCC solid;}.center_img2{li:nth-child(1){height: 180px;border-bottom: 1px #CCCCCC solid;}}}}}}
}// 公共底栏见common.less

list.less（列表页样式）


//搜索栏“秒杀”字体
.top_nav{.topnav{position: relative;.left-img{.ms{position: absolute;width: 86px;height: 27px;top: 38px;left: 191px;border-left: 1px #C81523 solid;text-align: center;}}}
}// 分类栏
.nav_auter{width: 100%;height: 45px;border-bottom: 2px #C81523 solid;.nav{height: 45px;line-height: 45px;li{float: left;margin: 0px 25px;font-size: 15px;i{font-weight: bold;}a:hover{color: #C81523;}}li:nth-child(1),li:nth-child(2),li:nth-child(3){font-size: 17px;font-weight: bold;a{color: black;}a:hover{color: black;}}li:nth-child(5){a{color: #C81523;}}}
}//商品列表
.body_list{ul{display: flex;flex-wrap: wrap;justify-content: space-between;li{margin-top: 15px;transition: 0.3s;}li:hover{box-shadow: 0px 10px 10px rgba(0, 0, 0, .3);transform: translateY(-10px);}}
}

.auter{height: 606px;.header_logo{height: 82px;line-height: 82px;border-bottom: 2px #C81523 solid;a{height: 100%;display: flex;align-items: center;}}.register{height: 500px;margin-top: 20px;border: 1px #CCCCCC solid;.head_bar{height: 41px;line-height: 41px;border-bottom: 1px #CCCCCC solid;padding: 0px 10px;display: flex;justify-content: space-between;background-color: #ECECEC;h1{font-size: 18px;}p{font-size: 14px;a{color: #C81523;}}}.body_form{margin: 50px 299px 0px 299px;height: 368px;font-size: 12px;form{height: 368px;width: 600px;// background-color: wheat;li{text-align: center;height: 37px;vertical-align: middle;margin-bottom: 20px;.first{display: inline-block;width: 88px;text-align: right;}input{height: 35px;border: 1px #CCCCCC solid;}i{vertical-align: middle;font-size: 22px;color: #E12D2C;}.end{display: inline-block;height: 37px;width: 204px;text-align: left;color: #E12D2C;}.success{color: #39BA36;}}.grades{text-align: center;margin-bottom: 20px;padding-right: 140px;label{color: white;padding: 0px 10px;}.first{color: #666666;}.grade1{background-color: #DE1111;}.grade2{background-color: #39BA36;}.grade3{background-color: #F79173;}}.checks{text-align: center;margin-bottom: 20px;padding-right: 150px;span{color: #1BA1E6;}}button{width: 200px;height: 34px;margin-top: 0px;margin-top: 20px;margin-right: 150px;background-color: #C81623;color: white;padding: 0px;border: 0px;}}}}
}//去除备案栏背景色
.bottom_auter{background-color: white;
}

很高兴你能看到这里！
积跬步，至千里！加油！

CSS/HTML静态购物网站项目源码解析（品优购）——该项目包含主页、注册页、列表页三个网页相关推荐

计算机毕业设计Java购物网站设计(源码+系统+mysql数据库+Lw文档）
计算机毕业设计Java购物网站设计(源码+系统+mysql数据库+Lw文档) 计算机毕业设计Java购物网站设计(源码+系统+mysql数据库+Lw文档) 本源码技术栈: 项目架构:B/S架构开发语 ...
JAVA毕业设计潮流奢侈品购物网站计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计潮流奢侈品购物网站计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计潮流奢侈品购物网站计算机源码+lw文档+系统+调试部署+数据库本源码技术栈: 项目架构:B/S架构开 ...
java毕业设计水果购物网站mybatis+源码+调试部署+系统+数据库+lw
java毕业设计水果购物网站mybatis+源码+调试部署+系统+数据库+lw java毕业设计水果购物网站mybatis+源码+调试部署+系统+数据库+lw 本源码技术栈: 项目架构:B/S架构开 ...
轻触开源(三)-Gson项目源码解析_贰
2019独角兽企业重金招聘Python工程师标准>>> 转载请注明出处:https://my.oschina.net/u/874727/blog/750473 Q:102525062 ...
英皇cms影视网站系统源码_多种模板_自带采集_支持APP+pc+wap三端_（亲测可用有搭建教程）
源码介绍影视网站源码,自带采集功能多入口,带会员,卡密,代理等功能,免费模板可自选支持三端:pc+wap+app端,支持视频下载,有直播,开通会员等功能,带短视频,论坛等等功能自行搭建查看,一款功 ...
每日资源分享(32个uniapp项目源码涵盖商城团购等)
demo软件园每日更新资源,免费无套路分享地址:https://www.demosoftware.cn. 1.C#编程学习手册完整版PDF C# 是一种通用的.多范式的编程语言,它结合了面向对象. ...
超详细前端开发案例：品优购商场项目(二)
目录续前一篇内容 10. 品优购首页布局 10.4 nav 导航栏制作 10.5 footer 底部制作 10.6 mod_service 服务模块制作 10.7 main 主体模块制作 10.8 ...
收集了很多音乐播放器类的Android项目源码，非常不错的开源项目
JieCaoVideoPlayer立志成为Android平台使用最广泛的视频播放控件 http://neast.cn/forum.php?mod=viewthread&tid=61610&am ...
收集了很多音乐播放器类的Android项目源码，非常不错的开源项目【转】
from:http://blog.csdn.net/java173842219/article/details/54096598 JieCaoVideoPlayer立志成为Android平台使用最广泛 ...
前端与移动开发----购物商城案例（品优购PC项目上）
品优购项目-上目标能够遵循品优购代码规范能够在品优购首页中引入 favicon 图标能够说出三大标签 SEO 优化能够在品优购首页中使用字体图标能够说出 LOGO 需要哪些 SEO 优化 ...

CSS/HTML静态购物网站项目源码解析（品优购）——该项目包含主页、注册页、列表页三个网页

上图！

CSS/HTML静态购物网站项目源码解析（品优购）——该项目包含主页、注册页、列表页三个网页相关推荐

最新文章

热门文章