index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>桥牌</title>
<link rel="stylesheet" href="./css/main.css">
<script src="./js/main.js"></script>
</head>
<body>
<header>
<a class="logo">
<img src="http://www.ccba.org.cn/App_Themes/Home/Images/CCBA(%E9%80%8F%E6%98%8E).gif" alt="">
<span class="title">中国桥牌网</span>
</a>
<label for="more"><svg t="1576477528553" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="3179" width="32" height="32">
<path d="M117.695051 275.3103m-53.602825 0a52.382 52.382 0 1 0 107.205651 0 52.382 52.382 0 1 0-107.205651 0Z"
p-id="3180" fill="#ffffff"></path>
<path d="M117.695051 512.00614m-53.602825 0a52.382 52.382 0 1 0 107.205651 0 52.382 52.382 0 1 0-107.205651 0Z"
p-id="3181" fill="#ffffff"></path>
<path
d="M171.297876 748.690724c0 29.600155-24.000624 53.601802-53.601802 53.601802-29.602202 0-53.602825-24.001647-53.602825-53.601802 0-29.602202 24.000624-53.603849 53.602825-53.603849C147.297252 695.086875 171.297876 719.088522 171.297876 748.690724z"
p-id="3182" fill="#ffffff"></path>
<path
d="M959.905728 275.3103c0 22.201651-18.007119 40.201607-40.201607 40.201607L275.153222 315.511907c-22.194488 0-40.201607-17.999956-40.201607-40.201607l0 0c0-22.201651 18.007119-40.201607 40.201607-40.201607l644.550898 0C941.898609 235.108692 959.905728 253.108648 959.905728 275.3103L959.905728 275.3103z"
p-id="3183" fill="#ffffff"></path>
<path
d="M959.905728 512.00614c0 22.195511-18.007119 40.201607-40.201607 40.201607L275.153222 552.207747c-22.194488 0-40.201607-18.006096-40.201607-40.201607l0 0c0-22.207791 18.007119-40.201607 40.201607-40.201607l644.550898 0C941.898609 471.804533 959.905728 489.798349 959.905728 512.00614L959.905728 512.00614z"
p-id="3184" fill="#ffffff"></path>
<path
d="M959.905728 748.690724c0 22.206768-18.007119 40.200584-40.201607 40.200584L275.153222 788.891308c-22.194488 0-40.201607-17.993816-40.201607-40.200584l0 0c0-22.194488 18.007119-40.202631 40.201607-40.202631l644.550898 0C941.898609 708.488093 959.905728 726.495212 959.905728 748.690724L959.905728 748.690724z"
p-id="3185" fill="#ffffff"></path>
</svg></label>
<input type="checkbox" name="" id="more">
<ul class="nav">
<li class="item active">主页</li>
<li class="item">资讯</li>
<li class="item">赛事</li>
<li class="item">会员</li>
<li class="item">组织</li>
<li class="item">桥技</li>
<li class="item">商城</li>
<li class="item">软件</li>
<li class="item">国家组织</li>
<li class="item">帮助</li>
</ul>
</header>
<main>
<div class="swiper">
<div class="wrapper">
<img src="./img/cyan.jpg" alt="">
<img src="./img/blue.jpg" alt="">
<img src="./img/green.jpg" alt="">
<img src="./img/pink.jpg" alt="">
<img src="./img/cyan.jpg" alt="">
</div>
</div>
<div class="container">
<div class="card">
<div class="card-left">
<div class="card-header">
桥牌讯
</div>
<ul class="card-body">
<li class="info-item">
<span class="title">国桥牌协会关于举办国家女子桥牌集训队选拔赛的通知</span>
<span class="time">11.29</span>
</li>
<li class="info-item">
<span class="title">中国桥牌协会关于举办2020-2021年度国家男子桥牌队选拔赛的通知</span>
<span class="time">11.29</span>
</li>
<li class="info-item">
<span class="title">第八次“十市百校杯”中学生网络桥牌对抗赛举办</span>
<span class="time">11.29</span>
</li>
<li class="info-item">
<span class="title">关于2020年全国桥牌A类俱乐部联赛承办单位的公示</span>
<span class="time">11.29</span>
</li>
<li class="info-item">
<span class="title">2019全国桥牌A类俱乐部联赛总决赛在桥牌之乡太仓开赛</span>
<span class="time">11.29</span>
</li>
</ul>
</div>
<div class="card-right">
<div class="card-header">
全国赛事
</div>
<ul class="card-body">
<li class="info-item">
<span class="title">国桥牌协会关于举办国家女子桥牌集训队选拔赛的通知</span>
<span class="time">11.29</span>
</li>
<li class="info-item">
<span class="title">中国桥牌协会关于举办2020-2021年度国家男子桥牌队选拔赛的通知</span>
<span class="time">11.29</span>
</li>
<li class="info-item">
<span class="title">第八次“十市百校杯”中学生网络桥牌对抗赛举办</span>
<span class="time">11.29</span>
</li>
<li class="info-item">
<span class="title">关于2020年全国桥牌A类俱乐部联赛承办单位的公示</span>
<span class="time">11.29</span>
</li>
<li class="info-item">
<span class="title">2019全国桥牌A类俱乐部联赛总决赛在桥牌之乡太仓开赛</span>
<span class="time">11.29</span>
</li>
</ul>
</div>
</div>
<div class="card">
<div class="card-left">
<div class="card-header">
桥牌讯
</div>
<ul class="card-body">
<li class="info-item">
<span class="title">国桥牌协会关于举办国家女子桥牌集训队选拔赛的通知</span>
<span class="time">11.29</span>
</li>
<li class="info-item">
<span class="title">中国桥牌协会关于举办2020-2021年度国家男子桥牌队选拔赛的通知</span>
<span class="time">11.29</span>
</li>
<li class="info-item">
<span class="title">第八次“十市百校杯”中学生网络桥牌对抗赛举办</span>
<span class="time">11.29</span>
</li>
<li class="info-item">
<span class="title">关于2020年全国桥牌A类俱乐部联赛承办单位的公示</span>
<span class="time">11.29</span>
</li>
<li class="info-item">
<span class="title">2019全国桥牌A类俱乐部联赛总决赛在桥牌之乡太仓开赛</span>
<span class="time">11.29</span>
</li>
</ul>
</div>
<div class="card-right bg-green">
<div class="card-header">
全国赛事
</div>
<ul class="card-body">
<li class="info-item">
<span class="title">国桥牌协会关于举办国家女子桥牌集训队选拔赛的通知</span>
<span class="time">11.29</span>
</li>
<li class="info-item">
<span class="title">中国桥牌协会关于举办2020-2021年度国家男子桥牌队选拔赛的通知</span>
<span class="time">11.29</span>
</li>
<li class="info-item">
<span class="title">第八次“十市百校杯”中学生网络桥牌对抗赛举办</span>
<span class="time">11.29</span>
</li>
<li class="info-item">
<span class="title">关于2020年全国桥牌A类俱乐部联赛承办单位的公示</span>
<span class="time">11.29</span>
</li>
<li class="info-item">
<span class="title">2019全国桥牌A类俱乐部联赛总决赛在桥牌之乡太仓开赛</span>
<span class="time">11.29</span>
</li>
</ul>
</div>
</div>
</div>
</main>
<footer>
<span style="color:#ffffff;">© 京ICP备17039047号<br>中国桥牌网 版权所有</span>
</footer>
</body>
</html>
CSS:
/* 初始化全局样式 */
* {
margin:0;
padding:0;
}
html {
color:#222;
font-size:14px;
line-height:1.5;
}
li {
list-style:none;
}
/* 头部 */
header {
display:flex;
min-height:60px;
padding:0 calc(50% -600px);
background-color:#013D06;
align-items:center;
margin-bottom:24px;
}
header > .logo {
display:flex;
margin-right:24px;
}
header > .logo >img {
width:40px;
}
header .title {
font-size:22px;
color:white;
line-height:40px;
}
header >input,
header >label {
display:none;
}
header > .nav {
display:flex;
height:100%;
align-items:center;
}
header > .nav .item {
padding:10px 16px;
color:rgba(255,255,255,.5);
cursor:pointer;
}
header > .nav .active {
color:#fff;
}
@media only screen and (max-width:960px) {
header {
justify-content:space-between;
padding:0 8px;
flex-wrap:wrap;
}
header >label {
display:block;
}
header .nav {
display:none;
}
header >input:checked+.nav {
display:block;
flex-basis:100%;
}
}
/* 主题 */
main {
padding:0 calc(50% -600px);
}
/* 轮播图 */
.swiper {
width:100%;
height:375px;
white-space:nowrap;
font-size:0;
transition:all .5s ease-in;
overflow:hidden;
}
.swiper .wrapper {
width:100%;
height:100%;
}
.swiper img {
width:100%;
height:100%;
object-fit:cover;
object-position:center;
}
/* 卡片 */
.card {
display:flex;
margin-top:16px;
width:100%;
font-size:0;
}
.card-left,
.card-right {
box-sizing:border-box;
border-radius:4px;
vertical-align:top;
border:1px solid rgba(0,0,0,.125);
}
.card-left {
width:58%;
margin-right:1%;
background-color:#f8f9fa;
color:#333;
vertical-align:top
}
.card-right {
background-color:#17a2b8;
width:41%;
color:white;
}
.card-header {
box-sizing:border-box;
font-size:24px;
background-color:rgba(0,0,0,.03);
width:100%;
padding:8px 12px;
border-bottom:1px solid rgba(0,0,0,.125);
}
.card-body {
font-size:14px;
padding:16px;
}
.card-body .info-item {
display:flex;
justify-content:space-between;
}
.card-body .info-item~.info-item {
margin-top:16px;
}
.card-body .info-item .time {
text-align:right;
}
.bg-green {
background-color:#28a745 !important;
}
@media only screen and (max-width:960px) {
main {
padding:8px;
}
header ul li{
text-align:center;
}
.card {
display:block;
}
.card-left,
.card-right {
width:100%;
}
.card-right {
margin-top:16px;
}
footer {
padding:8px !important;
}
}
/* 底部 */
footer {
padding:8px calc(50% -600px);
margin-top:30px;
background-color:#013D06;
}
JS：
window.onload = () => {
let swiper = document.querySelector('.wrapper')
let index =0
function next() {
index++
let width = swiper.clientWidth
if (index >= swiper.childElementCount-1) {
setTimeout(() => {
index =0
swiper.style.transition ='none'
swiper.style.transform =`translateX(0px)`
},500);
}else {
swiper.style.transition ='all .5s ease-in'
}
let offWidth = width * index
swiper.style.transform =`translateX(-${offWidth}px)`
}
setInterval(() => {
next()
},2000);
}
