From 0abfe65a4f1e4db36012852d5812e2834f4b6f74 Mon Sep 17 00:00:00 2001 From: Lee <342694918@qq.com> Date: Sun, 23 Jan 2022 13:24:19 +0800 Subject: [PATCH] 0123 --- css/style.css | 201 ++++++++++++++++++++------------------------------ 1 file changed, 79 insertions(+), 122 deletions(-) diff --git a/css/style.css b/css/style.css index c92f7c1..3aed3dc 100644 --- a/css/style.css +++ b/css/style.css @@ -1,122 +1,79 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - -webkit-font-smoothing: antialiased; - font-size: 20px; -} - -img { - border: 0; - vertical-align: middle; - display: block; - object-fit: cover; -} - -/* 轮播样式 */ -.banner-swiper { - overflow-x: hidden; - height: auto; - position: relative; - background-color: #FFFFFF; -} - -.banner-swiper .swiper-slide { - position: relative; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; -} - -/* 分页器 */ -.banner-swiper .swiper-container-horizontal>.swiper-pagination-bullets, -.banner-swiper .swiper-pagination-custom, -.banner-swiper .swiper-pagination-fraction { - font-size: 16px; - font-weight: bold; - color: #fff !important; - bottom: 120px; -} - -/* 指示点默认样式 */ -.banner-swiper .swiper-pagination-bullet { - width: 13px; - height: 13px; - background-color: #d5ddf5; - margin: 0 6px !important; - cursor: pointer; - opacity: 1; -} - -.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active { - background-color: #f6ab00; -} - -/* 内容 */ -.content img{ - width: 100%; -} -.foot{ - position: relative; -} -.foot img{ - width: 100%; -} -.back{ - display: flex; - align-items: center; - position: absolute; - text-decoration: none; - left: 50%; - bottom: 16.5%; - transform: translateX(-50%); -} -.back>span{ - display: block; - font-family: "仿宋"; - font-size: 22px; - line-height: 38px; - font-weight: bold; - color: #cd322e; - margin: 0 20px; -} -.back>ins{ - display: block; - width: 12px; - height: 12px; - border-radius: 100%; - background-color: #cd322e; -} -@media screen and (max-width:900px){ - .back>span{ - font-size: 16px; - line-height: 24px; - margin: 0 10px; - } - .back>ins{ - display: block; - width: 8px; - height: 8px; - border-radius: 100%; - background-color: #cd322e; - } -} - -@media screen and (max-width:780px){ - .back>span{ - font-size: 14px; - line-height: 24px; - margin: 0 10px; - } - .back>ins{ - display: block; - width: 8px; - height: 8px; - border-radius: 100%; - background-color: #cd322e; - } -} +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + -webkit-font-smoothing: antialiased; + font-size: 20px; +} + +img { + border: 0; + vertical-align: middle; + display: block; + object-fit: cover; +} + +/* 轮播样式 */ +.banner-swiper { + overflow-x: hidden; + height: auto; + position: relative; + background-color: #FFFFFF; +} + +.banner-swiper .swiper-slide { + position: relative; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +/* 分页器 */ +.banner-swiper .swiper-container-horizontal>.swiper-pagination-bullets, +.banner-swiper .swiper-pagination-custom, +.banner-swiper .swiper-pagination-fraction { + font-size: 16px; + font-weight: bold; + color: #fff !important; + bottom: 120px; +} + +/* 指示点默认样式 */ +.banner-swiper .swiper-pagination-bullet { + width: 13px; + height: 13px; + background-color: #d5ddf5; + margin: 0 6px !important; + cursor: pointer; + opacity: 1; +} + +.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet-active { + background-color: #f6ab00; +} + +/* 内容 */ +.content img{ + width: 100%; +} +/* 尾部 */ +.foot{ + position: relative; +} +.foot img{ + width: 100%; +} +.toTop{ + display: block; + width: 15%; + height: 35%; + position: absolute; + left: 50%; + bottom: 8%; + transform: translateX(-50%); + cursor: pointer; +}