1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81
| <!DOCTYPE html >
<html lang ="en">
<head >
<meta charset ="UTF-8">
<title >横向滑动 </title >
<meta name ="viewport" content ="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<link href ="https://cdn.bootcss.com/Swiper/4.3.0/css/swiper.min.css" rel ="stylesheet">
</head >
<style >
body {
margin : 0;
}
#header {
position : absolute ;
left : 0;
top : 0;
z -index : 999;
width : 100%;
height : 43px ;
overflow : hidden ;
background : #fdfdfc;
font : 12px /40px hiragino sans gb ,microsoft yahei ,simsun ;
box -shadow : 3px 3px 3px rgba (0,0,0,0.2);
}
#top-line {
width : 100%;
height : 3px ;
line -height : 0;
font -size : 0;
overflow : hidden ;
text -align : center ;
z -index : 1;
background -color : #0fa6ea;
background : -webkit -linear -gradient (left ,rgba (15,166,234,1) 0,rgba (89,204,24,1) 10%,rgba (15,166,234,1) 60%,rgba (15,166,234,1) 100%);
background : -moz -linear -gradient (left ,rgba (15,166,234,1) 0,rgba (89,204,24,1) 10%,rgba (15,166,234,1) 60%,rgba (15,166,234,1) 100%);
background : -ms -linear -gradient (left ,rgba (15,166,234,1) 0,rgba (89,204,24,1) 10%,rgba (15,166,234,1) 60%,rgba (15,166,234,1) 100%);
background : linear -gradient (left ,rgba (15,166,234,1) 0,rgba (89,204,24,1) 10%,rgba (15,166,234,1) 60%,rgba (15,166,234,1) 100%);
}
#header .swiper-slide {
padding : 0 20px ;
width : auto ;
}
</style >
<body >
<!-- 横向滑动 -->
<div id ="header">
<div id ="top-line"></div >
<div class="swiper-wrapper">
<div class="swiper-slide">新闻 </div >
<div class="swiper-slide">财经 </div >
<div class="swiper-slide">娱乐 </div >
<div class="swiper-slide">体育 </div >
<div class="swiper-slide">订阅 </div >
<div class="swiper-slide">微博 </div >
<div class="swiper-slide">空间 </div >
<div class="swiper-slide">书城 </div >
</div >
</div >
</body >
<script src ="https://cdn.bootcss.com/Swiper/4.3.0/js/swiper.min.js"></script>
<script >
var navSwiper = new Swiper ('#header', {
freeMode : true,
slidesPerView : 'auto',
freeModeSticky : true,
});
</script>
</html > |
学习学习 🙂 🙂