pc游戏端
1.html
<!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>
<link rel="stylesheet" href="./pc游戏端.css">
</head>
<body>
<div id="head" class="container-fluid ">
<div class="container ">
<div class="head_logo">
<a href="#">腾讯游戏</a>
</div>
<div class="head_ad">
<a href="#">腾讯游戏</a>
</div>
<div class="head_menu r">
<div class="head_czsh l">
<a href="#">成长守护平台</a>
</div>
<div class="head_top l">
<a href="#">腾讯游戏排行榜</a>
</div>
</div>
</div>
</div>
<div id="main" class="container-fluid ">
<div id="nav" class="container-fluid">
<div class="container">
<div class="nav_logo">
<a href="#">
<img src="./images/inside_logo.png" alt="QQ飞车" title="QQ飞车">
</a>
</div>
<div class="content">
<ul class="first_row">
<li><a href="#">首页</a></li>
</ul>
<ul class="second_row">
<li>
<a href="#">新手指引</a>
</li>
<li>
<a href="#">官方漫画</a>
</li>
<li>
<a class="hot" href="#">飞车手游</a>
</li>
<li>
<a href="#">精美壁纸</a>
</li>
<li>
<a href="#">游戏下载</a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
</ul>
<ul class="third_row">
<li>
<a href="#">SSC</a>
</li>
<li>
<a href="#">谁是车王</a>
</li>
<li>
<a href="#">全民争霸赛</a>
</li>
</ul>
<ul class="fourth_row">
<li>
<a href="#">版本专区</a>
</li>
<li>
<a href="#">合作专区</a>
</li>
<li>
<a href="#">CDK兑换</a>
</li>
</ul>
<ul class="fiveth_row">
<li>
<a href="#">紫钻专区</a>
</li>
<li>
<a href="#">道具城</a>
</li>
<li>
<a href="#">点券充值</a>
</li>
</ul>
<ul class="sixth_row">
<li>
<a href="#">教学视频</a>
</li>
<li>
<a href="#">视频中心</a>
</li>
</ul>
<ul class="seventh_row">
<li>
<a href="#">官方论坛</a>
</li>
<li>
<a href="#">掌上飞车</a>
</li>
<li>
<a href="#">兴趣部落</a>
</li>
<li>
<a href="#">官方微信</a>
</li>
<li>
<a href="#">官方微博</a>
</li>
</ul>
<ul class="eighth_row">
<li>
<a href="#">客服中心</a>
</li>
<li>
<a href="#">安全信用体系</a>
</li>
<li>
<a href="#">封号查询</a>
</li>
<li>
<a href="#">游戏安全评测</a>
</li>
<li>
<a href="#">道具删除找回</a>
</li>
</ul>
</div>
</div>
</div>
<div id="link" class="container">
<a href="#"></a>
</div>
<div id="banner" class="container">
<div class="banner_container ">
<div class="banner_l l">
<p class="first_row">下载游戏</p>
<p class="second_row">DOWNLOAD</p>
<div>
<img src="./images/56x56.jpg" alt="">
</div>
<p class="third_row">欢迎<a href="#">登陆</a>。进入飞车世界</p>
</div>
<div class="banner_c l">
<div class="banner_list">
<ul class="banner_list_ul">
<li>
<a href="#"><img src="./images/background.png" alt=""></a>
</li>
<li>
<a href="#"> <img src="./images/background.png" alt="">
</a>
</li>
<li>
<a href="#">
<img src="./images/background.png" alt="">
</a>
</li>
</ul>
<div class="banner_btn" >
<ul >
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="banner_btn_l"></div>
<div class="banner_btn_r"></div>
</div>
<i class="banner_list_lt"></i>
<i class="banner_list_rt"></i>
<i class="banner_list_lb"></i>
<i class="banner_list_rb"></i>
</div>
</div>
<div class="banner_r l">
<a href="#"><img src="./images/bebae86c3d1f64d50a53434ed5458d22-80.jpg" alt=""></a>
<i class="banner_r_lt"></i>
<i class="banner_r_rt"></i>
<i class="banner_r_lb"></i>
<i class="banner_r_rb"></i>
</div>
</div>
</div>
</div>
</body>
</html>
2.css
*{ margin:0; padding:0;}
ul,ol{ list-style: none;}
img{ display: block;}
a{ text-decoration: none; color:#464646;}
h1,h2,h3{ font-size:16px;}
body{ font-family: Arial , '宋体';}
.l{ float:left;}
.r{ float:right;}
.clear:after{ content:"";
display: block;
clear:both;
}
.container{ width:1010px;
margin:0 auto;
position: relative;
}
.container-fluid{ width:100%;}
#head{background: url(./images/head_bg.png) repeat-x;}/* head里面存放背景，要将整个通栏铺满 */
#head .container{height: 41px;}/* 这里面只放图片和菜单 */
#head .head_logo{height: 100%;
width: 220px;
background: url(./images/ost-bg.png) 0px -38px no-repeat ;
position: absolute;
}
#head .head_logo a{display: block;
width: 100%;
height: 100%;
text-indent: -9999px;
overflow: hidden;
}
#head .head_ad{background: url(./images/ad.jpg) no-repeat;
width: 230px;
left: 235px;
position: absolute;
}
#head .head_ad a{display: block;
width: 100%;
height: 41px;
text-indent: -9999px;
overflow: hidden;
}
#head .head_menu{line-height: 41px;height: 100%;}/*当父元素加overflow而子元素中有绝对定位时，高度不会被隐藏，显示子元素正常高度*/
#head .head_czsh{background: url(./images/ost-bg.png) no-repeat left -78px;padding-left: 20px;}
#head .head_czsh a{font-family:'SimSun';
color: black;
font-size: 12px;
}
#head .head_top{margin-left:26px ;
background: url(./images/ost-bg.png) no-repeat right -77px;
padding-right: 18px ;
}/* 作者在div里面加了margin-top:13px；而我这里没有加，因此相较于原作我的要向下移动13x才能达到和作者相同的位置 */
#head .head_top a{font-family:'SimSun';color: black;font-size: 12px;}
#main{ background:url(./images/bg20190104.jpg) no-repeat center 0;min-height: 780px;}/*加载整个大的背景图*/
#nav{ background:url(./images/nav_down_re.png) repeat-x,url(./images/nav.png) no-repeat center 0;}/*在通栏里加载遮盖板背景图,并且将其置于导航栏的上方，后写的url在下面，先写的在上面 */
#nav .container{overflow: hidden;height: 236px;}
#nav .nav_logo{ width:138px; height:112px;margin: 15px auto;}
#nav .container .content{text-align: center;
width: 100%;
height: 236px;
position: absolute;
top: 0;}
#nav .container .content li{margin-bottom: 10px;}
#nav .container .content a{font-size: 13px;
color: white;
}
#nav .container .content a:hover{color: red;
text-decoration: underline;
}
#nav .container .content .first_row{position: absolute;
top: 17px;
left: 36px;
height: 66px;
width: 65px;
}
#nav .container .content .first_row a{ width:100%;
height:100%;
display: block;
text-indent:-9999px;
overflow: hidden;
}
#nav .container .content .first_row a:hover{text-decoration: none;color: #929292;}
#nav .container .content .second_row{position: absolute;top: 70px;left: 120px;font-size: 13px;}
#nav .container .content a{position: relative;}
#nav .container .content .second_row li{margin-bottom:10px;}
#nav .container .content .second_row li:nth-of-type(6){background: url(./images/nav_tips.png) no-repeat 0 -13px;position: absolute;top: 26px;left: 56px;width: 12px;height: 12px;}/*这里top和left的值不是相对于content原点的位置，而是相较于first_row原点的位置，因此可以用到content原点的距离减去到first_row原点的距离计算*/
#nav .container .content .second_row li a.hot:after{ content:"";
display: block;
width:12px;
height:12px;
background: url(./images/nav_tips.png) no-repeat;
position: absolute;
right:-15px; top: 0;
}
/*这里是以a为父元素进行绝对定位，在a的后面添加一个块，里面不写内容，引入一张图片，相对于父元素右边-15px，相较于上面0*/
#nav .container .content .third_row{position: absolute;
top:70px ;
left: 225px;
}
#nav .container .content .third_row li{margin-bottom: 10px;}
#nav .container .content .third_row a{font-size: 13px;color: white;}
#nav .container .content .third_row li:nth-of-type(1) a:after{content:"";
display: block;
width: 12px;
height: 12px;
background: url(./images/nav_tips.png) no-repeat 0 -13px;
position: absolute;
right: -15px;top: 0;
}
#nav .container .content .fourth_row{position: absolute;
top: 70px;
left: 350px;
font-size: 13px;
}
#nav .fourth_row li:nth-of-type(1) a:after,#nav .seventh_row li:nth-of-type(2) a:after{content: "";
display: block;
width: 12px;
height: 12px;
position: absolute;
top: 0;right: -15px;
background: url(./images/nav_tips.png ) no-repeat 0 -13px;
}
#nav .eighth_row li:nth-of-type(2) a:after, #nav .eighth_row li:nth-of-type(5) a:after{content: "";
display: block;
width: 12px;
height: 12px;
position: absolute;
top: 0;right: -15px;
background: url(./images/nav_tips.png ) no-repeat;
}
#nav .container .content .fiveth_row{position: absolute;
left: 590px;
top:70px;
}
#nav .container .content .sixth_row {position: absolute;
top: 70px;
left: 708px;
}
#nav .container .content .seventh_row{position: absolute;
top: 70px;
left: 827px;
}
#nav .container .content .eighth_row{position: absolute;
top: 70px;
left: 918px;
}
#link{height: 175px;}
#link a{display: block;width:533px ;height: 100%;margin: 0 auto;}
#banner{height: 390px;}
#banner .banner_container{background: url(./images/top.png) no-repeat center 35px;height: 310px;}
#banner .banner_container .banner_l{width: 260px;
height: 330px;
background: url(./images/down_user_spr.png) no-repeat 20px 16px;
overflow: hidden;
text-align: center;
}
#banner .banner_l .first_row{color: #ffffff;
font-size: 27px;
margin-top: 57px;
margin-left: 20px;
}
#banner .banner_l .second_row{color: #ffffff;
font-size:13px;
margin-top: 3px;
margin-left: 20px;
}
#banner .banner_l div img{width: 100%;
height: 100%;
}/*让img和div的宽高相等，以成比例的缩放达到图片剧中的效果*/
#banner .banner_l div{width: 56px;
height:56px;
border-radius: 50%;
margin-left:116px;
margin-top: 82px;
border: 4px solid #283257;
box-sizing: border-box;overflow: hidden;
}/*这里的img是个图片，box-sizing加到上面不起作用，因此将上面的样式全都加给img的父元素，同时使用overflow:hidden使img超出父元素的部分隐藏起来*/
#banner .banner_l .third_row{font-size:14px ;
color: #fff;
margin-left: 20px;
margin-top: 25px;
}
#banner .banner_l .third_row a{color: #34f1d0;}
#banner .banner_l:hover .first_row{ animation: upMove 1s; }
@keyframes upMove{
0%{ transform : translateY(-40px); opacity: 0; }
100%{ transform : translateY(0); opacity: 1; }
}
#banner .banner_l:hover .second_row{animation: 1s downMove;}
@keyframes downMove{
0%{ transform : translateY(40px); opacity: 0; }
100%{ transform : translateY(0); opacity: 1; }
}
#banner .banner_list{ width:497px;
height:253px;
overflow: hidden;
margin:49px 0 0 9px;
position: relative;
}
#banner .banner_list_ul{ width:2000px;}
#banner .banner_c .banner_list_ul li{float: left; width: 497px;height: 253px;}
#banner .banner_c .banner_btn ul{width: 497px;
height: 36px;
}
#banner .banner_c .banner_btn {width: 497px;
height: 36px;
background: rgba(0,0,0 0.5);
position:absolute;
left: 0;bottom: 0;
text-align: center;
border-top: 1px solid #514b55;
}
#banner .banner_c .banner_btn li{display: inline-block;
background: url(./images/top.png) no-repeat -603px -299px;
width: 15px;
height: 15px;
margin-top: 11px;
cursor: pointer;
}
#banner .banner_c .banner_btn li:first-of-type{background: url(./images/top.png) no-repeat -581px -299px;
width: 15px;
height: 15px;
margin-top: 11px;
}
#banner .banner_c .banner_btn_l{background: url(./images/top.png) no-repeat -542px -299px;
width: 10px;
height: 22px;
position: absolute;
left: 5px;top: 6px;
}
#banner .banner_c .banner_btn_r{background: url(./images/top.png) no-repeat -555px -297px;
width: 10px;
height: 20px;
position: absolute;
right: 7px;top: 6px;
}
#banner .banner_c .banner_btn_l:hover{background: url(./images/top.png) no-repeat -542px -326px;
width: 10px;
height: 20px;
position: absolute;
left: 5px;
top: 6px;
cursor: pointer;
}
#banner .banner_c .banner_btn_r:hover{background: url(./images/top.png) no-repeat -555px -326px;
width: 10px;
height: 20px;
position: absolute;
right: 7px;top: 6px;
cursor: pointer;
}
#banner .banner_c .banner_list_lt{background: url(./images/top.png) no-repeat -621px -299px;
left: -4px;
top: -5px;
width: 12px;
height: 12px;
position: absolute;
}
#banner .banner_c .banner_list_rt{background: url(./images/top.png) no-repeat -634px -299px;
right: -1px;top: -3px;
width: 12px;
height: 12px;
position: absolute;
}
#banner .banner_c .banner_list_lb{background: url(./images/top.png) no-repeat -621px -312px;
left: -4px;
bottom: -4px;
width: 12px;
height: 12px;
position: absolute;
}
#banner .banner_c .banner_list_rb{background: url(./images/top.png) no-repeat -634px -312px;
right: -1px;
bottom: -3px;
width: 12px;
height: 12px;
position: absolute;
}
#banner .banner_r{margin:47px 0 0 10px;position: relative;}
#banner .banner_r_lt{background: url(./images/top.png) no-repeat -681px -298px;position: absolute;
left: -5px;
top: -4px;
width: 15px;
height: 15px;
}
#banner .banner_r_lb{background: url(./images/top.png) no-repeat -681px -315px;position: absolute;
left: -6px;
bottom: -7px;
width: 15px;
height: 15px;
}
#banner .banner_r_rt{background: url(./images/top.png) no-repeat -696px -298px;
position: absolute;
right: -5px;
top: -4px;
width: 15px;
height: 15px;
}
#banner .banner_r_rb{background: url(./images/top.png) no-repeat -696px -315px;
position: absolute;
right: -8px;
bottom: -7px;
width: 15px;
height: 15px;
}
扫一扫
753
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
