小米官网移动端和js复习
小米官网
大致完成
*{margin: 0;padding: 0;background-repeat: no-repeat;
}
li {list-style: none;
}
body {background-color: #f5f5f5;
}
input::-webkit-input-placeholder{color:rgba(0,0,0,.3);}
.header {width: 375px;display: flex;flex-direction: column;background-color: #F2F2F2;position: fixed;box-shadow: 0px 1px 5px #999;
}
.header .navTop {height: 44px;display: flex;
}
.header .navTop .logo {width: 52px;height: 44px;background-image: url(../img/milogo.png);background-size: 25px auto;background-position: center;background-repeat: no-repeat;
}
.header .navTop .search {flex: 1;background-color: white;height: 30px;display: flex;margin: 5px 0;border: 1px solid #E5E5E5;
}
.header .navTop .search .sIcon {width: 31px;height: 31px;background-image: url(../img/search4.png);background-size: 20px auto;background-position: center;background-repeat: no-repeat;}
.header .navTop .search input {border: none;flex: 1;outline: none;font-size: 16px;color: rgba(0,0,0,.3);
}
.header .navTop .user {width: 52px;height: 44px;background-image: url(../img/user.png);background-size: 20px auto;background-position: center;background-repeat: no-repeat;
}
.header .navBot {height: 30px;display: flex;justify-content: space-around;line-height: 30px;position: relative;
}
.header .navBot .upList {display: flex;flex: 1;justify-content: space-around;
}
.header .navBot .upList li {list-style: none;font-size: 14px;color: #747474;
}
.header .navBot .upList .active {color: rgb(237, 91, 0);border-bottom: 2px solid ;border-color: rgb(237, 91, 0);
}
.header .navBot .xlIcon {width: 30px;background-image: url(../img/download.png);background-size: 20px auto;background-position: center;background-repeat: no-repeat;position: relative;z-index: 100;
}
.header .navBot #down {display: flex;height: 0px;width: 375px;position: absolute;top: 0;left: 0;background-color: #F2F2F2;flex-direction: column;overflow: hidden;justify-content: space-evenly;transition: all 0s linear;}.header .navBot #down .downTitle {text-indent: 12px;}.header .navBot #down .downBtn {display: flex;flex-direction: column;justify-content: space-evenly;height: 83px;}.header .navBot #down .downBtn .downList{display: flex;justify-content: space-evenly;height: 30px;}.header .navBot #down .downBtn .downList li {background-color: #fff;width: 80px;text-align: center;border: 1px solid #e5e5e5;border-radius: 5px;color: #3c3c3c;font-size: 13px;}.header .navBot #down .downBtn .downList .active {color: #ff6700;border-color: rgb(255, 103, 0);background-color: #fde0d5;}#none{background-color: transparent !important; border: none !important;}#xl:checked~#down {height: 130px;transition: all .2s linear;}#xl:checked~.xlIcon {transform: rotate(180deg);}/* banner */.banner {padding-top: 70px;width: 375px;height: 187px;background-image: url(../img/swiper.jpg);background-size: 100% auto;background-position: center bottom;background-repeat: no-repeat;}/* imgNav */.imgNav {width: 375px;height: 160px;display: flex;flex-wrap: wrap;}.imgNav a{width: 75px;height: 80px;background-size: 75px auto;}.imgNav a:nth-child(1) {background-image: url(../img/icon1.png);}.imgNav a:nth-child(2) {background-image: url(../img/icon2.webp);}.imgNav a:nth-child(3) {background-image: url(../img/icon3.gif);}.imgNav a:nth-child(4) {background-image: url(../img/icon4.webp);}.imgNav a:nth-child(5) {background-image: url(../img/icon5.webp);}.imgNav a:nth-child(6) {background-image: url(../img/icon6.png);}.imgNav a:nth-child(7) {background-image: url(../img/icon7.jpg);}.imgNav a:nth-child(8) {background-image: url(../img/icon8.png);}.imgNav a:nth-child(9) {background-image: url(../img/icon9.png);}.imgNav a:nth-child(10) {background-image: url(../img/icon10.png);}/* 广告ad */.ad {width: 375px;height: 264px;display: flex;justify-content: space-between;}.ad .adLeft {width: 186px;height: 264px;background-image: url(../img/img1.jpg);background-size: 186px auto;}.ad .adRight {width: 186px;height: 264px;display: flex;flex-direction: column;justify-content: space-between;}.ad .adRight .adRtop {width: 186px;height: 131px;background-image: url(../img/img2.jpg);background-size: 186px auto;}.ad .adRight .adRbottom {width: 186px;height: 131px;background-image: url(../img/img3.jpg);background-size: 186px auto;}/* 每日精选 */.jx {margin-top: 8px;}.jx .jxTop {width: 375px;height: 220px;background-image: url(../img/jxtop.jpg);background-size: 100% auto;}.jx .jxList {width: 375px;height: 506px;display: flex;flex-wrap: wrap;text-align: center;padding-bottom: 100px;}.jx .jxList .jxLitem .jxImg {width: 179px;height: 145px;background-image: url(../img/jx1.jpg);background-size: 100% auto;}.jx .jxList .jxLitem .name {font-size: 14px;}.jx .jxList .jxLitem .brief {font-size: 12px;color: rgba(0,0,0,.54);}.jx .jxList .jxLitem .price {font-size: 12px;color: rgb(234, 98, 91);margin: 2px 0;}.jx .jxList .jxLitem .buy {width: 104px;height: 30px;line-height: 30px;font-size: 12px;color: rgb(255, 255, 255);background-color: rgb(234, 98, 91);margin: 0 auto;}/* 底部导航条 */.bottomNav {width: 375px;height: 52px;position: fixed;bottom: 0;left: 0;background-color: #fff;display: flex;justify-content: space-evenly;box-shadow: 0px 4px 10px #999;}.bottomNav .bNitem .bNicon{width: 100%; height: 21px;/* background-image: url(../img/hone1.png); */background-size: 21px auto;background-position: center;}
.bottomNav .bNitem {display: flex;flex-direction: column;justify-content:space-evenly;width: 25%;align-items: center;
}
.bottomNav .bNitem {color: #999;font-size: 12px;
}
.bottomNav .bNitem:nth-child(1) .bNicon{background-image: url(../img/hone1.png);
}
.bottomNav .bNitem:nth-child(2) .bNicon{background-image: url(../img/list1.png);
}
.bottomNav .bNitem:nth-child(3) .bNicon{background-image: url(../img/star1.png);
}
.bottomNav .bNitem:nth-child(4) .bNicon{background-image: url(../img/buycar1.png);
}
.bottomNav .bNitem:nth-child(5) .bNicon{background-image: url(../img/center1.png);
}
.bottomNav .bNitem:nth-child(1):hover{color: #ff6700;
}
.bottomNav .bNitem:nth-child(2):hover{color: #ff6700;
}
.bottomNav .bNitem:nth-child(3):hover{color: #ff6700;
}
.bottomNav .bNitem:nth-child(4):hover{color: #ff6700;
}
.bottomNav .bNitem:nth-child(5):hover{color: #ff6700;
}.bottomNav .bNitem:nth-child(1) .bNicon:hover{background-image: url(../img/hone2.png);
}
.bottomNav .bNitem:nth-child(2) .bNicon:hover{background-image: url(../img/list2.png);
}
.bottomNav .bNitem:nth-child(3) .bNicon:hover{background-image: url(../img/star2.png);
}
.bottomNav .bNitem:nth-child(4) .bNicon:hover{background-image: url(../img/buycar2.png);
}
.bottomNav .bNitem:nth-child(5) .bNicon:hover{background-image: url(../img/center2.png);
}
<html><head><meta charset="utf-8"><meta name="viewport" content="width=375,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>mititle><link rel="stylesheet" type="text/css" href="./css/style.css"/>head><body><div class="header"><div class="navTop"><div class="logo">div><div class="search"><div class="sIcon">div><input type="text" placeholder="搜索商品名称">div><div class="user">div>div><div class="navBot"><input type="checkbox" name="" id="xl" value="" hidden="hidden" /><ul class="upList"><li class="list active">推荐li><li class="list">手机li><li class="list">智能li><li class="list">电视li><li class="list">笔记本li><li class="list">家电li>ul><div id="down"><div class="downTitle">全部div><div class="downBtn"><ul class="downList"><li class="active">推荐li><li>手机li><li>智能li><li>电视li>ul><ul class="downList"><li>笔记本li><li>家电li><li>生活周边li><li id="none">li>ul>div>div><label for="xl" class="xlIcon">label>div>div><div class="banner">div><div class="imgNav"><a href="">a><a href="">a><a href="">a><a href="">a><a href="">a><a href="">a><a href="">a><a href="">a><a href="">a><a href="">a>div><div class="ad"><div class="adLeft">div><div class="adRight"><div class="adRtop">div><div class="adRbottom">div>div>div><div class="jx"><div class="jxTop">div><div class="jxList"><div class="jxLitem"><div class="jxImg">div><div class="name">小米10div><div class="brief">骁龙865/50倍焦距div><div class="price">￥4999起div><div class="buy">立即购买div>div><div class="jxLitem"><div class="jxImg">div><div class="name">小米10div><div class="brief">骁龙865/50倍焦距div><div class="price">￥4999起div><div class="buy">立即购买div>div><div class="jxLitem"><div class="jxImg">div><div class="name">小米10div><div class="brief">骁龙865/50倍焦距div><div class="price">￥4999起div><div class="buy">立即购买div>div><div class="jxLitem"><div class="jxImg">div><div class="name">小米10div><div class="brief">骁龙865/50倍焦距div><div class="price">￥4999起div><div class="buy">立即购买div>div>div><div class="bottomNav"><div class="bNitem"><div class="bNicon">div><div class="bNtext">首页div>div><div class="bNitem"><div class="bNicon">div><div class="bNtext">分类div>div><div class="bNitem"><div class="bNicon">div><div class="bNtext">星球div>div><div class="bNitem"><div class="bNicon">div><div class="bNtext">购物车div>div><div class="bNitem"><div class="bNicon">div><div class="bNtext">我的div>div>div>div>body>
html>复习JavaScript
- 语法
- 数据类型 只有一种引用数据类型
- this使用
this<button id="btnThis">this</button><script>var name1 = "小日月";var stu1 = {name1: "小明",age: 18,like: function() {console.log(this.name1 + "喜欢篮球")console.log(this)console.log(this === stu1) }}stu1.like() //this===stu1 在方法中，this 表示该方法所属的对象。var fn = stu1.like;fn();//this != Window //如果单独使用，this 表示全局对象。//JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。var btnThis = document.getElementById("btnThis");btnThis.onclick = function(){console.log(this); //输出触发事件的元素对象}//记忆方法"."的前面的对象//this指向 bind，call，apply//bindvar name1 = "小日月";var stu1 = {name1: "小明",age: 18,like: function() {console.log(this.name1 + "喜欢篮球")console.log(this)console.log(this === stu1) }.bind(window)//bind绑定this指向的对象window}stu1.like() //this===window bind绑定this指向的对象window//callvar name1 = "小日月";var stu1 = {name1: "小明",age: 18,like: function(a,b,c) {console.log(this.name1 + "喜欢篮球")console.log(this)console.log("参数："+ a + b + c)console.log(this === stu1) }}var fn = stu1.like;fn.call(stu1);//this != stu1 fn.call(stu1,1,2,3);//传参//applyvar name1 = "小日月";var stu1 = {name1: "小明",age: 18,like: function(a,b,c) {console.log(this.name1 + "喜欢篮球")console.log(this)console.log("参数："+ a + b + c)console.log(this === stu1) }}var fn = stu1.like;fn.apply(stu1,[1,2,3]);//传参要数组</script>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！