diff --git a/css/datouwang.com.css b/css/datouwang.com.css new file mode 100644 index 0000000..774c47f --- /dev/null +++ b/css/datouwang.com.css @@ -0,0 +1,96 @@ +/* DaTouWang URL: www.datouwang.com */ +body { + margin: 0; + padding: 0; +} + +h2, +h4 { + font-weight: normal; +} + +#persons { + position: relative; + width: 1200px; + margin: 0 auto +} + +#persons .swiper-container { + padding-bottom: 60px; +} + +#persons .swiper-slide { + width: 540px; + height: 340px; +} + +#persons .swiper-slide .text { + position: absolute; + left: 15%; + top: 20%; + width: 90%; + margin: 0 auto; + clear: both; + overflow: hidden; +} + +#persons .swiper-slide .text img { + float: left; + width: 120px; + height: 120px; + margin-right: 15px; + border: 2px solid #ededed; +} + +#persons .swiper-slide h2 { + float: left; + padding-top: 0; + text-align: center; + font-size: 20px; + margin-bottom: 10px; +} + +#persons .swiper-slide h4 { + float: left; + margin: 0; + width: 60%; + font-size: 16px; +} + +#persons .swiper-pagination { + width: 100%; + bottom: 20px; +} + +#persons .swiper-pagination-bullets .swiper-pagination-bullet { + margin: 0 5px; + border: 3px solid #fff; + background-color: #d5d5d5; + width: 10px; + height: 10px; + opacity: 1; +} + +#persons .swiper-pagination-bullets .swiper-pagination-bullet-active { + border: 3px solid #00aadc; + background-color: #fff; +} + +#persons .swiper-button-prev { + left: -30px; + top: 40%; + width: 45px; + height: 45px; +} + +#persons .swiper-button-prev:hover { + background-position: 0 -46px; + background-size: 100% +} + +#persons .swiper-button-next { + right: -30px; + top: 40%; + width: 45px; + height: 45px; +} diff --git a/pages/public/header.html b/pages/public/header.html index b021d8e..a09afc8 100644 --- a/pages/public/header.html +++ b/pages/public/header.html @@ -1,9 +1,81 @@ - + + - + Swiper demo + + + + + + - + + + +
+
+
Slide 1
+
Slide 2
+
Slide 3
+
Slide 4
+
Slide 5
+
Slide 6
+
Slide 7
+
Slide 8
+
Slide 9
+
Slide 10
+
+
+ + + + + diff --git a/pages/swiper/swiper.html b/pages/swiper/swiper.html new file mode 100644 index 0000000..c4d9e5c --- /dev/null +++ b/pages/swiper/swiper.html @@ -0,0 +1,91 @@ + + + + swiper卡片叠加点击切换代码演示_大头网 + + + + + + + + +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+ + + + +