HTML/CSS——PC端QQ飞车官网首页
原作品效果：
仿制品效果：
代码：
HTML
QQ飞车官网首页
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: 980px;margin:0 auto;position: relative;}
.container-fluid{width: 100%;}
#head {background: url('../image/head_bg.png') repeat-x;}
#head .container{height: 41px;}
#head .head_logo{width:220px;height: 41px; background: url(../image/ost-bg.png) no-repeat 0 -38px;}
#head .head_logo a{display: block;width: 100%;height: 100%;text-indent: -9999px;overflow: hidden;}
#head .head_ad{margin-left: 8px;}
#head .head_menu{font-size: 12px;}
#head .head_menu div{height: 18px;margin-top: 13px;background: url(../image/ost-bg.png) no-repeat ;}
#head .head_menu .head_menu_pt{margin-right: 26px;padding-left: 20px;
background: url(../image/logo_mini.png) no-repeat;background-position-y: -1px;}
#head .head_menu .head_menu_top{width: 100px;}
#head .head_menu .head_menu_top a{width: 84px;}
#head .head_menu .head_menu_top i{display:inline-block; width:11px;height:11px;margin-left:5px;margin-top: 2px;
background: url(../image/ost-bg.png) no-repeat -150px -134px;}
#head .head_menu .head_menu_top i:hover{
background: url(../image/ost-bg.png) no-repeat -170px -134px;cursor: pointer;}
#main { height: 1000px; background: url(../image/bg20190709.jpg) no-repeat center 0;}
#nav {overflow: hidden;
background: url(../image/nav_down_re.png) repeat-x,url(../image/nav.png) no-repeat center 0;}
#nav .container{min-height: 236px; position: relative;overflow: hidden;}
#nav .nav_logo{width: 138px;height: 112;margin: 15px auto;}
#nav dl{position: absolute;top: 0}
#nav dt{height: 75px;}
#nav dt a{width:100%;height: 100%;display: block;text-indent: -99999px;overflow: hidden;}
#nav dd{line-height: 27px;font-size: 12px;text-align: center;}
#nav dd a{color: white;position: relative;}
#nav dd a:hover{color: red;text-decoration:underline; }
#nav dd a.hot:after,#nav dd a.new:after{content: "";display: block;width: 12px;height: 12px;
background: url(../image/nav_tips.png) no-repeat;position: absolute;right: -15px;top:0; }
#nav dd a.hot:after{background-position: 0px -12px;}
#nav dd a.new:after{background-position: 0px 0px;}
#nav .nav_index{width: 75px;left: 0px;}
#nav .nav_zl{width: 75px;left: 98px;}
#nav .nav_ss{width: 75px;left: 203px;}
#nav .nav_hd{width: 75px;left: 323px;}
#nav .nav_sc{width: 75px;left: 565px;}
#nav .nav_sp{width: 75px;left: 686px;}
#nav .nav_wj{width: 75px;left: 803px;}
#nav .nav_kf{width: 70px;left: 910px;}
#link {height: 199px;}
#link a{width:463px;height: 100%;display: block;margin: 0 auto;}
#banner {height: 276px;background: url(../image/top.png) no-repeat;margin-top: 2px;}
#banner .banner_left{width: 240px;height: 314px; margin: -20px 0 0 7px;
background: url(../image/down_user_spr.png) no-repeat;}
#banner .banner_download p{width: 91px;height: 25px;margin: 0 auto;
text-indent: -99999px;overflow: hidden;
background: url(../image/down_user_spr.png) no-repeat}
#banner .banner_download p:first-child{background-position:-253px 0;margin-top: 44px;}
#banner .banner_download p:last-child{background-position:-253px -25px;}
/*动画*/
#banner .banner_download:hover p:first-child{animation: 1s upMove;}
@keyframes upMove{
0%{transform: translateY(-40px);opacity: 0;}
100%{transform:translateY(0);opacity: 1;}
}
#banner .banner_download:hover p:last-child{animation: 1s downMove;}
@keyframes downMove{
0%{ transform: translateY(40px);opacity: 0;}
100%{ transform: translateY(0);opacity: 1;}
}
/*结束*/
#banner .banner_user{}
#banner .banner_user div{width:56px;height: 56px; border-radius: 50%;margin: 80px auto 0 auto;border: 3px #283257 solid;
box-sizing: border-box;overflow: hidden;}
#banner .banner_user div img{width: 100%;height: 100%;}
#banner .banner_user p{text-align: center;font-size: 12px;color: white;margin-top: 25px;}
#banner .banner_user p a{color: #34f1d0};
#banner .banner_center{}
#banner .banner_center .banner_list {
width: 495px;height: 253px; overflow: hidden;margin: 14px 0 0 6px;position: relative;}
#banner .banner_center .banner_list .banner_list_ul{widows: 20000px;}
#banner .banner_center .banner_list .banner_list_ul li{widows: 495px;height: 253px;float: left;}
#banner .banner_center .banner_list .banner_bottomline{width: 100%;
height: 37px;background: rgba(0,0,0,.5);position: absolute;bottom: 0;left: 0;
border-top:1px #514b55 solid;}
#banner .banner_center .banner_list .banner_bottomline .banner_bottomline_ul{
margin-top:11px; text-align: center;}
#banner .banner_center .banner_list .banner_bottomline .banner_bottomline_ul li{
display: inline-block;width: 15px;height: 15px;cursor: pointer;
background: url(../image/top.png) no-repeat -603px -299px;
}
#banner .banner_center .banner_list .banner_bottomline .banner_bottomline_ul li.active{
background: url(../image/top.png) no-repeat -581px -299px;
}
#banner .banner_center .banner_list .banner_bottomline .banner_bottomline_lbtn{
width: 12px;height: 22px;cursor: pointer;
position: absolute;left: 5px;top: 5px;background: url(../image/top.png) no-repeat -542px -296px;
}
#banner .banner_center .banner_list .banner_bottomline .banner_bottomline_rbtn{
width: 12px;height: 22px;cursor: pointer;
position: absolute;right: 5px;top: 5px;background: url(../image/top.png) no-repeat -554px -296px;
}
#banner .banner_center .banner_list .banner_bottomline .banner_bottomline_lbtn:hover{
background-position: -542px -325px;
}
#banner .banner_center .banner_list .banner_bottomline .banner_bottomline_rbtn:hover{
background-position: -554px -325px;
}
#banner .banner_center .banner_list .banner_list_lt{
position: absolute;width: 12px;height: 12px;background: url(../image/top.png) no-repeat -621px -299px;
left: -3px;top: -6px;
}
#banner .banner_center .banner_list .banner_list_rt{
position: absolute;width: 12px;height: 12px;background: url(../image/top.png) no-repeat -634px -299px;
right: -3px;top: -1px;
}
#banner .banner_center .banner_list .banner_list_rb{
position: absolute;width: 12px;height: 12px;background: url(../image/top.png) no-repeat -634px -312px;
right: -1px;bottom: -7px;
}
#banner .banner_center .banner_list .banner_list_lb{
position: absolute;width: 12px;height: 12px;background: url(../image/top.png) no-repeat -621px -312px;
left: -2px;bottom: -9px;
}
#banner .banner_right{ width: 209px;height: 255px;position: relative;margin: 14px 0 0 12px;}
#banner .banner_right .banner_right_lt{
position: absolute;width: 15px;height: 15px;background: url(../image/top.png) no-repeat -681px -298px;
left: -4px;top: -6px;
}
#banner .banner_right .banner_right_rt{
position: absolute;width: 15px;height: 15px;background: url(../image/top.png) no-repeat -696px -298px;
right: -4px;top: -5px;
}
#banner .banner_right .banner_right_rb{
position: absolute;width: 15px;height: 15px;background: url(../image/top.png) no-repeat -696px -313px;
right: -4px;bottom: -6px;
}
#banner .banner_right .banner_right_lb{
position: absolute;width: 15px;height: 15px;background: url(../image/top.png) no-repeat -681px -313px;
left: -4px;bottom: -5px;
}