html文件见下列代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>领哥首个移动端网页-实战电商</title>
<meta name="viewport" id="viewport" content="user-scalable=1,initial-scale=1,width=device-width">
<script>
window.onload=function(){
var _html=document.getElementsByTagName("html")[0];
var ch=document.documentElement.clientWidth;
ch>640 ?_html.style.fontSize="40px": _html.style.fontSize=ch/16+"px";
}
</script>
<link rel="stylesheet" href="css.css">
</head>
<body>
<header class="header">
<div class="header_bar">
<span class="back iconfont fl"></span><span class="text">领哥首个移动端网页</span><span class="shop_buy iconfont fr"><i>3</i></span>
</div>
<div class="btn clearfix"><a href="#" class="fl gm">Add To Wishlist</a> <a href="#" class="fr gwc">Add To Cart</a></div>
</header>
<div class="banner">
<ul class="banner_img clearfix" id="banner_img">
<li ><a href="http://www.baidu.com"><img src="1.png" alt=""></a></li>
<li><img src="2.png" alt=""></li>
<li><img src="3.png" alt=""></li>
</ul>
<div class="banner_text clearfix">
<p class="banner_info">欢迎购买本产品</p><span class="banner_buy"><a href="#">$16000</a></span>
</div>
</div>
<div class="banner">
<ul class="banner_img clearfix" id="banner_img">
<li ><img src="6.png" alt=""></li>
<li><img src="7.png" alt=""></li>
<li><img src="8.png" alt=""></li>
</ul>
<div class="banner_text clearfix">
<p class="banner_info">欢迎购时尚T恤衫</p><span class="banner_buy"><a href="#">$600</a></span>
</div>
</div>
<footer class="foot iconfont">
<div class="foot_1"></div>
<div class="foot_2"></div>
<div class="foot_3"></div>
</footer>
</body>
</html>css代码如下：
*{
padding: 0;
margin: 0;
list-style: none;
}
@font-face {
font-family: 'iconfont';
src: url('font/iconfont.eot');
src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
url('font/iconfont.woff') format('woff'),
url('font/iconfont.ttf') format('truetype'),
url('font/iconfont.svg#iconfont') format('svg');
}
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
i{
font-style: normal;
}
.header{
background-color:#38474f;
padding: 0.6rem;
margin-bottom: 0.65rem;
}
.back,.shop_buy{
display: inline-block;
font-size: 0.7rem;
position: relative;
}
.header .text{
display: inline-block;
line-height: 0.7rem;
text-align: center;
font-size: 0.7rem;
float: left;
margin-left: 0.7rem;
color: #ccc;
}
.header i{
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
position: absolute;
background-color:red;
top: -0.3rem;
right: -0.3rem;
color: #fff;
font-size: 0.3rem;
line-height: 0.5rem;
text-align: center;
}
.header_bar{
line-height: 0.85rem;
margin-bottom:0.9rem;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
.clearfix{
zoom: 1;
}
.btn a{
display: line-block;
width: 7.175rem;
height: 1.575rem;
font-size: 14px;
border-radius: 3px;
line-height: 1.575rem;
text-decoration: none;
color: #fff;
text-align: center;
}
.gm{
background-color: #2d3a40;
}
.gwc{
background-color: #f6846a;
}
.banner{
margin:0.6rem;
width: 14.8rem;
border-radius: 10px;
box-shadow: 0 2px 4px rgba(0,0,0,0.5);
background-color:#fff;
overflow: hidden;
margin-bottom: 0.65rem;
}
.banner ul{
display: inline-block;
width: 316%;
animation:mov 6s steps(3);
animation-iteration-count:infinite;
}
@keyframes mov{
0%{transform: translate(0%);}
100%{transform: translate(-99.2%);}
}
.banner li{
float: left;
margin-right: 0.6rem;
}
.banner img{
width: 14.8rem;
}
.banner_text{
padding: 0.65rem;
height:1.675rem;
line-height: 1.675rem;
}
.banner_info{
height:1.675rem;
display: inline;
line-height: 1.675rem;
float: left;
}
.banner_buy{
width: 3.55rem;
height:1.675rem;
line-height: 1.675rem;
background-color: #bfbfc4;
color: #ccc;
font-size: 0.5rem;
border-radius:6px;
float: right;
text-align: center;
/*margin-bottom: 0.6rem;*/
}
.banner_buy a{
display: inline-block;
text-decoration: none;
color:blue;
}
.foot{
display: flex;
margin:0.6rem;
/*width: 14.8rem;*/
flex-grow: 1;
text-align: center;
line-height: 2rem;
font-size: 1.675rem;
}
.foot_1{
background: red;
flex:1;
}
.foot_2{
background: blue;
flex:1;
}
.foot_3{
background: orange;
flex:1;
}
.iconfont{
color: #ccc;
}最终成品展示：
