实战联系，写一个品优购类型的首页，做了几天，总算写完了，源码如下
这里贴出源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>品优购商城</title>
<style type="text/css">
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.ttf?tomleg');
src: url('fonts/icomoon.eot?tomleg#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?tomleg') format('truetype'), url('fonts/icomoon.woff?tomleg') format('woff'), url('fonts/icomoon.svg?tomleg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
*{
padding: 0;
margin: 0;
box-sizing:border-box;
}
body{
font:12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif; ;
color:#666;
}
a{
color:#666;
text-decoration:none;
}
a:hover{
color: #FF0000;
}
a.style_reg{
color:#c81623;
}
.shortcut{
width:100%;
height: 31px;
line-height: 31px;
background-color: #f1f1f1;
}
.w{
width:1200px;
margin:auto;
}
.fl{
float: left;
}
.fl ul li{
float: left;
list-style:none;
}
div.fr{
float: right;
}
div.fr ul li{
list-style: none;
float: left;
}
div.fr ul li:nth-child(even){
border-left: 1px solid #666;
height: 12px;
margin: 9px 12px;
}
a.icon::after{
content:"∨";
font-size: 14px;
margin-left: 5px;
}
.header{
position: relative;
height: 105px;
/* background-color: #00CCFF; */
}
.logo a{
display: block;
font-size: 0px;
background:url(images/logo.png) no-repeat;
width:171px;
height: 61px;
}
div.logo {
position: absolute;
top:25px;
width: 171px;
height: 61px;
}
div.search{
position: absolute;
left:346px;
top:25px;
width:538px;
height: 36px;
border: 2px solid #b1191a;
vertical-align: middle;
}
div.search input[type="search"]{
outline: none;
height: 32px;
width:454px;
padding-left: 10px;
border: none;
}
div.search button{
width:80px;
height: 34px;
border: none;
background-color:#b1191a ;
vertical-align: top;
color: #fff;
line-height: 32px;
outline: none;
}
div.hotwords{
position: absolute;
left:346px;
top:66px;
}
div.hotwords ul li{
list-style:none;
float: left;
}
div.hotwords ul li a{
margin:0 10px;
}
div.shopcar{
position: absolute;
width:140px;
height: 35px;
border:1px solid #dfdfdf;
background-color: #f7f7f7;
right:60px;
top:25px;
text-align: center;
line-height: 35px;
vertical-align:middle;
}
div.shopcar::after{
font-family:'icomoon';
content: '\e920';
font-size: 12px;
margin-left: 5px;
}
div.shopcar::before{
font-family:'icomoon';
content:'\e93a';
font-size: 12px;
margin-right: 5px;
color: #b1191a;
}
div.shopcar i.count{
font-style:normal;
position: absolute;
top:-5px;
height: 14px;
line-height: 12px;
color: #fff;
border:1px solid #e60012;
padding: 0px 5px;
background-color: #e60012;
border-radius: 7px 7px 7px 0px;
}
nav.nav{
height: 47px;
border-bottom: 2px solid #b1191a;
}
.dropdown{
width:210px;
background-color: #b1191a;
float: left;
}
.dt{
width: 100%;
height: 100%;
text-align: center;
color: #fff;
font-size:16px;
line-height: 45px;
}
.dd{
width: 100%;
height: 465px;
background-color: #c81623;
margin-top:2px;
}
.dd ul li{
height: 31px;
line-height: 31px;
margin-left: 2px;
font-size: 14px;
padding-left: 10px;
color: #fff;
position: relative;
}
.dd ul li:hover{
background-color: #f1f1f1;
}
.dd ul li a{
color: #fff;
font-size: 14px;
margin: 0 5px;
}
.dd ul li:hover a{
color: #c81623;
}
.dd ul li:after{
font-family:'icomoon';
content: "\e920";
position: absolute;
right: 10px;
top:5px;
font-size: 16px;
}
.navitems{
float: left;
}
.navitems ul li{
list-style: none;
float:left;
}
.navitems ul li a{
display: inline-block;
height: 45px;
line-height: 45px;
padding: 0 25px;
font-size: 16px;
}
.navitems ul li a:hover{
color: #c81623;
}
.main{
width: 980px;
height: 455px;
margin-left: 220px;
margin-top: 10px;
}
.focus{
width:721px;
height: 455px;
background-color: purple;
position: relative;
float: left;
}
.focus ul.rotation{
width: 100%;
height: 100%;
position: relative;
}
.focus ul.rotation li{
list-style:none;
float: left;
position: absolute;
top:0px;
left: 0px;
width: 100%;
height: 100%;
}
.focus a{
position: absolute;
color: #fff;
font-size: 20px;
z-index: 1;
width: 20px;
height: 30px;
background: rgba(0,0,0,0.2);
line-height: 30px;
text-align:center;
}
.focus a.focus_left{
top:50%;
margin-top: -15px;
left:0px;
}
.focus a.focus_right{
top:50%;
margin-top: -15px;
right:0px;
}
.circle{
position: absolute;
bottom:30px;
left: 50px;
}
div.circle ul.circle_ul li{
list-style: none;
float: left;
width: 14px;
height: 14px;
background-color: #fff;
margin-left: 5px;
border-radius:50%;
}
.circle.circle_ul ul{
border: 1px solid #f55;
}
.circle ul.circle_ul li.circle_check{
background-color: #FF0000;
}
div.newsflash{
width:250px;
height: 455px;
float: right;
}
div.news{
height: 165px;
border: 1px solid #e4e4e4;
}
div.news_head{
height: 35px;
border-bottom: 1px solid #e4e4e4;
padding: 0 15px;
}
div.news_head h5{
float: left;
height: 35px;
line-height: 35px;
font-size: 14px;
}
div.news_head a{
float:right;
height: 35px;
line-height: 35px;
}
div.news_head a:after{
font-family:'icomoon';
content: '\e920';
}
div.newsbox ul li{
list-style:none;
height: 24px;
line-height: 24px;
width: 100%;
white-space:nowrap;
overflow:hidden ;
padding: 0 5px;
text-overflow: ellipsis;
}
div.newsbox ul.newsbox_ul li a b{
margin: 0 2px;
}
div.news_body{
overflow:hidden;
border-left:1px solid #d1d1d1;
}
div.news_body ul li{
list-style: none;
width: 25%;
float: left;
border-right: 1px solid #d1d1d1;
border-bottom: 1px solid #d1d1d1;
text-align: center;
padding-bottom: 5px;
}
div.news_body ul li i{
display: inline-block;
width:24px;
height: 28px;
margin-top: 12px;
background: url(images/ico.png) no-repeat -19px -15px;
}
div.banneragain img{
position: relative;
width: 100%;
bottom: -10px;
}
.recom{
height: 163px;
background-color: #ebebeb;
margin-top: 12px;
}
.recom_hd{
float: left;
width: 205px;
height: 163px;
background-color: #5c5251;
text-align: center;
line-height: 163px;
}
.recom_hd img{
vertical-align: middle;
}
.recom_bd li{
list-style: none;
float: left;
position: relative;
}
.recom_bd{
overflow: hidden;
float: left;
}
.recom_bd li:not(:last-child):after{
content: '';
position: absolute;
top: 10px;
right: 0px;
height: 145px;
width: 1px;
background-color: #ccc;
}
.floor{
margin-top: 10px;
}
div.floor_head{
height: 35px;
line-height: 35px;
border-bottom: 2px solid #B1191A;
}
div.floor h3{
font-size: 18px;
color: #c81623;
float: left;
font-weight: 400;
}
div.floor .tab_list{
float: right;
}
div.tab_list ul li{
list-style:none;
float: left;
}
div.tab_list ul li:not(:last-child):after{
content: '';
display: inline-block;
width: 1px;
height: 18px;
background-color: #ddd;
vertical-align: middle;
margin: 0 15px;
}
div.floor_box{
height: 361px;
}
div.col_1{
float: left;
width: 210px;
height: 361px;
background-color: #f9f9f9;
text-align: center;
}
div.col_1 ul li{
list-style: none;
float: left;
width: 85px;
height: 34px;
line-height: 34px;
border-bottom: 1px solid #ccc;
margin-right: 10px;
}
div.col_2{
width: 329px;
float:left;
}
div.col_2 a img{
vertical-align:middle;
}
div.col_3{
width:221px;
float: left;
text-align: center;
}
div.col_3 a:first-child{
border-bottom: 1px solid #d1d1d1;
}
div.col_4{
float: left;
width: 221px;
border-left: 1px solid #d1d1d1;
}
div.col_5{
float: left;
width: 219px;
border-left: 1px solid #d1d1d1;
}
div.col_5 a:first-child {
border-bottom: 1px solid #d1d1d1;
}
div.footer{
height: 415px;
margin-top: 35px;
background-color: #f5f5f5;
}
div.footer ul.zp li{
width: 300px;
height: 50px;
list-style: none;
padding-left: 30px;
padding-top: 10px;
}
div.footer ul.zp li i{
display: block;
width: 50px;
height: 50px;
background: url(images/ico.png) no-repeat -252px -2px;
float: left;
margin-right: 5px;
}
div.mod_server{
height: 80px;
border-bottom: 1px solid #ccc;
}
div.mod_server ul.zp{
display: flex;
flex-direction:row;
justify-content:space-between;
}
div.mod_help{
height: 185px;
border-bottom: 1px solid #ccc;
padding-top: 20px;
padding-left: 50px;
}
div.mod_help dl:not(last-child){
width: 200px;
float: left;
}
div.mod_help dl:last-child{
width: auto;
text-align: center;
}
div.mod_help dl:last-child p{
margin-top: -4px;
}
div.mod_help dt{
font-size: 16px;
margin-bottom: 10px;
}
div.links ul li{
list-style: none;
}
div.links ul{
margin:0 auto;
display: flex;
flex-direction: row;
justify-content:space-between;
width: 60%;
}
div.links{
margin-top: 10px;
height: 35px;
line-height: 33px;
}
div.links ul li:not(:last-child):after{
display: inline-block;
content: '';
width: 1px;
height: 10px;
margin-left: 5px;
background-color: #888;
}
div.about_us{
margin-top: 10px;
text-align: center;
}
</style>
</head>
<body>
<!-- 快捷导航栏模块 -->
<section class="shortcut">
<div class="w">
<div class="fl">
<ul>
<li>品优购欢迎您！</li>
<li>
<a href="#">请登录</a> 
<a class="style_reg" href="#">免费注册</a>
</li>
</ul>
</div>
<div class="fr">
<ul>
<li><a href="#">我的订单</a></li>
<li></li>
<li><a class="icon" href="#">我的品优购</a></li>
<li></li>
<li><a href="#">品优购会员</a></li>
<li></li>
<li><a class="icon" href="#">企业采购</a></li>
<li></li>
<li><a href="#">关注品优购</a></li>
<li></li>
<li><a href="#">客户服务</a></li>
<li></li>
<li><a class="icon" href="#">网站导航</a></li>
</ul>
</div>
</div>
</section>
<!-- header头部模块制作 -->
<header class="header w">
<!-- logo模块 -->
<div class="logo">
<h1>
<a href="#" title="品优购商城">品优购</a>
</h1>
</div>
<!-- search搜索模块 -->
<div class="search">
<input type="search" placeholder="才聚软件"><button>搜索</button>
</div>
<!-- hotwords模块 -->
<div class="hotwords">
<ul>
<li><a class="style_reg" 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 class="shopcar">
我的购物车
<i class="count">8</i>
</div>
</header>
<nav class="nav">
<div class="w">
<div class="dropdown">
<div class="dt">全部商品分类</div>
<div class="dd">
<ul>
<li><a href="#">家用电器</a></li>
<li><a href="#">手机</a><a href="#">数码</a><a href="#">通讯</a></li>
<li><a href="#">电脑</a><a href="#">办公</a></li>
<li><a href="#">手机</a><a href="#">数码</a><a href="#">通讯</a></li>
<li><a href="#">电脑</a><a href="#">办公</a></li>
<li><a href="#">手机</a><a href="#">数码</a><a href="#">通讯</a></li>
<li><a href="#">电脑</a><a href="#">办公</a></li>
<li><a href="#">手机</a><a href="#">数码</a><a href="#">通讯</a></li>
<li><a href="#">电脑</a><a href="#">办公</a></li>
<li><a href="#">手机</a><a href="#">数码</a><a href="#">通讯</a></li>
<li><a href="#">电脑</a><a href="#">办公</a></li>
<li><a href="#">手机</a><a href="#">数码</a><a href="#">通讯</a></li>
<li><a href="#">电脑</a><a href="#">办公</a></li>
</ul>
</div>
</div>
<div class="navitems">
<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>
</ul>
</div>
</div>
</nav>
<!-- main主题模块 -->
<div class="w" >
<div class="main">
<div class="focus">
<a href="#" class="focus_left"><</a>
<a href="#" class="focus_right">></a>
<ul class="rotation">
<li><img src="./images/11.png"/></li>
<li><img src="./images/11.png"/></li>
</ul>
<div class="circle">
<ul class="circle_ul">
<li></li>
<li></li>
<li></li>
<li class="circle_check"></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<div class="newsflash">
<div class="news">
<div class="news_head">
<h5>品优购快报</h5>
<a href="">更多</a>
</div>
<div class="newsbox">
<ul class="newsbox_ul">
<li><a href="#"><b>[重磅]</b>南宁才聚软件项目开始了,坐等暴富，抓紧上车咯</a></li>
<li><a href="#"><b>[重磅]</b>南宁才聚软件项目开始了,坐等暴富，抓紧上车咯</a></li>
<li><a href="#"><b>[重磅]</b>南宁才聚软件项目开始了,坐等暴富，抓紧上车咯</a></li>
<li><a href="#"><b>[重磅]</b>南宁才聚软件项目开始了,坐等暴富，抓紧上车咯</a></li>
<li><a href="#"><b>[重磅]</b>南宁才聚软件项目开始了,坐等暴富，抓紧上车咯</a></li>
</ul>
</div>
</div>
<div class="news_body">
<ul>
<li><i></i><p>话费</p></li>
<li><i></i><p>话费</p></li>
<li><i></i><p>话费</p></li>
<li><i></i><p>话费</p></li>
<li><i></i><p>话费</p></li>
<li><i></i><p>话费</p></li>
<li><i></i><p>话费</p></li>
<li><i></i><p>话费</p></li>
<li><i></i><p>话费</p></li>
<li><i></i><p>话费</p></li>
<li><i></i><p>话费</p></li>
<li><i></i><p>话费</p></li>
</ul>
</div>
<div class="banneragain">
<img src="images/banneragain.png">
</div>
</div>
</div>
</div>
<!-- 推荐模块 -->
<div class="w recom">
<div class="recom_hd">
<img src="images/today.png"/>
</div>
<div class="recom_bd">
<ul>
<li><img src="images/biao.jpg"></li>
<li><img src="images/biao.jpg"></li>
<li><img src="images/biao.jpg"></li>
<li><img src="images/biao.jpg"></li>
</ul>
</div>
</div>
<!-- floor地板模块 -->
<div class="w floor">
<div class="floor_head">
<h3>家用电器</h3>
<div class="tab_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>
<li><a href="#">空气/净水</a></li>
<li><a href="#">新奇特</a></li>
<li><a href="#">高端电器</a></li>
</ul>
</div>
</div>
<div class="floor_box">
<div class="col_1">
<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>
<a href="#"><img src="images/floor1.png"></a>
</div>
<div class="col_2">
<a href="#"><img src="images/floor2.png"></a>
</div>
<div class="col_3">
<a href="#"><img src="images/floor3-1.png"></a>
<a href="#"><img src="images/floor3-2.png"></a>
</div>
<div class="col_4">
<a href="#"><img src="images/floor4.png"></a>
</div>
<div class="col_5">
<a href="#"><img src="images/floor5-1.png"></a>
<a href="#"><img src="images/floor5-2.png"></a>
</div>
</div>
</div>
<div class="w floor">
<div class="floor_head">
<h3>手机通讯</h3>
<div class="tab_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>
<li><a href="#">空气/净水</a></li>
<li><a href="#">新奇特</a></li>
<li><a href="#">高端电器</a></li>
</ul>
</div>
</div>
<div class="floor_box">
<div class="col_1">
<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>
<a href="#"><img src="images/floor1.png"></a>
</div>
<div class="col_2">
<a href="#"><img src="images/floor2.png"></a>
</div>
<div class="col_3">
<a href="#"><img src="images/floor3-1.png"></a>
<a href="#"><img src="images/floor3-2.png"></a>
</div>
<div class="col_4">
<a href="#"><img src="images/floor4.png"></a>
</div>
<div class="col_5">
<a href="#"><img src="images/floor5-1.png"></a>
<a href="#"><img src="images/floor5-2.png"></a>
</div>
</div>
</div>
<div class="w footer">
<div class="mod_server">
<ul class="zp">
<li><i></i><h3>正品保障</h3><p>正品保障，提供发票</p></li>
<li><i></i><h3>正品保障</h3><p>正品保障，提供发票</p></li>
<li><i></i><h3>正品保障</h3><p>正品保障，提供发票</p></li>
<li><i></i><h3>正品保障</h3><p>正品保障，提供发票</p></li>
</ul>
</div>
<div class="mod_help">
<dl>
<dt>购物指南</dt>
<dd>购物流程</dd>
<dd>会员介绍</dd>
<dd>生活旅游/团购</dd>
<dd>常见问题</dd>
<dd>大家电</dd>
<dd>联系客服</dd>
</dl>
<dl>
<dt>购物指南</dt>
<dd>购物流程</dd>
<dd>会员介绍</dd>
<dd>生活旅游/团购</dd>
<dd>常见问题</dd>
<dd>大家电</dd>
<dd>联系客服</dd>
</dl>
<dl>
<dt>购物指南</dt>
<dd>购物流程</dd>
<dd>会员介绍</dd>
<dd>生活旅游/团购</dd>
<dd>常见问题</dd>
<dd>大家电</dd>
<dd>联系客服</dd>
</dl>
<dl>
<dt>购物指南</dt>
<dd>购物流程</dd>
<dd>会员介绍</dd>
<dd>生活旅游/团购</dd>
<dd>常见问题</dd>
<dd>大家电</dd>
<dd>联系客服</dd>
</dl>
<dl>
<dt>购物指南</dt>
<dd>购物流程</dd>
<dd>会员介绍</dd>
<dd>生活旅游/团购</dd>
<dd>常见问题</dd>
<dd>大家电</dd>
<dd>联系客服</dd>
</dl>
<dl>
<dt>帮助中心</dt>
<a href="#">
<img src="./images/wx.jpg"/>
<p>品优购客户端</p>
</a>
</dl>
</div>
<div class="links">
<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="#">AboutUs</a></li>
<li><a href="#">EngList</a></li>
</ul>
</div>
<div class="about_us">
<p>地址：广西南宁市唐山路56号梦想创业城2栋638室 邮编：100888 电话：15277016815 传真：010-82935100 邮箱: admin#zkelm.com</p>
<p>京ICP备08001421号京公网安备110108007702</p>
</div>
</div>
</body>
</html>
图片无法上传附件，这里只提供一个附件下载给大家
商城源码下载：小程序商城源码