HTML/CSS——PC端QQ飞车官网首页
生活随笔
收集整理的這篇文章主要介紹了
HTML/CSS——PC端QQ飞车官网首页
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
原作品效果：
仿制品效果：
?
代碼：
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飛車官網(wǎng)首頁(yè)</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="#">成長(zhǎng)守護(hù)平臺(tái)</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="#">首頁(yè)</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>，進(jìn)入飛車世界</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;} /*動(dòng)畫*/ #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;} } /*結(jié)束*/ #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; }?
總結(jié)
以上是生活随笔為你收集整理的HTML/CSS——PC端QQ飞车官网首页的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： HTML/CSS——PC端博文尚美网页
- 下一篇： HTML、HTML5、XML、XHMTL