04_前端项目实战_day2
2021-12-08 本文已影响0人
Du1in9
六、logo和搜索区的实现
/*logo_search区的实现*/
.logo_search{
height: 100px;
}
.logo_search .left{
float: left;
width: 210px;
}
.logo_search .left a{
display: block;
margin-top: 10px;
}
.logo_search .center{
float: left;
width: 510px;
margin-top: 30px;
margin-left: 120px;
}
.logo_search .center>.clear>i{
float: left;
position: relative;
right: -20px;
top: 7px;
vertical-align: center;
}
.logo_search .center input{
float: left;
height: 32px;
border: solid 1px red;
}
.logo_search .center input[type='text']{
width: 420px;
height: 30px;
padding-left: 8px;
}
.logo_search .center input[type='submit']{
width: 60px;
background-color: red;
font-weight: bold;
color: white;
font-size: 15px;
}
.logo_search .center p{
padding-left: 15px;
padding-top: 5px;
}
.logo_search .center p>a{
padding-left: 3px;
}
.logo_search .right>i{
color: red;
}
.logo_search .right{
float: left;
width: 188px;
margin-top: 30px;
border:solid 1px #cccccc;
margin-left: 120px;
line-height: 30px;
text-align: center;
position: relative;
}
.logo_search .right>i.icon2{
display: inline-block;
transform: rotate(-90deg);
font-size: 15px;
}
.logo_search .right>span{
position: absolute;
left: 145px;
top: -5px;
background-color: red;
line-height: 15px;
padding: 0 4px;
color: white;
border-radius: 10px 10px 10px 0;
}
...
<div class="logo_search w clear">
<div class="left">
<a href="">
<img src="logo.png" alt="">
</a>
</div>
<div class="center">
<div class="clear">
<i class="iconfont icon-sousuo"></i>
<input type="text" placeholder=" 黑鲨手机">
<input type="submit" value="搜索">
</div>
<p>
<a href="">新款连衣裙 </a>
<a href="">四件套 </a>
<a href="">潮流T恤 </a>
<a href="">时尚女鞋 </a>
<a href="">短裤 </a>
<a href="">半身裙 </a>
<a href="">男士外套</a>
</p>
</div>
<div class="right">
<i class="iconfont icon-gouwuchekong icon1"></i>
<a>我的购物车</a>
<i class="iconfont icon-xiala icon2"></i>
<span>8</span>
</div>
</div>
七、主体1区右侧图标的实现
/*4、主体1区*/
.main1{
height: 465px;
position: relative;
overflow: hidden;
}
/*主体1区左侧*/
.main1>.left{
float: left;
width: 210px;
height: 465px;
background-color: #e20000;
position: relative;
}
/*主体1区中间*/
.main1>.center{
float: left;
margin-top: 10px;
margin-left: 4.5px;
}
/*主体1区右侧*/
.main1>.right{
float: right;
width: 240px;
height: 465px;
margin-top: 10px;
border: 2px solid gray;
}
.main1>.right>.right1{
height: 160px;
background: gray;
}
.main1>.right>.right2{
margin: 4px 0;
height: 210px;
}
.main1>.right>.right2>li{
float: left;
width: 59px;
height: 70px;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
.main1>.right>.right2>li>a{
display: block;
text-align: center;
}
.main1>.right>.right2>li>a>span{
display: inline-block;
width: 30px;
height: 30px;
margin: 10px 15px;
font-size: 25px;
}
.main1>.right>.right2>li>a>span:hover{
color: red;
}
.main1>.right>.right3{
height: 75px;
background: pink;
}
...
<!-- 4、主体1区的实现 -->
<div class="main1 clear">
<aside class="left">
</aside>
<div class="center">
<img src="banner.jpg">
</div>
<asied class="right">
<div class="right1"></div>
<div class="right2 clear">
<li><a href="">
<span class="iconfont icon-chongzhi"></span>
充值
</a></li>
<li><a href="">
<span class="iconfont icon-dianyingpiao"></span>
电影
</a></li>
<li><a href="">
<span class="iconfont icon-shouji"></span>
手机
</a></li>
<li><a href="">
<span class="iconfont icon-feiji"></span>
机票
</a></li>
<li><a href="">
<span class="iconfont icon-qichepiao"></span>
车票
</a></li>
<li><a href="">
<span class="iconfont icon-meishi"></span>
美食
</a></li>
<li><a href="">
<span class="iconfont icon-caipiao"></span>
彩票
</a></li>
<li><a href="">
<span class="iconfont icon-shijian"></span>
节日
</a></li>
<li><a href="">
<span class="iconfont icon-fapiao"></span>
发票
</a></li>
<li><a href="">
<span class="iconfont icon-wanwu"></span>
游玩
</a></li>
<li><a href="">
<span class="iconfont icon-fanchuan-lunchuan"></span>
船票
</a></li>
<li><a href="">
<span class="iconfont icon-clothes"></span>
话费
</a></li>
</div>
<div class="right3"></div>
</asied>
</div>
八、主体3区产品列表的实现
/*6、主体3区*/
.main3{
line-height: 3em;
}
.main3>.up{
border-bottom: solid 2px red;
}
.main3>.up>.right{
float: right;
}
.main3>.down{
height: 360px;
}
.main3>.down>div{
height: 360px;
width: 221px;
float: left;
border-right: 1px solid red;
}
.main3>.down>div:nth-child(1){
width: 187px;
border-right: none;
}
.main3>.down>div:nth-child(1)>ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 22px;
}
.main3>.down>div:nth-child(1)>ul>li{
width: 90px;
border-bottom: solid 1px gray;
text-align: center;
}
.main3>.down>div:nth-child(2){
width: 329px;
margin-left: 18px;
border-right: none;
}
.main3>.down>div:nth-child(5){
border-right: none;
}
.main3>.down .pic{
border-bottom: 1px solid red;
}
...
<!-- 6、主体3区的实现 -->
<div class="main3">
<div class="up">
<a href=""><b>家用电器</b></a>
<div class="right">
<a href="">大家电</a> |
<a href="">大家电</a> |
<a href="">大家电</a> |
<a href="">大家电</a> |
<a href="">大家电</a> |
<a href="">大家电</a> |
<a href="">大家电</a> |
<a href="">大家电</a>
</div>
</div>
<div class="down">
<div>
<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="down0.jpg">
</a>
</div>
<div><img src="down.jpg"></div>
<div>
<a href="">
<img src="down1.jpg" class="pic">
<img src="down2.jpg">
</a>
</div>
<div>
<a href=""><img src="down3.jpg"></a>
</div>
<div>
<a href="">
<img src="down4.jpg" class="pic">
<img src="down4.jpg">
</a>
</div>
</div>
</div>
<!-- 追加栏区 -->
<div class="main3">
<div class="up">
<a href=""><b>户外运动</b></a>
<div class="right">
<a href="">运动鞋</a> |
<a href="">运动鞋</a> |
<a href="">运动鞋</a> |
<a href="">运动鞋</a> |
<a href="">运动鞋</a> |
<a href="">运动鞋</a> |
<a href="">运动鞋</a> |
<a href="">运动鞋</a>
</div>
</div>
<div class="down">
<div>
<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="down00.jpg">
</a>
</div>
<div><img src="downn.jpg"></div>
<div>
<a href="">
<img src="down11.jpg" class="pic">
<img src="down22.jpg">
</a>
</div>
<div>
<a href=""><img src="down33.jpg"></a>
</div>
<div>
<a href="">
<img src="down44.jpg" class="pic">
<img src="down00.jpg">
</a>
</div>
</div>
</div>
九、主体2区产品列表的实现
/*5、主体2区*/
.main2{
margin:15px 0;
}
.main2>.left{
float: left;
width: 200px;
height: 163px;
background-color: #604f4d;
}
.main2>.left>img{
margin: 15px auto;
}
.main2>.left>p{
font-size: 20px;
font-weight: bold;
text-align: center;
color: white;
}
.main2>.right{
float: left;
width: 1000px;
height: 163px;
box-sizing: border-box;
padding: 10px 0;
background-color: #ebebeb;
column-width: 248px;
column-gap: 2px;
column-rule: 1px gray solid;
}
...
<!-- 5、主体2区的实现 -->
<div class="main2">
<div class="left clear">
<img src="clock.jpg">
<p>今日推荐</p>
</div>
<div class="right">
<img src="right.jpg">
<img src="right.jpg">
<img src="right.jpg">
<img src="right.jpg">
</div>
</div>
十、底部区域的实现
/*8、底部区域的实现*/
footer .footer1, .footer2{
height: 200px;
border-bottom: 2px solid #cccccc;
display: flex;
}
footer .footer1>img{
float: left;
padding-right: 20px;
padding-top: 100px;
height: 60px;
}
footer .footer2{
height: 230px;
}
footer .footer2>ul{
margin-top: 25px;
margin-left: 50px;
width: 250px;
height: 100px;
float: left;
}
footer .footer2>ul>li{
font-size: 14px;
padding-top: 5px;
}
footer .footer2>ul>.ad{
font-size: 20px;
font-weight: bold;
}
footer .footer3{
width: 1184px;
margin: 20px auto;
}
footer .footer3>a{
font-size: 14px;
padding: 0 5px;
}
footer img{
margin: 10px auto;
}
...
<!-- 8、底部区域的实现 -->
<footer>
<div class="w">
<div class="footer1">
<img src="footer1.jpg">
<img src="footer2.jpg">
<img src="footer3.jpg">
<img src="footer4.jpg">
</div>
<div class="footer2">
<ul>
<li class="ad">购物指南</li>
<li>购物流程</li>
<li>会员介绍</li>
<li>生活旅行</li>
<li>常见问题</li>
<li>大家电</li>
<li>联系客服</li>
</ul>
<ul>
<li class="ad">配送方式</li>
<li>上门自提</li>
<li>211限时达</li>
<li>配送服务查询</li>
<li>配送费收取标准</li>
<li>海外配送</li>
</ul>
<ul>
<li class="ad">支付方式</li>
<li>货到付款</li>
<li>在线支付</li>
<li>分期付款</li>
<li>公司转账</li>
</ul>
<ul>
<li class="ad">售后服务</li>
<li>售后政策</li>
<li>价格保护</li>
<li>退款说明</li>
<li>返修/退换货</li>
<li>取消订单</li>
</ul>
<ul>
<li class="ad">特色服务</li>
<li>夺宝岛</li>
<li>DIY装机</li>
<li>延保服务</li>
<li>优品E卡</li>
<li>优品通信</li>
</ul>
</div>
<div class="footer3">
<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="">风险监测 </a> |
<a href="">隐私政策 </a> |
<a href="">优品公益 </a> |
<a href="">English Site </a> |
<a href="">Media & IR </a>
</div>
</div>
<img src="bottom.jpg">
</footer>
十一、最终效果
init.css
/*整体演示设置*/
*{
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
font-style: normal;
font-style: normal;
color: #666560;
text-decoration: none;
}
a{
color: #666560;
}
a:hover{
color: red;
}
.w{
width: 1200px;
margin: 0 auto;
}
img{
border: none;
display: block;
}
.clear::after{
content: "";
display: block;
clear: both;
visibility: hidden;
zoom:1;
height: 0;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- 网页描述 -->
<title>优品购—精品特卖，天天特价9.9包邮秒杀 精品购物</title>
<!-- 网页小图标 -->
<link rel="icon" type="text/css" href="favicon.ico">
<!-- 初始化css样式 -->
<link rel="stylesheet" type="text/css" href="init.css">
<!-- iconfont资源包 -->
<link rel="stylesheet" href="icon_font/iconfont.css">
<link rel="stylesheet" href="icon_font2/iconfont.css">
<link rel="stylesheet" href="icon_font3/iconfont.css">
<!-- css样式 -->
<style type="text/css">
body{
min-width: 1200px;
min-height: 2450px;
background-color: #F4F4F4;
}
/*1、顶部广告的实现*/
.top_ad{
background: url(top_ad.jpg) center center no-repeat black;
height: 80px;
}
.top_ad>.w{
text-align: right;
padding-top: 5px;
}
.top_ad>.w>a{
float: right;
margin-right: 5px;
}
/*2、主导航的实现*/
.top_nav{
line-height: 30px;
background: #e5e5e3;
overflow: hidden;
}
.top_nav>.w{
height: 30px;
}
.top_nav>.w>.left{
float: left;
}
.top_nav>.w>.right{
float: right;
color: #cccccc;
}
.top_nav>.w>.right>a{
padding:0 5px;
}
.top_nav>.w>.right>a:hover>span{
color: red;
}
.red{
color: red;
}
/*3、商品分类区的实现*/
.nav2{
height: 45px;
border-bottom:solid 5px #ca0000;
}
.nav2>.w{
height: 45px;
line-height: 45px;
}
.nav2>.w>.left{
float: left;
width: 210px;
background-color: #ca0000;
color: white;
font-size: 18px;
font-weight: bold;
text-align: center;
}
.nav2>.w>.right{
float: left;
padding-left: 35px;
}
.nav2>.w>.right>li{
float: left;
padding-right: 25px;
}
.nav2>.w>.right>li>a{
font-size: 18px;
font-weight: bold;
}
.nav2>a{
display: block;
text-align: center;
background: url(bg.jpg) center center no-repeat;
height: 475px;
position: relative;
top:5px;
}
/*4、主体1区*/
.main1{
height: 465px;
position: relative;
overflow: hidden;
}
/*主体1区左侧*/
.main1>.left{
float: left;
width: 210px;
height: 465px;
background-color: #e20000;
position: relative;
padding-top: 8px;
}
.main1>.left>ul>li{
width: 210px;
}
.main1>.left>ul>li:hover{
background-color: pink;
}
.main1>.left>ul a{
color: white;
line-height: 28px;
padding-left: 15px;
font-size: 14px;
}
/*主体1区中间*/
.main1>.center{
float: left;
margin-top: 10px;
margin-left: 4.5px;
}
/*主体1区右侧*/
.main1>.right{
float: right;
width: 242px;
height: 465px;
margin-top: 10px;
}
.main1>.right>.right1{
height: 160px;
line-height: 25px;
border: 1px gray solid;
}
.main1>.right>.right1>.up{
border-bottom: 1px solid gray;
}
.main1>.right>.right1>.up span{
font-size: 14px;
font-weight: bold;
padding-left: 10px;
}
.main1>.right>.right1>.up a{
font-size: 14px;
padding-left: 110px;
}
.main1>.right>.right1>.down a{
font-size: 14px;
padding-left: 20px;
}
.main1>.right>.right2{
margin: 4px 0;
height: 210px;
border-top: 1px solid gray;
border-left: 1px solid gray;
}
.main1>.right>.right2>li{
float: left;
width: 59px;
height: 70px;
border-right: 1px solid gray;
border-bottom: 1px solid gray;
}
.main1>.right>.right2>li>a{
display: block;
text-align: center;
}
.main1>.right>.right2>li>a>span{
display: inline-block;
width: 30px;
height: 30px;
margin: 10px 15px;
font-size: 25px;
}
.main1>.right>.right2 span:hover{
color: red;
}
.main1>.right>.right3{
height: 75px;
background: pink;
}
/*5、主体2区*/
.main2{
margin:15px 0;
}
.main2>.left{
float: left;
width: 200px;
height: 163px;
background-color: #604f4d;
}
.main2>.left>img{
margin: 15px auto;
}
.main2>.left>p{
font-size: 20px;
font-weight: bold;
text-align: center;
color: white;
}
.main2>.right{
float: left;
width: 1000px;
height: 163px;
box-sizing: border-box;
padding: 10px 0;
background-color: #ebebeb;
column-width: 248px;
column-gap: 2px;
column-rule: 1px gray solid;
}
/*6、主体3区*/
.main3{
line-height: 3em;
}
.main3>.up{
border-bottom: solid 2px red;
}
.main3>.up>.right{
float: right;
}
.main3>.down{
height: 360px;
}
.main3>.down>div{
height: 360px;
width: 221px;
float: left;
border-right: 1px solid red;
}
.main3>.down>div:nth-child(1){
width: 187px;
border-right: none;
}
.main3>.down>div:nth-child(1)>ul{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 22px;
}
.main3>.down>div:nth-child(1)>ul>li{
width: 90px;
border-bottom: solid 1px gray;
text-align: center;
}
.main3>.down>div:nth-child(2){
width: 329px;
margin-left: 18px;
border-right: none;
}
.main3>.down>div:nth-child(5){
border-right: none;
}
.main3>.down .pic{
border-bottom: 1px solid red;
}
/*7、logo_search区的实现*/
.logo_search{
height: 100px;
}
.logo_search .left{
float: left;
width: 210px;
}
.logo_search .left a{
display: block;
margin-top: 10px;
}
.logo_search .center{
float: left;
width: 510px;
margin-top: 30px;
margin-left: 120px;
}
.logo_search .center>.clear>i{
float: left;
position: relative;
right: -20px;
top: 7px;
vertical-align: center;
}
.logo_search .center input{
float: left;
height: 32px;
border: solid 1px red;
}
.logo_search .center input[type='text']{
width: 420px;
height: 30px;
padding-left: 8px;
}
.logo_search .center input[type='submit']{
width: 60px;
background-color: red;
font-weight: bold;
color: white;
font-size: 15px;
}
.logo_search .center p{
padding-left: 15px;
padding-top: 5px;
}
.logo_search .center p>a{
padding-left: 3px;
}
.logo_search .right>i{
color: red;
}
.logo_search .right{
float: left;
width: 188px;
margin-top: 30px;
border:solid 1px #cccccc;
margin-left: 120px;
line-height: 30px;
text-align: center;
position: relative;
}
.logo_search .right>i.icon2{
display: inline-block;
transform: rotate(-90deg);
font-size: 15px;
}
.logo_search .right>span{
position: absolute;
left: 145px;
top: -5px;
background-color: red;
line-height: 15px;
padding: 0 4px;
color: white;
border-radius: 10px 10px 10px 0;
}
/*8、底部区域的实现*/
footer .footer1, .footer2{
height: 200px;
border-bottom: 2px solid #cccccc;
display: flex;
}
footer .footer1>img{
float: left;
padding-right: 20px;
padding-top: 100px;
height: 60px;
}
footer .footer2{
height: 230px;
}
footer .footer2>ul{
margin-top: 25px;
margin-left: 50px;
width: 250px;
height: 100px;
float: left;
}
footer .footer2>ul>li{
font-size: 14px;
padding-top: 5px;
}
footer .footer2>ul>.ad{
font-size: 20px;
font-weight: bold;
}
footer .footer3{
width: 1184px;
margin: 20px auto;
}
footer .footer3>a{
font-size: 14px;
padding: 0 5px;
}
footer img{
margin: 10px auto;
}
</style>
</head>
<body>
<!-- 1、顶部广告的实现 -->
<div class="top_ad">
<div class="w">
<a href="" title="关闭广告">
<img src="button.jpg" alt="">
</a>
</div>
</div>
<!-- 2、主导航的实现 -->
<div class="top_nav">
<div class="w">
<div class="left">
欢迎来拼邮购
请<a href="">登陆</a>
<a href="" class="red">免费注册</a>
</div>
<div class="right">
<a href="">我的订单<span class="iconfont icon-xiala-"></span></a> |
<a href="">购物车</a> |
<a href="">收藏夹</a> |
<a href="">手机版</a> |
<a href="">商家支持</a> |
<a href="">网站导航<span class="iconfont icon-xiala-"></span></a> |
<a href="">商品分类<span class="iconfont icon-xiala-"></span></a> |
<a href="">联系客服</a>
</div>
</div>
</div>
<!-- 7、logo_search区的实现 -->
<div class="logo_search w clear">
<div class="left">
<a href="">
<img src="logo.png" alt="">
</a>
</div>
<div class="center">
<div class="clear">
<i class="iconfont icon-sousuo"></i>
<input type="text" placeholder=" 黑鲨手机">
<input type="submit" value="搜索">
</div>
<p>
<a href="">新款连衣裙 </a>
<a href="">四件套 </a>
<a href="">潮流T恤 </a>
<a href="">时尚女鞋 </a>
<a href="">短裤 </a>
<a href="">半身裙 </a>
<a href="">男士外套</a>
</p>
</div>
<div class="right">
<i class="iconfont icon-gouwuchekong icon1"></i>
<a>我的购物车</a>
<i class="iconfont icon-xiala icon2"></i>
<span>8</span>
</div>
</div>
<!-- 3、商品分类区的实现 -->
<div class="nav2">
<div class="w">
<div class="left">全部商品分类</div>
<ul class="right">
<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>
<a href=""></a>
</div>
<div class="main w">
<div class="w">
<!-- 4、主体1区的实现 -->
<div class="main1 clear">
<aside class="left">
<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="">艺术 / 礼品鲜花 / 农资绿植 > </a></li>
<li><a href="">医药保健 / 计生情趣 > </a></li>
<li><a href="">图书 / 文娱 / 教育 / 电子书 > </a></li>
<li><a href="">机票 / 酒店 / 旅游 / 生活 > </a></li>
<li><a href="">理财 / 众筹 / 白条 / 保险 > </a></li>
</ul>
</aside>
<div class="center">
<img src="banner.jpg">
</div>
<asied class="right">
<div class="right1">
<div class="up">
<span>品优购快报</span>
<a href="">更多></a>
</div>
<div class="down">
<p><a href="">[特惠]荣耀超级新品日</a></p>
<p><a href="">[特惠]荣耀超级新品日</a></p>
<p><a href="">[特惠]荣耀超级新品日</a></p>
<p><a href="">[特惠]荣耀超级新品日</a></p>
<p><a href="">[特惠]荣耀超级新品日</a></p>
</div>
</div>
<div class="right2 clear">
<li><a href="">
<span class="iconfont icon-chongzhi"></span>
充值
</a></li>
<li><a href="">
<span class="iconfont icon-dianyingpiao"></span>
电影
</a></li>
<li><a href="">
<span class="iconfont icon-shouji"></span>
手机
</a></li>
<li><a href="">
<span class="iconfont icon-feiji"></span>
机票
</a></li>
<li><a href="">
<span class="iconfont icon-qichepiao"></span>
车票
</a></li>
<li><a href="">
<span class="iconfont icon-meishi"></span>
美食
</a></li>
<li><a href="">
<span class="iconfont icon-caipiao"></span>
彩票
</a></li>
<li><a href="">
<span class="iconfont icon-shijian"></span>
节日
</a></li>
<li><a href="">
<span class="iconfont icon-fapiao"></span>
发票
</a></li>
<li><a href="">
<span class="iconfont icon-wanwu"></span>
游玩
</a></li>
<li><a href="">
<span class="iconfont icon-fanchuan-lunchuan"></span>
船票
</a></li>
<li><a href="">
<span class="iconfont icon-clothes"></span>
话费
</a></li>
</div>
<div class="right3">
<img src="right3.jpg">
</div>
</asied>
</div>
<!-- 5、主体2区的实现 -->
<div class="main2">
<div class="left clear">
<img src="clock.jpg">
<p>今日推荐</p>
</div>
<div class="right">
<img src="right.jpg">
<img src="right.jpg">
<img src="right.jpg">
<img src="right.jpg">
</div>
</div>
<!-- 6、主体3区的实现 -->
<div class="main3">
<div class="up">
<a href=""><b>家用电器</b></a>
<div class="right">
<a href="">大家电</a> |
<a href="">大家电</a> |
<a href="">大家电</a> |
<a href="">大家电</a> |
<a href="">大家电</a> |
<a href="">大家电</a> |
<a href="">大家电</a> |
<a href="">大家电</a>
</div>
</div>
<div class="down">
<div>
<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="down0.jpg">
</a>
</div>
<div><img src="down.jpg"></div>
<div>
<a href="">
<img src="down1.jpg" class="pic">
<img src="down2.jpg">
</a>
</div>
<div>
<a href=""><img src="down3.jpg"></a>
</div>
<div>
<a href="">
<img src="down4.jpg" class="pic">
<img src="down4.jpg">
</a>
</div>
</div>
</div>
<!-- 追加栏区 -->
<div class="main3">
<div class="up">
<a href=""><b>户外运动</b></a>
<div class="right">
<a href="">运动鞋</a> |
<a href="">运动鞋</a> |
<a href="">运动鞋</a> |
<a href="">运动鞋</a> |
<a href="">运动鞋</a> |
<a href="">运动鞋</a> |
<a href="">运动鞋</a> |
<a href="">运动鞋</a>
</div>
</div>
<div class="down">
<div>
<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="down00.jpg">
</a>
</div>
<div><img src="downn.jpg"></div>
<div>
<a href="">
<img src="down11.jpg" class="pic">
<img src="down22.jpg">
</a>
</div>
<div>
<a href=""><img src="down33.jpg"></a>
</div>
<div>
<a href="">
<img src="down44.jpg" class="pic">
<img src="down11.jpg">
</a>
</div>
</div>
</div>
</div>
</div>
<!-- 8、底部区域的实现 -->
<footer>
<div class="w">
<div class="footer1">
<img src="footer1.jpg">
<img src="footer2.jpg">
<img src="footer3.jpg">
<img src="footer4.jpg">
</div>
<div class="footer2">
<ul>
<li class="ad">购物指南</li>
<li>购物流程</li>
<li>会员介绍</li>
<li>生活旅行</li>
<li>常见问题</li>
<li>大家电</li>
<li>联系客服</li>
</ul>
<ul>
<li class="ad">配送方式</li>
<li>上门自提</li>
<li>211限时达</li>
<li>配送服务查询</li>
<li>配送费收取标准</li>
<li>海外配送</li>
</ul>
<ul>
<li class="ad">支付方式</li>
<li>货到付款</li>
<li>在线支付</li>
<li>分期付款</li>
<li>公司转账</li>
</ul>
<ul>
<li class="ad">售后服务</li>
<li>售后政策</li>
<li>价格保护</li>
<li>退款说明</li>
<li>返修/退换货</li>
<li>取消订单</li>
</ul>
<ul>
<li class="ad">特色服务</li>
<li>夺宝岛</li>
<li>DIY装机</li>
<li>延保服务</li>
<li>优品E卡</li>
<li>优品通信</li>
</ul>
</div>
<div class="footer3">
<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="">风险监测 </a> |
<a href="">隐私政策 </a> |
<a href="">优品公益 </a> |
<a href="">English Site </a> |
<a href="">Media & IR </a>
</div>
</div>
<img src="bottom.jpg">
</footer>
</body>
</html>
改成自己喜欢的风格~
