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实现。特点:优化常规节流函数