淘宝页面（上半部分）触屏版
HTML：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--meta name="viewport"是用于设置页面视图 的大小 width=device-width是宽度等于设备的宽度 initial-scale=1是初始比例是1 minimum-scale=1是最小比例是1 maximum-scale=1是最大比例是1 user-scalable=no是用户不允许缩放 --> <meta name="viewport" content="width=375,user-scalable=no"/> <link rel="stylesheet" type="text/css" href="css/style.css"/> </head> <body> <!--<h1> helloworld </h1>--> <div class="header"> <div class="logo"></div> <div class="searchBtn"> <div class="searchIcon"></div> <div class="searchText">寻找宝贝店铺</div> </div> </div> <div class="swiper"> <div class="imgList"> <div class="imgItem" style="background-image: url(img/tu1.jpg)"></div> <div class="imgItem" style="background-image: url(img/tu2.jpg)"></div> <div class="imgItem" style="background-image: url(img/tu3.jpg)"></div> </div> <div class="btn"> <div class="leftBtn"></div> <div class="rightBtn"></div> </div> <div class="circleList"> <div class="circle"></div> <div class="circle"></div> <div class="circle"></div> </div> </div> <div class="iconList"> <div class="iconItem"> <div class="icon1"></div> <div class="iconText">天猫新品</div> </div> <div class="iconItem"> <div class="icon2"></div> <div class="iconText">今日爆款</div> </div> <div class="iconItem"> <div class="icon3"></div> <div class="iconText">天猫国际</div> </div> <div class="iconItem"> <div class="icon4"></div> <div class="iconText">饿了么</div> </div> <div class="iconItem"> <div class="icon5"></div> <div class="iconText">天猫超市</div> </div> <div class="iconItem"> <div class="icon6"></div> <div class="iconText">天猫</div> </div> <div class="iconItem"> <div class="icon7"></div> <div class="iconText">天猫</div> </div> <div class="iconItem"> <div class="icon8"></div> <div class="iconText">天猫</div> </div> <div class="iconItem"> <div class="icon9"></div> <div class="iconText">天猫</div> </div> <div class="iconItem"> <div class="icon10"></div> <div class="iconText">天猫</div> </div> </div> <script type="text/javascript"> var left=document.querySelector(".btn .leftBtn") var right=document.querySelector(".btn .rightBtn") var imgList=document.querySelectorAll(".imgList .imgItem") var circleList=document.querySelectorAll(".circleList .circle") var imgNum=0; function renderImg(imgNum) { imgList.forEach(function(item,index){ if(imgNum == index) {imgList[imgNum].style.zIndex=10; //通过改变同一个类的不同css样式来改变 circleList[index].className="circle active" } else{ item.style.zIndex=0; circleList[index].className="circle" } }) } renderImg(imgNum) right.onclick = function () { imgNum++; if(imgNum>=imgList.length) {imgNum = 0;} renderImg(imgNum) } left.onclick = function () { imgNum--; if(imgNum<0){ imgNum=imgList.length - 1; } renderImg(imgNum) } </script> </body> </html>
CSS：
*{ /*匹配所有的元素，去掉浏览器自带的内边距和外边距*/ margin: 0; padding: 0; } .header{ width: 375px; height: 37px; display: flex; background: #FF852A; color: #fff; align-items: center; justify-content: space-around; position: fixed; top: 0; left: 0; } .logo{ width: 37px; height: 37px; background-image: url(../img/tao.png); background-size: 80%; background-position: center; background-repeat: no-repeat; } .searchBtn{ width: 324px; height: 25px; background: rgb(255, 78, 34); /*设定圆角*/ border-radius: 4px; font-size: 14px; text-align: center; display: flex; justify-content: center; align-content: center; } .searchIcon{ width: 25px; height: 25px; background-image: url(../img/search.png); background-size: 60%; background-position: center; background-repeat: no-repeat; } .swiper{ margin-top: 37px; width: 375px; height: 120px; position: relative; background-size: 100% 100%; background-position: 0% 0%,0 0; } .imgList .zhezhao{ z-index: 20; position: absolute; } .imgList{ position: absolute; left: 0; right: 0; width: 100%; height: 100%; } /*下面必须要有一个空格，不然出不来。*/ .imgList .imgItem{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; background-size: auto 100%; background-position:center; background-repeat: no-repeat; } .btn .leftBtn{ width: 60px; height: 60px; background-image: url(../img/left1.png); background-size: auto 65%; background-position:center; background-repeat: no-repeat; position: absolute; left: -15px; top:calc(50% - 30px); z-index: 100; } .btn .rightBtn{ width: 60px; height: 60px; background-image: url(../img/right1.png); background-size: auto 65%; background-position:center; background-repeat: no-repeat; position: absolute; right: -15px; top:calc(50% - 30px); z-index: 100; } .circleList{ width: 100px; height: 100px; position: absolute; left: 145px; bottom: -40px; display: flex; justify-content: center; align-items: center; z-index: 100; } .circle{ width: 10px; height: 10px; border: 2px solid #aaa; /*黑色*/ background-color: #555; border-radius: 7px; margin: 0 10px; } /*下面的没有用空格的，是指同一个类*/ .circle.active{ width: 10px; height: 10px; border: 2px solid #aaa; /*白色*/ background-color: #fff; border-radius: 7px; margin: 0 10px; } .iconList{ width: 375px; height: 160px; display: flex; flex-wrap: wrap; align-content: center; align-content: space-around; } .iconItem{ width: 20%; height: 67px; display: flex; flex-direction: column; justify-content: center; align-content: center; } .icon1{ width: 61px; height: 48px; background-image: url(../img/tianmao.png); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .icon2{ width: 61px; height: 48px; background-image: url(../img/ju.png); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .icon3{ width: 61px; height: 48px; background-image: url(../img/tianmaoguoji.png); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .icon4{ width: 61px; height: 48px; background-image: url(../img/eleme.png); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .icon5{ width: 61px; height: 48px; background-image: url(../img/tianmaochaoshi.png); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .icon6{ width: 61px; height: 48px; background-image: url(../img/tianmao.png); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .icon7{ width: 61px; height: 48px; background-image: url(../img/tianmao.png); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .icon8{ width: 61px; height: 48px; background-image: url(../img/tianmao.png); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .icon9{ width: 61px; height: 48px; background-image: url(../img/tianmao.png); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .icon10{ width: 61px; height: 48px; background-image: url(../img/tianmao.png); background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .iconText{ font-size: 11px; margin-top: 5px; color: rgb(102, 102, 102); display: flex; }
