代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的第二个移动端网页</title>
<link rel="stylesheet" href="医药.css">
<meta name="viewport" id="viewport" content="user-scalable=1,width=device-width,initial-scale=1">
<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>
</head>
<body>
<header class="header iconfont clearfix">
<span class="fl"></span>
<div class="so"></div>
<span class="fr"></span>
</header>
<div class="banner clearfix">
<ul class="banner_img ">
<li><img src="3.png" alt=""></li>
<li><img src="2.png" alt=""></li>
<li><img src="1.png" alt=""></li>
</ul>
<ol class="num" id="num">
<li class="active" id="active"></li>
<li></li>
<li></li>
</ol>
</div>
<main>
<nav>
<ul class="clearfix">
<li><a href="#"><i></i>饮品</a></li>
<li><a href="#"><i></i>食品</a></li>
<li><a href="#"><i></i>零食</a></li>
<li><a href="#"><i></i>牛肉</a></li>
<li><a href="#"><i></i>奶制品</a></li>
<li><a href="#"><i></i>烟酒</a></li>
<li><a href="#"><i></i>保健</a></li>
<li><a href="#"><i></i>医药</a></li>
</ul>
</nav>
<div class="aditem">
<div class="aditem_text"><h5>新品预售</h5></div>
<div class="jiu">
<a href="" class="a_jiu l t"><img src="jiu.jpg" alt=""></a>
<a href="" class="a_jiu1 r t"><img src="jiu1.jpg" alt=""></a>
<a href="" class="a_jiu2 r b"><img src="jiu2.jpg" alt=""></a>
</div>
</div>
<div class="aditem_1">
<div class="aditem_text"><h5>感谢恩师</h5></div>
<div class="jiu">
<a href="" class="a_jiu l t"><img src="shi1.jpg" alt=""></a>
<a href="" class="a_jiu1 r t"><img src="shi2.jpg" alt=""></a>
<a href="" class="a_jiu2 r b"><img src="shi3.jpg" alt=""></a>
</div>
</div>
</main>
</body>
</html>css样式如下：
*{
padding: 0;
margin: 0;
list-style: none;
text-decoration: 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;
color: #ccc;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
.clearfix{
zoom: 1;
}
.header span{
display: inline-block;
line-height: 2rem;
margin:0 0.35rem;
}
.header .so{
float: left;
margin-left:40%;
line-height: 2rem;
position: relative;
}
.header .so:after{
content:"";
width: 3rem;
border:solid 1px;
border-color: transparent transparent #ccc transparent;
position: absolute;
bottom:0.4rem;
font-size: 14px;
left: 2px;
}
header{
height: 2rem;
width: 100%;
background-image:linear-gradient(to bottom,rgba(0,0,0,0.7),rgba(0,0,0,0.3));
position: fixed;
top: 0;
left: 0;
z-index: 1;
}
.banner{
height: 13rem;
width: 16rem;
overflow: hidden;
position: relative;
}
.banner ul{
width: 300%;
animation: mov 9s steps(3);
animation-iteration-count: infinite;
}
@keyframes mov{
0%{
transform: translate(0);
}
100%{
transform: translate(-60rem);
}
}
.banner li{
display: inline-block;
float: left;
}
.banner img{
width: 16rem;
}
.num{
z-index: 6;
position: absolute;
right: 3px;
bottom: 14px;
}
.num li{
list-style: none;
display: inline-block;
width: 0.6rem;
height: 0.6rem;
border-radius: 50%;
box-shadow: inset 0 0 2px 1px rgba(0,0,0,0.4);
background-color:rgba(255,255,255,0.5);
border: 0 0.2rem;
margin-right: 0.5rem;
}
.num .active{
background-color:#fff;
}
main{
padding: 0.3rem 0.25rem;
}
nav,.aditem,.aditem_1{
background-color: #fff;
border:solid 1px #ccc;
box-shadow: 0 1px 3px rgba(0,0,0,0.3);
padding:0.25rem;
margin-bottom:0.5rem;
}
nav ul{
text-align: center;
font-size: 0.6rem;
}
nav li{
width: 25%;
float:left;
display: inline-block;
margin:0.2rem 0;
}
nav i{
display: block;
width: 2.5rem;
height: 2.5rem;
background-image:url(2.jpg);
background-position:0 0;
background-size:cover;
background-repeat: no-repeat;
margin:0.5rem auto 0rem;
}
.aditem_text{
position: relative;
padding-left:3%;
line-height: 0.65rem;
}
.aditem_text h5{
border-left: solid 6px blue;
line-height: 0.65rem;
height: 0.65rem;
padding-left:2%;
margin-bottom:1rem;
}
.jiu{
width: 100%;
/*overflow: hidden;*/
height:9rem;
position: relative;
}
.l{
left: 0;
}
.r{
right: 0;
}
.b{
bottom: 0;
}
.t{
top: 0;
}
.jiu .a_jiu{
width: 65%;
position: absolute;
}
.jiu .a_jiu1,.jiu .a_jiu2{
width: 35%;
position: absolute;
}
.jiu .a_jiu2{
top:5rem;
}
.jiu a{
display: inline-block;
overflow: hidden;
}
.jiu img{
width: 100%;
}最终效果截图：
