html,body {
margin:0;
padding:0;
background:#f6f1f1;
}
.header {
box-shadow:0 2px 10px rgba(0,0,0,.05);
background:#fdf;
position:fixed;
top:0;
width:100%;
z-index:1000;
}
header {
min-width:1200px;
max-width:1440px;
margin:0 auto;
height:56px;
overflow:hidden;
}
header .logo {
float:left;
color:#ccc;
font-weight:700;
font-size:20px;
padding:0 16px;
line-height:56px;
}
header .menu-right {
float:right;
padding:0 16px;
margin-right:10px;
line-height:56px;
}
header .menu-left {
display:flex;
width:1000px;
margin-left:auto;
margin-right:auto;
height:56px;
align-items:center;
}
header .menu-left .search {
position:relative;
}
header .menu-left .search input {
border-radius:5px;
}
header .menu-left .search i {
position:absolute;
right:10px;
line-height:27px;
}
header .menu-left span {
font-size:17px;
color:#333;
padding:0 20px;
cursor:pointer;
}
header .common {
transition:transform .3s;
}
header .common2 {
transition:transform .3s;
}
header .common2 {
width:1000px;
margin-left:auto;
margin-right:auto;
height:56px;
}
header .common2 .common-container {
display:flex;
justify-content:space-between;
height:56px;
align-items:center;
}
body>section {
margin-top:56px;
height:1400px;
}
body>section section.main {
height:1000px;
width:1200px;
margin:0 auto;
}
section.zan {
position:fixed;
top:216px;
left:calc((100vw - 1200px)/2 - 78px)
}
.main {
margin-top:20px;
}
.main .slide-left {
float:left;
width:66%;
}
.main .slide-left img {
width:100%;
}
.main .slide-right {
float:left;
width:33%;
padding-left:40px;
padding-right:100px;
margin-top:20px;
box-sizing:border-box;
}
.main .slide-right .board {
}.main .slide-right .board a {
}.main .slide-right .board a img {
width:100%;
}
更新时间:2020-08-02 22:49:18
原生js+css3实现。特点:优化常规节流函数