首页 > 其他 > 详细

淘宝页面（上半部分）触屏版

时间：2020-02-03 19:26:28      阅读：55      评论：0      收藏：0      [点我收藏+]

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;
}

 

淘宝页面（上半部分）触屏版

原文：https://www.cnblogs.com/a155-/p/12256851.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！