由毫无前端经验经过了两个礼拜的学习，然后花费一天的时间独立自主的完成了仿美丽说的官方页面。
HTML中纯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>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="css/reset.css">
<style>
/* header头部导航 */
header{
height: 30px;
background-color: #f8f8f8;
}
.nav{
width: 1200px;
margin: 0 auto;
height: 30px;
background: #f8f8f8;
}
.nav-{
width: 910px;
height: 30px;
background-color: #f8f8f8;
float: right;
}
.nav- ul li{
display: inline-block;
/* line-height: 30px; */
padding: 0px 10px;
margin-top: 4px;
border-right: 1px dashed black;
}
.nav- ul li a:hover{
color: #ff3366;
}
.nav- ul li:nth-of-type(9){
border-right: 1px dashed #f8f8f8;
}
.nav- a{
text-decoration: none;
color: black;
display: block;
width: 100%;
height: 100%;
line-height: 20px;
}
.spirit{
width: 20px;
height: 20px;
background-color: #f8f8f8;
/* display: block; */
float: left;
background-image: url(./10-CSS-作业素材-美丽说/images/top_nav.png);
background-repeat: no-repeat;
background-position: -24px 1px;
}
.nav- ul li:nth-of-type(5){
position: relative;
}
.nav- ul li:nth-of-type(8){
position: relative;
}
.nav- ul li:nth-of-type(5):hover .menu{
display: block;
}
.nav- ul li:nth-of-type(8):hover .menu{
display: block;
}
.menu{
display: none;
}
.menu ul{
position: absolute;
background-color: #f8f8f8;
top: 6px;
left: -4px;
margin-top: 20px;
/* padding-top: 2px; */
/* z-index: -100; */
}
.menu ul li{
display: block;
line-height: 30px;
width: 90px;
text-align: center;
border-right: 1px dashed #f8f8f8;
color: black;
}
.menu ul li:hover{
color: #ff3366;
}
.clearfix{
content: "";
clear: both;
}
/* 次头部 */
.search{
width: 1200px;
height: 120px;
margin: 30px auto;
/* background-color: pink; */
}
.search-logo img{
width: 200px;
float: left;
}
.search-right img{
height: 120px;
float: right;
}
.search-case{
/* background-color: skyblue; */
width: 720px;
float: right;
}
.search-case-baby{
width: 130px;
height: 30px;
background-color: #ff3d6e;
line-height: 30px;
text-align: center;
position: relative;
}
.search-case-baby ul li{
display: inline-block;
padding: 0;
width: 65px;
color: white;
}
.search-case-baby ul li:nth-of-type(1){
background-color: #ff3d6e;
}
.search-case-baby ul li:nth-of-type(2){
background-color: #f3f3f3;
color: black;
}
.search-case-baby ul li a{
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: black;
}
.search-case-baby ul li a:focus{
background-color: #ff3d6e;
color: #fff;
}
.input input:nth-of-type(1){
width: 500px;
height: 30px;
border: 2px solid #fd3b6c;
}
.input input:nth-of-type(2){
width: 70px;
height: 36px;
border: 2px solid #fd3b6c;
background-image: url(./10-CSS-作业素材-美丽说/images/fangdajing.png);
background-color: #ff3d6e;
background-repeat: no-repeat;
background-position: center;
position: absolute;
}
input:focus {
outline: 0;
}
.search-case-select{
margin-top: 15px;
}
.search-case-select ul li{
font-size: 14px;
display: inline-block;
margin-right: 5px;
}
.search-case-select ul li:nth-of-type(1),li:nth-of-type(3),li:nth-of-type(4),li:nth-of-type(9),li:nth-of-type(11){
color: #ff3d6e;
}
.search-case-select ul li:hover{
cursor:pointer;
}
/* 首页 上衣 裙子 */
.division{
border-bottom: 1px solid black;
}
.division-{
width: 1200px;
height: 30px;
/* background-color: skyblue; */
margin: 0 auto;
}
.division- ul li{
display: inline-block;
padding-right: 70px;
}
.division- a{
text-decoration: none;
color: #000;
font-size: 16px;
font-weight: 600;
line-height: 30px;
height: 100%;
display: block;
}
.division- ul li:nth-of-type(1) a{
border-bottom: 4px solid #ff3d6e;
color: #ff3d6e;
}
.division- ul li:hover a{
border-bottom: 4px solid #ff3d6e;
color: #ff3d6e;
}
/* 图片内容 */
.main{
width: 1200px;
margin: 10px auto;
}
.one{
width: 1200px;
height: 400px;
background-image: url(./10-CSS-作业素材-美丽说/images/banner01.jpg);
position: relative;
animation: mymove 20s infinite;
}
@keyframes mymove{
25%{background-image: url(./10-CSS-作业素材-美丽说/images/banner02.jpg);}
50%{background-image: url(./10-CSS-作业素材-美丽说/images/banner03.jpg);}
75%{background-image: url(./10-CSS-作业素材-美丽说/images/banner04.jpg);}
100%{background-image: url(./10-CSS-作业素材-美丽说/images/banner01.jpg);}
}
li:hover{
cursor:pointer;
}
.one-left{
position: absolute;
top: 200px;
}
.one-right{
position: absolute;
top: 200px;
left: 1164px;
}
/* 点点的变化 */
.roll ul{
position: absolute;
padding: 0;
right: 525px;
bottom: 20px;
width: 94px;
height: 16px;
border-radius: 10px;
background: transparent
;
}
.roll ul li{
float: left;
list-style: none;
width: 8px;
height: 8px;
background:#dee1e8;
margin-left: 7px;
margin-top: 2px;
border-radius: 15px;
border: 3px solid #b5b5b5;
}
.roll ul li:nth-of-type(1){
animation: mymove1 20s infinite;
}
@keyframes mymove1{
0%{width: 16px;}
10%{width: 16px;}
11%{width: 8px;}
}
.roll ul li:nth-of-type(2){
animation: mymove2 20s infinite;
}
@keyframes mymove2{
19%{width: 8px;}
20%{width: 16px;}
39%{width: 16px;}
40%{width: 8px;}
}
.roll ul li:nth-of-type(3){
animation: mymove3 20s infinite;
}
@keyframes mymove3{
40%{width: 8px;}
45%{width: 16px;}
59%{width: 16px;}
60%{width: 8px;}
}
.roll ul li:nth-of-type(4){
animation: mymove4 20s infinite;
}
@keyframes mymove4{
60%{width: 8px;}
61%{width: 16px;}
99%{width: 16px;}
100%{width: 8px;}
}
.roll a{
width: 100%;
height: 100%;
font-size: 12px;
color: transparent;
position: relative;
top: -12px;
left: 3px;
}
.roll li:hover{
background: #dee1e8;
/* width: 16px; */
cursor: pointer;
}
.two{
margin-top: 20px;
}
.two img{
width: 296px;
height: 170px;
}
.three{
margin-top: 20px;
}
.three-top ul{
width: 1200px;
text-align: center;
position: relative;
}
.three-top ul li{
display: inline-block;
font-size: 16px;
padding: 5px 15px;
position: relative;
}
.three-top ul li:nth-of-type(3){
position: absolute;
right: 0;
}
.heng{
width: 35px;
height: 1px;
font-weight: 700;
/* color: #ff3d6e; */
border-bottom: 5px solid #ff3d6e;
position: absolute;
top: 25px;
left: 30px;
}
.three-bottom ul li{
width: 215px;
height: 400px;
display: inline-block;
padding: 10px 10px;
}
.three-bottom a{
text-decoration: none;
color: #e50f51;
font-size: 14px;
}
.three-bottom ul li img{
width: 215px;
margin: 15px 0px;
}
.three-bottom a span:nth-of-type(2){
float: right;
color: #b0b0b0;
font-size: 12px;
margin-top: 2px;
}
.start{
width: 15px;
height: 14px;
/* background-color: skyblue; */
float: right;
background-image: url(./10-CSS-作业素材-美丽说/images/top_nav.png);
background-repeat: no-repeat;
background-size: 230px 14px;
background-position: -73px 0px;
}
.three-bottom ul li a .title img{
width: 40px;
height: 20px;
}
.title p{
font-size: 12px;
width: 160px;
height: 12px;
color: #000;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
float: right;
margin: 20px 0px;
}
.four{
margin-top: 20px;
}
.four-top ul li{
display: inline-block;
}
.four-top ul li:nth-of-type(1){
font-size: 20px;
font-weight: 700;
}
.four-top ul li:nth-of-type(2){
float: right;
}
.four-bottom{
margin-top: 20px;
}
.four-bottom ul li{
display: inline-block;
width: 378px;
height: 400px;
margin-right: 16px;
position: relative;
}
.four-bottom ul li:nth-of-type(1) img{
width: 380px;
height: 210px;
background-image: url(./10-CSS-作业素材-美丽说/images/newProduct01.png);
background-size: 380px 210px;
}
.four-bottom ul li:nth-of-type(2) img{
width: 380px;
height: 210px;
background-image: url(./10-CSS-作业素材-美丽说/images/newProduct02.png);
background-size: 380px 210px;
}
.four-bottom ul li:nth-of-type(3) img{
width: 380px;
height: 210px;
background-image: url(./10-CSS-作业素材-美丽说/images/newProduct03.png);
background-size: 380px 210px;
}
.goods{
font-size: 20px;
position: absolute;
left: 137px;
top: 144px;
color: white;
}
.goods::after{
content: "";
border: 8px solid transparent;
border-left: 8px solid white;
position: absolute;
top: 3px;
}
.four-bottom ul li ul li{
width: 100px;
height: 150px;
/* margin: 15px 17px 10px 5px; */
/* padding: 15px 11px; */
text-align: center;
font-size: 12px;
line-height: 20px;
color: black;
}
.four-bottom ul li ul li:nth-of-type(1){
margin: 15px 30px 10px 0px;
}
.four-bottom ul li ul li:nth-of-type(2){
margin: 15px 0px 10px 0px;
}
.four-bottom ul li ul li:nth-of-type(3){
margin: 15px 0px 10px 30px;
}
/* 页脚 */
footer{
margin: 20px auto;
background-color: #f5f5f5;
}
.footer-{
width: 1200px;
height: 250px;
margin:0 auto;
border-bottom: 1px solid #e7eaed;
/* background-color: skyblue; */
}
.footer-left ul{
display: inline-block;
width: 170px;
margin-top: 30px;
float: left;
}
.footer-left ul li{
margin: 10px;
padding: 7px;
}
.footer-left ul li a{
text-decoration: none;
color: black;
font-size: 12px;
}
.footer-left ul li:nth-of-type(1){
font-size: 16px;
font-weight: 600;
}
.contact{
width: 18px;
height: 18px;
background-image: url(./10-CSS-作业素材-美丽说/images/footer-icon.png);
background-position: 0px 0px;
float: left;
}
.footer-right ul{
float: right;
}
.footer-right ul li{
display: inline-block;
width: 150px;
height: 150px;
margin-top: 30px;
text-align: center;
font-size: 16px;
font-weight: 600;
line-height: 40px;
margin-right: 40px;
/* background-color: pink; */
}
.footer-bottom{
width: 1200px;
margin: 20px auto;
text-align: center;
font-size: 12px;
padding-bottom: 20px;
color: gray;
}
/* 侧边栏 */
.sidebar{
position: fixed;
z-index: 1000;
right: 0px;
top: 0px;
}
.sidebar- ul{
width: 40px;
font-size: 14px;
background-color: #f6f6f6;
}
.sidebar- ul li{
width: 16px;
writing-mode: vertical-rl;
padding: 5px;
margin: 0 auto;
border-top: 1px solid #dee1e6;
}
.sidebar- ul li:nth-of-type(1){
height: 40px;
border-top: 1px solid transparent;
}
.sidebar- ul li:nth-of-type(2){
position: relative;
}
.sidebar- ul li:nth-of-type(2):hover .erweima{
display: block;
}
.sidebar- a{
text-decoration: none;
color: black;
}
.phone{
width: 14px;
height: 14px;
/* background-color: orange; */
float: left;
}
.phone img{
width: 14px;
height: 14px;
}
.erweima{
width: 120px;
height: 120px;
background-color: orange;
position: absolute;
left: -127px;
top: 0px;
background-image: url(./10-CSS-作业素材-美丽说/images/meili-app-qrcode140X140.png);
background-size: 120px 120px;
display: none;
}
.trigon{
width: 0;
height: 0;
border: 10px solid transparent;
border-left: 10px solid white;
position: absolute;
left: 120px;
top: 45px;
}
</style>
</head>
<body>
<!-- 头部 -->
<header>
<nav class="nav">
<div class="nav- clearfix">
<ul>
<li><a href="#">
<div class="spirit"></div>
<span> 微信登录</span></a></li>
<li><a href="#">
<div class="spirit" style="background-position: -50px 2px;"></div>
<span> QQ登录</span></a></li>
<li><a href="#">登录</a></li>
<li><a href="#">注册</a></li>
<li><a href="#">
<div class="spirit" style="background-position: -74px 2px;"></div>
<span> 我的收藏</span></a>
<div class="menu">
<ul>
<li>收藏宝贝</li>
<li>收藏店铺</li>
</ul>
</div>
</li>
<li><a href="#">
<div class="spirit" style="background-position: -101px 2px;"></div>
<span> 我的购物车</span></a></li>
<li><a href="#">
<div class="spirit" style="background-position: -126px 2px;"></div>
<span> 我的订单</span></a></li>
<li><a href="#"><span>帮助中心 </span>
<div class="spirit" style="background-position: -173px 2px;float: right;"></div>
</a>
<div class="menu">
<ul>
<li>卖家服务</li>
<li>商家服务</li>
<li>规则中心</li>
</ul>
</div>
</li>
<li><a href="#">商家后台</a></li>
</ul>
</div>
</nav>
</header>
<!-- 次头部 -->
<div class="search">
<div class="search-logo">
<img src="./10-CSS-作业素材-美丽说/images/美丽说 (1).png">
</div>
<div class="search-right">
<img src="./10-CSS-作业素材-美丽说/images/meilishuo_app.gif">
</div>
<div class="search-case">
<div class="search-case-baby">
<ul>
<li><a href="#"></a> 宝贝</a></li><li><a href="#">店铺 </a></li>
</ul>
</div>
<div class="input">
<input type="text"><input type="submit" value="">
</div>
<div class="search-case-select">
<ul>
<li>连衣裙</li>
<li>运动鞋</li>
<li>雪纺衫</li>
<li>衬衫</li>
<li>薄外套</li>
<li>T恤</li>
<li>套装</li>
<li>牛仔裤</li>
<li>小白鞋</li>
<li>风衣</li>
<li>绑带凉鞋</li>
<li>粗跟单鞋</li>
</ul>
</div>
</div>
</div>
<!-- 首页 上衣 裙子 -->
<div class="division">
<div class="division-">
<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>
</ul>
</div>
</div>
<div class="main">
<div class="main-">
<div class="one">
<div class="one-left">
<a href="#"><img src="./10-CSS-作业素材-美丽说/images/prev.png"></a>
</div>
<div class="one-right">
<a href="#"><img src="./10-CSS-作业素材-美丽说/images/next.png"></a>
</div>
<div class="roll">
<ul>
<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="two">
<a href="#"><img src="./10-CSS-作业素材-美丽说/images/kinds01.png"></a>
<a href="#"><img src="./10-CSS-作业素材-美丽说/images/kinds02.png"></a>
<a href="#"><img src="./10-CSS-作业素材-美丽说/images/kinds03.png"></a>
<a href="#"><img src="./10-CSS-作业素材-美丽说/images/kinds04.png"></a>
</div>
<div class="three">
<div class="three-top">
<ul>
<li>今日新品
<div class="heng"></div>
</li>
<li>一周热销
<div class="heng"></div>
</li>
<li>查看更多>></li>
</ul>
</div>
<div class="three-bottom">
<ul>
<li><a href="#">
<img src="./10-CSS-作业素材-美丽说/images/goods01.png">
<span>¥ 93.75</span>
<span> 250</span>
<div class="start"></div>
<div class="title">
<img src="./10-CSS-作业素材-美丽说/images/youxuan.png">
<p title="小清新新款韩版气质收腰显瘦百搭蕾丝边V领木耳边镂空休闲连衣裙">小清新新款韩版气质收腰显瘦百搭蕾丝边V领木耳边镂空休闲连衣裙</p>
</div>
</a></li>
<li><a href="#">
<img src="./10-CSS-作业素材-美丽说/images/goods02.png">
<span>¥ 93.75</span>
<span> 250</span>
<div class="start"></div>
<div class="title">
<img src="./10-CSS-作业素材-美丽说/images/youxuan.png">
<p title="小清新新款韩版气质收腰显瘦百搭蕾丝边V领木耳边镂空休闲连衣裙">小清新新款韩版气质收腰显瘦百搭蕾丝边V领木耳边镂空休闲连衣裙</p>
</div>
</a></li>
<li><a href="#">
<img src="./10-CSS-作业素材-美丽说/images/goods03.png">
<span>¥ 93.75</span>
<span> 250</span>
<div class="start"></div>
<div class="title">
<img src="./10-CSS-作业素材-美丽说/images/youxuan.png">
<p title="小清新新款韩版气质收腰显瘦百搭蕾丝边V领木耳边镂空休闲连衣裙">小清新新款韩版气质收腰显瘦百搭蕾丝边V领木耳边镂空休闲连衣裙</p>
</div>
</a></li>
<li><a href="#">
<img src="./10-CSS-作业素材-美丽说/images/goods04.png">
<span>¥ 93.75</span>
<span> 250</span>
<div class="start"></div>
<div class="title">
<img src="./10-CSS-作业素材-美丽说/images/youxuan.png">
<p title="小清新新款韩版气质收腰显瘦百搭蕾丝边V领木耳边镂空休闲连衣裙">小清新新款韩版气质收腰显瘦百搭蕾丝边V领木耳边镂空休闲连衣裙</p>
</div>
</a></li>
<li><a href="#">
<img src="./10-CSS-作业素材-美丽说/images/goods05.png">
<span>¥ 93.75</span>
<span> 250</span>
<div class="start"></div>
<div class="title">
<img src="./10-CSS-作业素材-美丽说/images/youxuan.png">
<p title="小清新新款韩版气质收腰显瘦百搭蕾丝边V领木耳边镂空休闲连衣裙">小清新新款韩版气质收腰显瘦百搭蕾丝边V领木耳边镂空休闲连衣裙</p>
</div>
</a></li>
<li><a href="#">
<img src="./10-CSS-作业素材-美丽说/images/goods06.png">
<span>¥ 93.75</span>
<span> 250</span>
<div class="start"></div>
<div class="title">
<img src="./10-CSS-作业素材-美丽说/images/youxuan.png">
<p title="小清新新款韩版气质收腰显瘦百搭蕾丝边V领木耳边镂空休闲连衣裙">小清新新款韩版气质收腰显瘦百搭蕾丝边V领木耳边镂空休闲连衣裙</p>
</div>
</a></li>
<li><a href="#">
<img src="./10-CSS-作业素材-美丽说/images/goods07.png">
<span>¥ 93.75</span>
<span> 250</span>
<div class="start"></div>
<div class="title">
<img src="./10-CSS-作业素材-美丽说/images/youxuan.png">
<p title="小清新新款韩版气质收腰显瘦百搭蕾丝边V领木耳边镂空休闲连衣裙">小清新新款韩版气质收腰显瘦百搭蕾丝边V领木耳边镂空休闲连衣裙</p>
</div>
</a></li>
<li><a href="#">
<img src="./10-CSS-作业素材-美丽说/images/goods08.png">
<span>¥ 93.75</span>
<span> 250</span>
<div class="start"></div>
<div class="title">
<img src="./10-CSS-作业素材-美丽说/images/youxuan.png">
<p title="小清新新款韩版气质收腰显瘦百搭蕾丝边V领木耳边镂空休闲连衣裙">小清新新款韩版气质收腰显瘦百搭蕾丝边V领木耳边镂空休闲连衣裙</p>
</div>
</a></li>
<li><a href="#">
<img src="./10-CSS-作业素材-美丽说/images/goods09.png">
<span>¥ 93.75</span>
<span> 250</span>
<div class="start"></div>
<div class="title">
<img src="./10-CSS-作业素材-美丽说/images/youxuan.png">
<p title="小清新新款韩版气质收腰显瘦百搭蕾丝边V领木耳边镂空休闲连衣裙">小清新新款韩版气质收腰显瘦百搭蕾丝边V领木耳边镂空休闲连衣裙</p>
</div>
</a></li>
<li><a href="#">
<img src="./10-CSS-作业素材-美丽说/images/goods10.png">
<span>¥ 93.75</span>
<span> 250</span>
<div class="start"></div>
<div class="title">
<img src="./10-CSS-作业素材-美丽说/images/youxuan.png">
<p title="小清新新款韩版气质收腰显瘦百搭蕾丝边V领木耳边镂空休闲连衣裙">小清新新款韩版气质收腰显瘦百搭蕾丝边V领木耳边镂空休闲连衣裙</p>
</div>
</a></li>
</ul>
</div>
</div>
<div class="four">
<div class="four-top">
<ul>
<li>好物组货</li>
<li>查看更多>> </li>
</ul>
</div>
<div class="four-bottom">
<ul>
<li style="border: 1px solid #dee1e6;">
<img src="./10-CSS-作业素材-美丽说/images/shadow.png">
<div class="goods">50款商品 </div>
<ul>
<li>
<img src="./10-CSS-作业素材-美丽说/images/dress01.png" style="width: 110px;height: 140px;">
<span>¥ 100.00</span>
</li>
<li>
<img src="./10-CSS-作业素材-美丽说/images/dress02.png" style="width: 110px;height: 140px;">
<span>¥ 100.00</span>
</li>
<li>
<img src="./10-CSS-作业素材-美丽说/images/dress03.png" style="width: 110px;height: 140px;">
<span>¥ 100.00</span>
</li>
</ul>
</li>
<li style="border: 1px solid #dee1e6;">
<img src="./10-CSS-作业素材-美丽说/images/shadow.png">
<div class="goods">50款商品 </div>
<ul>
<li>
<img src="./10-CSS-作业素材-美丽说/images/dress01.png" style="width: 110px;height: 140px;">
<span>¥ 100.00</span>
</li>
<li>
<img src="./10-CSS-作业素材-美丽说/images/dress02.png" style="width: 110px;height: 140px;">
<span>¥ 100.00</span>
</li>
<li>
<img src="./10-CSS-作业素材-美丽说/images/dress03.png" style="width: 110px;height: 140px;">
<span>¥ 100.00</span>
</li>
</ul>
</li>
<li style="border: 1px solid #dee1e6;">
<img src="./10-CSS-作业素材-美丽说/images/shadow.png">
<div class="goods">50款商品 </div>
<ul>
<li>
<img src="./10-CSS-作业素材-美丽说/images/dress01.png" style="width: 110px;height: 140px;">
<span>¥ 100.00</span>
</li>
<li>
<img src="./10-CSS-作业素材-美丽说/images/dress02.png" style="width: 110px;height: 140px;">
<span>¥ 100.00</span>
</li>
<li>
<img src="./10-CSS-作业素材-美丽说/images/dress03.png" style="width: 110px;height: 140px;">
<span>¥ 100.00</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<!-- 页脚 -->
<footer>
<div class="footer-">
<div class="footer-left clearfix">
<ul>
<li>买家帮助</li>
<li><a href="#">新手指南</a></li>
<li><a href="#">服务保障</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">风险监测</a></li>
</ul>
<ul>
<li>商家帮助</li>
<li><a href="#">供应商招募</a></li>
<li><a href="#">商家后台</a></li>
</ul>
<ul>
<li>关于我们</li>
<li><a href="#">关于美丽说</a></li>
<li><a href="#">联系我们</a></li>
</ul>
<ul>
<li>关注我们</li>
<li><a href="#">
<div class="contact"></div>
新浪微博</a></li>
<li><a href="#">
<div class="contact" style=" background-position: -28px 0px;"></div>
QQ空间</a></li>
<li><a href="#">
<div class="contact" style=" background-position: -56px 0px;"></div>
腾讯微博</a></li>
</ul>
</div>
<div class="footer-right">
<ul>
<li>美丽说微信服务号
<img src="./10-CSS-作业素材-美丽说/images/weixin-server-qrcode.jpg" a>
</li>
<li>美丽说客户端下载
<img src="./10-CSS-作业素材-美丽说/images/meili-app-qrcode.png">
</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>Copyright ©2017 xxxxxxxx.com 电信与信息服务业务经营许可证xxxxxx号 经营性网站备案信息</p>
<p>京ICP备xxxxxxxx号 京公网安备xxxxxxxx 客服电话：xxxx-xxx-xxx 文明办网文明上网举报电话：xxx-xxxxxxxx 违法不良信息举报中心</p>
</div>
</footer>
<!-- 侧边栏 -->
<div class="sidebar">
<div class="sidebar-">
<ul>
<li><a href="#"></a></li>
<li><a href="#">
<div class="phone">
<img src="./10-CSS-作业素材-美丽说/images/shouji.png">
</div>
下载APP</a>
<div class="erweima">
<div class="trigon"></div>
</div>
</li>
<li><a href="#">
<div class="phone">
<img src="./10-CSS-作业素材-美丽说/images/gouwuche.png">
</div>
购物车</a></li>
<li><a href="#">
<div class="phone">
<img src="./10-CSS-作业素材-美丽说/images/xiaoxi.png">
</div>
消息</a></li>
<li><a href="#">
<div class="phone">
<img src="./10-CSS-作业素材-美丽说/images/youhuiquan.png">
</div>
优惠券</a></li>
<li><a href="#">
<div class="phone">
<img src="./10-CSS-作业素材-美丽说/images/shoucang.png">
</div>
收藏</a></li>
<li><a href="#">
<div class="phone">
<img src="./10-CSS-作业素材-美丽说/images/zuji.png">
</div>
足迹</a></li>
</ul>
</div>
</div>
</body>
</html>
扫一扫
125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
