之前做练习写的仿QQ会员首页，静态页面，基于html+css，对数据的严格把控，使其更接近于原页面，适合初学者练习。 效果图： 源码：
<!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"> <title>QQ会员页面导航</title> <style> body { margin: 0; padding: 0; height: 800px; background: url(image/bj.jpg) center top no-repeat black; } #list { width: 100%; height: 90px; background: rgba(0, 0, 0, 0.5); /* opacity: 0.5; */ } #list img { width: 143px; height: 90px; float: left; margin-left: 142px; margin-right: 22px; } ul { list-style: none; /*margin:16px auto;*/ margin-left: 150px; margin-top: 0px; padding-left: 50px; height: 50px; line-height: 88px; } li { display: inline-block; margin-right: 15px; } a { color: white; font-size: 16px; text-decoration: none; } a:hover { color: rgb(250, 51, 51); } /*登录按钮*/ #login { padding: 5px 10px; color: #FAD65C; border: 1px solid #FAD65C; border-radius: 10px; margin-left: 20px; } /*开通超级会员按钮*/ #open { padding: 6px 20px; background: #FAD65C; border-radius: 10px; color: rgb(196, 124, 30); } #login:hover { background: #fad65c; color: white; } #open:hover { background: rgb(255, 231, 151); } .banner { height: 390px; } .banner1 { position: relative; left: 19%; top: 8px; width: 800px; height: 406px; } .circle { /* position: absolute; */ bottom: 10px; width: 100%; text-align: center; height: 14px; } .circle .box { display: inline-block; border-radius: 7px; margin-left: -65px; margin-top: -100px; font-size: 0; } .circle .box li { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #fff; cursor: pointer; margin: 2px; } .circle .box .active { background: #ff5000; } .recommendList { position: relative; float: left; width: 180px; height: 230px; background: #282730; margin-top: 50px; margin-right: 30px; border-bottom: 5px solid #fad65c; } .recommendList img { position: absolute; bottom: 0; left: 0; width: 180px; height: 213px; z-index: 1; transition: .3s; } .recommendList a:hover img { bottom: 10px; } .recommendList strong { position: absolute; top: 30px; left: 0; font: 18px/1 "微软雅黑"; color: #fff; display: block; width: 180px; text-align: center; z-index: 2; } .recommendList em { position: absolute; top: 54px; left: 0; font: 16px/1 "微软雅黑"; color: #fff; display: block; width: 180px; text-align: center; z-index: 2; } .footer { width: 100%; height: 60px; text-align: center; float: none; } .footer .word1 { margin-top: 315px; font-size: 12px; color: rgb(255, 250, 250); } .footer .word2 { margin-top: -10px; font-size: 12px; color: rgb(255, 250, 250); } </style> </head> <body> <div id="contain"> <div id="list"> <img src="image/logo.png" alt="#"> <ul> <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> <li><a href="#">年费专区</a></li> <li><a href="#">超级会员</a></li> <li><a href="#" id="login">登录</a></li> <li><a href="#" id="open">开通超级会员</a></li> </ul> </div> </div> <div class="banner"> <img src="image/banner.png" alt="#" class="banner1"> </div> <div class="circle"> <ul class="box"> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div> <ul class="wrapIndex clearfix"> <li class="recommendList"> <a href="#"> <strong>功能特权</strong> <em>超级会员 特权王者</em> <img src="image/picture1.png"> </a> </li> <li class="recommendList"> <a href="#"> <strong>装扮特权</strong> <em>超级会员 我有我的风采</em> <img src="image/picture2.png"> </a> </li> <li class="recommendList"> <a href="#"> <strong>游戏特权</strong> <em>游戏礼包 专属福利</em> <img src="image/picture3.png"> </a> </li> <li class="recommendList"> <a href="#"> <strong>生活特权</strong> <em>超多优惠福利</em> <img src="image/picture4.jpg"> </a> </li> </ul> </div> <div class="footer"> <p class="word1">Copyright © 1998 - 2020. All Rights Reserved</p> <p class="word2">腾讯公司 版权所有</p> </div> </body> </html>整体源码可参考： https://download.csdn.net/download/qq_44731369/12570744
