HTML/CSS——PC端QQ飞车官网首页

原作品效果：

仿制品效果：

代码：

HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="./style/common.css"><title>QQ飞车官网首页</title>
</head>
<body><div id="head" class="container-fluid"><div class="container"><div class="head_logo l"><a href="#">腾讯游戏</a></div><div class="head_ad l"><a href="#"><img src="./image/ad.jpg" alt=""></a></div><div class="head_menu r"><div class="head_menu_pt l"><a href="#">成长守护平台</a></div><div class="head_menu_top l"><a class="l" href="#">腾讯游戏排行榜</a><i calss="l" ></i></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="./image/inside_logo.png" alt="QQ飞车" title="QQ飞车"></a></div><dl class="nav_index"><dt><a href="#">首页</a></dt></dl><dl class="nav_zl"><dt></dt><dd><a href="#">新手指引</a></dd><dd><a class="hot" href="#">官方漫画</a></dd><dd><a class="new" href="#">飞车手游</a></dd><dd><a href="#">精美壁纸</a></dd><dd><a href="#">游戏下载</a></dd></dl><dl class="nav_ss"><dt></dt><dd><a href="#">新手指引</a></dd><dd><a href="#">官方漫画</a></dd><dd><a href="#">飞车手游</a></dd><dd><a href="#">精美壁纸</a></dd><dd><a href="#">游戏下载</a></dd></dl><dl class="nav_hd"><dt></dt><dd><a href="#">新手指引</a></dd><dd><a href="#">官方漫画</a></dd><dd><a href="#">飞车手游</a></dd><dd><a href="#">精美壁纸</a></dd><dd><a href="#">游戏下载</a></dd></dl><dl class="nav_sc"><dt></dt><dd><a href="#">新手指引</a></dd><dd><a href="#">官方漫画</a></dd><dd><a href="#">飞车手游</a></dd><dd><a href="#">精美壁纸</a></dd><dd><a href="#">游戏下载</a></dd></dl><dl class="nav_sp"><dt></dt><dd><a href="#">新手指引</a></dd><dd><a href="#">官方漫画</a></dd><dd><a href="#">飞车手游</a></dd><dd><a href="#">精美壁纸</a></dd><dd><a href="#">游戏下载</a></dd></dl><dl class="nav_wj"><dt></dt><dd><a href="#">新手指引</a></dd><dd><a href="#">官方漫画</a></dd><dd><a href="#">飞车手游</a></dd><dd><a href="#">精美壁纸</a></dd><dd><a href="#">游戏下载</a></dd></dl><dl class="nav_kf"><dt></dt><dd><a href="#">新手指引</a></dd><dd><a href="#">官方漫画</a></dd><dd><a href="#">飞车手游</a></dd><dd><a href="#">精美壁纸</a></dd><dd><a href="#">游戏下载</a></dd></dl></div></div><div id="link" class="container"><a href="#"></a></div><div id="banner" class="container"><div class="banner_left l"><div class="banner_download"><p>下载游戏</p><p>DOWNLOAD</p></div><div class="banner_user"><div><img src="./image/56x56.jpg" alt=""></div><p>欢迎<a href="#">登录</a>，进入飞车世界</p></div></div><div class="banner_center l"><div class="banner_list"><ul class="banner_list_ul"><li><a href="#"><img src="http://ossweb-img.qq.com/upload/adw/image/20190804/66b1dc4410b8e24196a82be791f47894.png" alt=""></a></li><li><a href="#"><img src="http://ossweb-img.qq.com/upload/adw/image/20190804/66b1dc4410b8e24196a82be791f47894.png" alt=""></a></li><li><a href="#"><img src="http://ossweb-img.qq.com/upload/adw/image/20190804/66b1dc4410b8e24196a82be791f47894.png" alt=""></a></li><li><a href="#"><img src="http://ossweb-img.qq.com/upload/adw/image/20190804/66b1dc4410b8e24196a82be791f47894.png" alt=""></a></li></ul><div class="banner_bottomline"><ul class="banner_bottomline_ul" ><li class="active"></li><li></li><li></li><li></li></ul><div class="banner_bottomline_lbtn"></div><div class="banner_bottomline_rbtn"></div></div><i class="banner_list_lt"></i><i class="banner_list_lb"></i><i class="banner_list_rt"></i><i class="banner_list_rb"></i></div></div><div class="banner_right l"><a href="#"><img src="./image/8217e53532b00c2caa1035a3e4cca8aa.jpeg" alt=""></a><i class="banner_right_lt"></i><i class="banner_right_lb"></i><i class="banner_right_rt"></i><i class="banner_right_rb"></i></div></div></div>
</body>
</html>

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;
}

HTML/CSS——PC端QQ飞车官网首页相关推荐

QQ飞车官网幻灯片轮播功能的实现
首先贴出HTML代码: <div class="banner_center l"><div class="banner_list">&l ...
html实训QQ音乐官网首页制作
QQ音乐官网首页 html <!DOCTYPE html> <html lang="en"> <head><link rel=" ...
运用HTML+CSS+JS简单制作苹果官网首页
运用HTML+CSS+JS制作苹果官网首页上次例会所留任务是用上HTML+CSS+JS做一个网页.内容自定. 我想的是做一个苹果官网首页的网页. 大概是这样的:苹果官网首页我所做的和它相差不多不 ...
web前端大作业(基于HTML+CSS+JavaScript仿阴阳师游戏官网首页作业制作)
仿制QQ会员官网主页Html
在idea使用html+css 简单仿制QQ会员官网主页页面附带登录页面跳转登陆页面导航栏设置固定底部信息栏附加根据鼠标在页面滑动的距离设置自动隐藏和显示登录页面在点击登录后,实现覆盖整个页 ...
用Vue高仿qq音乐官网-pc端
用Vue高仿qq音乐官网-pc端一直想做一个vue项目然后呢我就做了http://www.tuicool.com/articles/eymeiiN 效果预览部分地方不全部根据原版,也有自由发挥 ...
PC端QQ登录界面的测试用例
PC端QQ登录界面的测试用例功能设置选项中网络设置选项能否正常使用设置选项中登录服务器选项能否正常使用不输入账号密码是否能登录输入账号与密码匹配是否能登录输入账号与密码不匹配是否能登录 ...
仿qq音乐官网部分静态页面
简介: 这是我在刚学html和css的时候看着qq音乐官网自己敲的部分静态页面, 一共有五个静态页面,如下图首页部分: 歌手部分: 新碟部分: 排行榜部分(可播放音乐): 分类歌单部分:
计算机中xp系统中qq文件,PC端QQ中的腾讯文档怎么使用
PC端QQ中的腾讯文档怎么使用腾讯视频/爱奇艺/优酷/外卖充值4折起今天给大家介绍一下PC端QQ中的腾讯文档怎么使用的具体操作步骤. 1. 首先打开电脑上的QQ软件,登录进入主面板后,点击底部的 ...

HTML/CSS——PC端QQ飞车官网首页

HTML/CSS——PC端QQ飞车官网首页相关推荐

最新文章

热门文章