<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="main-wrapper">
<header>
<nav>
</nav>
<div id="banner">
<div class="inner">
<h1>羽毛球</h1>
<h4 class="sheading">我们都很平凡，但是我们可以做成一些不平凡的事。</h4>
</div>
</div>
</header>
</section>
<section class="gray-section">
<div class="article-preview">
<div class="img-section">
<img src="./yb.png"></div>
<div class="text-section">
<h2>羽毛球介绍</h2>
<p>羽毛球是一项室内、室外都可以进行的体育运动。依据参与的人数，可以分为单打与双打，及新兴的3打3。羽毛球拍由：拍面、拍杆、拍柄及拍框与拍杆的接头构成。一支球拍的长度不超过680毫米，其中球拍柄与球拍杆长度不超过41厘米，拍框长度为28厘米，宽为23厘米，随着科学技术的发展，球拍的发展向着重量更轻、拍框更硬、拍杆弹性更好的方向发展。</p>
<a href="https://baike.baidu.com/item/%E7%BE%BD%E6%AF%9B%E7%90%83/32511?fr=aladdin#4_1">了解更多</a>
</div>
</div>
<div class="article-preview">
<div class="text-section">
<h2>羽毛球历史</h2>
<p>早在两千多年前，一种类似羽毛球运动的游戏就在中国，印度等国出现。中国叫打手毽，印度叫浦那，西欧等国则叫做毽子板球。十九世纪七十年代，英国军人将在印度学到的浦那游戏带回国，作为茶余饭后和休息时的消遣娱乐活动。</p>
<p> 据传，在14世纪末，日本出现了把樱桃插上美丽的羽毛当球，两人用木板来回对打的运动。这就是羽毛球运动的原形</p>
</div>
<div class="img-section">
<img src="./2.jpg">
</div>
</div>
<div class="article-preview">
<div class="img-section">
<img src="3.jpg" >
</div>
<div class="text-section">
<h2>比赛规则</h2>
<p>（1）采用21分制，即双方分数先达21分者胜，3局2胜。每局中，一方先得21分且领先至少2分即算该局获胜，否则继续比赛；若双方打成29平后，一方领先1分，即算该局取胜。</p>
<p>（2）新制度中每球得分，并且除特殊情况（比如地板湿了，球打坏了），球员不可再提出中断比赛的要求。但是，每局一方以11分领先时，比赛进行1分钟的技术暂停，让比赛双方进行擦汗、喝水、休息等。</p>
<p>（3）得分者方有发球权，如果本方当前得分为单数，从左边发球；当前得分为双数，从右边发球。在第三局或只进行一局的比赛中，当一方分数首先到达11分时，双方交换场区 </p>
<a href="#">回到顶部</a>
</div>
</div>
</section>
</div>
</body>
</html>
<style>
header
{
background:url(by.jpg);
background-repeat:no-repeat; background-size:100% 100%;-moz-background-size:100% 100%;
}
#banner{
background: transparent;
height: 700px;
}
#banner .inner
{
background-color:rgba(255,255,255,0.3);
max-width: 300px;
text-align: center;
margin: 0 auto;
position: relative;
top: 160px;
}
#banner .inner h1
{
margin: 0;
color: #000;
}
.sub-heading
{
line-height: 30px;
margin: 30px 0;
color: #fff;
}
.sheading
{
line-height: 30px;
margin: 30px 0;
color: #000;
}
h2
{
font-size: 30px;
}
h3
{
font-size: 24px;
}
p
{
font-size: 18px;
letter-spacing: 1px;
}
a
{
font-size: 18px;
letter-spacing: 1px;
}
.sub-heading
{
font-size: 18px;
}
#main-btn
{
padding: 14px 28px;
font-size: 20px;
letter-spacing: 4px;
border-collapse: 6px;
background: #18a;
}
.icon-group
{
margin-top: 60px;
}
.wrapper
{
max-width: 1080px;
margin: 0 auto;
}
.gray-section
{
background: #252F34;
color: #fff;
}
.gray-section .img-section
{
width: 45%;
margin: 0;
}
.img-section img
{
width: 100%
}
.gray-section .text-section
{
width: 55%;
}
.article-preview > div
{
float: left;
font-size: 0;
}
.article-preview:nth-child(odd)
{
background-color: rgba(255,255,255,0.05);
}
.article-preview:after
{
content: '';
display: block;
clear: both;
}
.text-section
{
position: relative;
top: 68px;
left: 50px;
}
.text-section h2
{
margin-bottom: 20px;
}
.text-section .sub-heading
{
font-size: 22px;
margin-top: 0;
}
.text-section p
{
font-size: 18px;
letter-spacing: 1px;
}
.text-section > *{
max-width: 90%;
}
.purple-section
{
padding: 80px;
background: #3F3965;
color: #fff;
}
.main-wrapper
{
background: #444 url(img/icon04.png);
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
}</style>
