小米13
小米13
￥5999起
立即购买
小米1313333
小米13
￥5999起
立即购买
小米移动端页面练习---重点：导航栏点击下箭头内容的切换以及样式,高亮显示的实现
效果图
1.html
搜索商品名称
推荐
智能
电视
家电
笔记本
全部
推荐
智能
电视
家电
笔记本
2.script
3.css
* {
padding : 0;
margin : 0;
box-sizing: border-box;
}
ul li,
ol li {
list-style-type: none;
}
.header-ad {
width : 100vw;
height : 9vh;
position: relative;
}
.header-ad img {
width : 100vw;
height: 9vh;
}
.header-two-section {
position : relative;
width : 100vw;
height : 13vh;
padding : 0 2vw;
background: #f2f2f2;
}
.header-two-height-section {
position : relative;
width : 100vw;
height : 28vh;
padding : 0 2vw;
background: #f2f2f2;
transition: all .5s;
}
.logo {
width : 100%;
height : 7vh;
display : flex;
justify-content: center;
align-items : center;
text-align : center;
}
.logo-img {
width : 15%;
height: 1.625rem;
}
.logo-img img {
width : 1.625rem;
height: 1.625rem;
}
.search {
width : 70%;
height : 2rem;
display : flex;
border : .0625rem solid #ccc;
align-items : center;
background-color: white;
border-radius : .1875rem;
text-align : center;
}
.search-img,
.search-img img {
width : 1.25rem;
height: 1.25rem;
}
.search-input {
color : #ccc;
font-size: .9375rem;
}
.user-img {
width : 15%;
height: 1.625rem;
}
.user-img img {
width : 1.25rem;
height: 1.25rem;
}
.hearder-nav {
position: relative;
width : 100%;
/* height : 10vh; */
display : flex;
justify-content: space-between;
align-items : center;
}
.hearder-five-nav {
display : flex;
justify-content: space-between;
width : 80%;
color: #ccc;
}
/* 导航箭头 */
.hearder-nav-img {
/* 导航箭头定位 */
position: absolute;
width : 21px;
height: 21px;
right: 13px;
top: 3px;
}
.hearder-nav-img div {
background : url(./images/xiajiantou.png) no-repeat;
width : 21px;
height : 21px;
background-size: 21px 21px;
/* 过渡 */
/* transform : rotate(0); */
transition : transform .2s linear;
}
.rotate {
transform : rotate(180deg);
transition: transform .2s linear;
}
.contaniner{
width: 100%;
color: gray;
}
.contaniner-text{
padding-top: 8px;
}
.contaniner span{
display: inline-block;
width: 75px;
height: 30px;
border: 1px solid #ccc;
border-radius: 3px;
text-align: center;
line-height: 30px;
margin: 10px 10px 0px 0;
}
.nav-display{
display: block;
}
.no-display{
display: none;
}
.active{
background-color: pink;
color: white;
transform: scale(1.1);
transition: transform .5s linear;
}
.hearder-nav-active{
color: orange;
padding-bottom: 10px;
border-bottom: 3px solid orange;
}
.header-three-section {
width: 100%;
}
.three-section-img {
display: flex;
}
.three-section-img img {
width : 4.6875rem;
height: 4.9375rem;
}
.line {
width : 100%;
height : .5rem;
background-color: #f2f2f2;
}
.main-section {
width : 100%;
/* height : 20vh; */
display : flex;
justify-content: space-around;
}
.main-section-img {
width : 50vw;
/* height:16.875rem; */
height : 16.625rem;
}
.main-section-img img {
width : 50vw;
/* height:16.875rem; */
height : 16.625rem;
}
.main-section-two-img {
width : 49vw;
height : 16.625rem;
display : flex;
flex-direction : column;
justify-content: space-between;
}
.main-section-two-img img {
width : 11.625rem;
height: 8.1875rem;
}
.box {
display : flex;
justify-content: space-between;
}
.main-image {
width : 100%;
padding : 0 1vw;
height : 18.75rem;
display : flex;
/* justify-content: center;
align-items : center; */
flex-direction : column;
text-align : center;
}
.main-image img {
width : 11.25rem;
height: 9.125rem;
}
.red {
color: red;
}
.btn {
padding : .3125rem .625rem;
background-color: red;
color : white;
border-radius : .3125rem;
}
footer {
position : fixed;
left : 0;
bottom : 0;
width : 100%;
height : 3.125rem;
background-color: white;
display : flex;
}
.footer-section {
width : 25%;
display : flex;
text-align : center;
flex-direction: column;
}
.footer-section img {
width : 1.3125rem;
height: 1.3125rem;
}