* { margin:0; padding:0; } #nav { position:fixed; left:30px; top:10px; } #nav li { width:50px; height:30px; font:bold 20px/30px simhei; text-align:center; list-style-type:none; background:#333; color:#fff; margin:10px 0; cursor:pointer; } #list { width:470px; overflow:hidden; margin-left:200px; } #list li { width:470px; height:300px; text-align:center; font:bold 100px/300px simhei; list-style-type:none; background:yellow; color:blue; /* margin:50px 200px; */ margin-bottom:50px; } .blue { background-color:blue !important; color:#fff !important; } .undfand { background-color:#fff !important; } .top { position:fixed; right:0; bottom:0; width:50px; height:50px; background-color:pink; cursor:pointer; } #list #go1 { position:relative; height:300px; } #go1 div { float:left; width:470px; height:100%; background-color:orange; margin-right:10px; } .btn { position:absolute; width:546px; height:50px; top:130px; left:160px; } .btn button { width:30px; height:40px; } .fl { float:left; } .fr { float:right; }
更新时间:2019-08-13 23:13:35
需要jq的2.2.0以上的版本才可以运行 页面刚进去轮播图父盒子的宽度就已经计算出来了 所以宽度是动态的 因为咱们在日常工作总轮播图是后台数据遍历出来的 所以宽度是动态算出来的 左导航方法比较笨不过很容易看懂 代码都很简单新手看四五分钟就懂了