/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>qq飞车</title>
<style>
*{padding: 0;margin: 0;}
img{display: block;}
header{height: 40px;width: 100%;}
a{text-decoration: none;color: white;}
ul,li{list-style: none;}
.r{float: right;}
.l{float: left;}
.conta{width: 1080px;margin: 0 auto;}
hgroup>a{float: left;display: block;width: 220px;height: 41px;}
hgroup>a:first-child{background: url(./images/ost-bg.png) no-repeat 0 -38px;margin-right: 8px;}
hgroup>span{float: right;margin-left: 20px;line-height: 40px;
background: url(./images/ost-bg.png) no-repeat;}
hgroup>span:first-child{ background-position: right -75px;padding-right: 18px;}
hgroup>span:last-child{background-position:left -80px;padding-left: 20px;}
main{background: url(./images/bg20190104.jpg) no-repeat;width: 100%;}
main .main-list{height: 60px;background: rgb(44, 41, 41);opacity: .5;border: 1px skyblue solid;}
main .main-list>ul{height: 236px;}
main .main-list>ul>li{float: left;margin-left:40px;height: 60px;}
main .main-list>ul>p {font-size:16px;font-weight: bold;margin-top:10px;}
main .main-list>ul>li>span{font-size:10px;}
.clear::after{content: "";display: block;clear:both;}
.aa{background-color: red;}
</style>
</head>
<body>
<header >
<div class="conta">
<hgroup class="l">
<a href="#"></a>
<a href="#"><img src="./images/ad.jpg" alt=""></a>
</hgroup>
<hgroup class="r">
<span>成长守护平台</span>
<span>腾讯游戏排行榜</span>
</hgroup>
</div>
</header>
<main class="clear">
<div class="main-list conta ">
<ul class=" ">
<li><a href="#"><p>首页</p><span>HOME</span></a></li>
<li><a href="#"><p>游戏资料</p><span>GAME</span></a>
<ul>
<li>新手指导</li>
<li>官方漫画<span>H</span></li>
<li>飞车手游<i>N</i></li>
<li>精美壁纸</li>
<li>游戏下载</li>
</ul>
</li>
<li><a href="#"><p>赛事中心</p><span>RACE</span></a>
<ul>
<li>SSC<span>H</span></li>
<li>谁是车王</li>
<li>全民争霸</li>
</ul>
</li>
<li><a href="#"><p>活动中心</p><span>EVENT</span></a>
<ul>
<li>版本专区<span>H</span></li>
<li>合作专区</li>
<li>CDK兑换</li>
</ul>
</li>
</ul><div class="aa">aaaaaaaaaaaaaaaaaaa</div>
<div class="aa">aaaaaaaaaaaaaaaaaaa</div>
<div class="aa">aaaaaaaaaaaaaaaaaaa</div>
</div>
</main>
</body>
</html>