用HTML5+CSS3实现qq会员页面的仿制

取自本人大一小学期认识实习作业。
一选题说明
为了做出一个好看的网站，我参考了许多制作精美的网站，但这些网站几乎都用到了JS技术，最后我找到了qq会员网站，里面虽然也应用了不少JS技术，但大部分都可以用CSS重做实现。于是，我决定对qq会员网站进行仿制。
以下是原网站链接：
https://vip.qq.com/
也可以打开我仿制的网页，点击左上方的logo进入官网。
二功能说明
最上方是半透明导航条，固定于上方。
中间是一个轮播图，qq会员官网使用了JS代码，但我用CSS代码实现了，思路是用animation设置多帧动画，并且让第一帧与最后一帧相同，就可以实现无缝衔接的效果。
再往下是qq会员内容，有一个鼠标悬停上移的效果。
下方是官方的其他链接，这里也有悬停时图片变换，但值得一提的是我实现的方法不是把每个图截取下来，而是将官网的大图保存，当这个list元素处于不同状态时，就从这个大图上截取某一部分，而将其他部分隐藏。这样做既使图片具有透明效果，也可以防止截图时元素对不齐而产生偏差。
最下方是腾讯版权的文字描述，只是改改文字属性和位置，并没有什么值得一提的地方。
三实现截图

四程序源码
HTML:

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="qq会员.css">
<head><meta charset="UTF-8"><title>qq会员</title>
</head>
<body>
<!--导航--><div class="wrap"><header class="nav-header"><div class="head-contain"><a href="https://vip.qq.com/" class="top-logo"><img src="src/img/logo_a.png" alt="not found" height="90" width="145"></a><nav class="top-nav"><ul><li><a href="https://haoma.qq.com/index.html?ADTAG=vip.qq.com%2F&SNO=1625412175368">靓号站</a></li><li><a href="https://vip.qq.com/index.php/vip/function/index?ADTAG=vip.qq.com%2F&SNO=1625410229743">功能特权</a></li><li><a href="https://vip.qq.com/game.html?ADTAG=vip.qq.com%2F&SNO=1625412112459">游戏特权</a></li><li><a href="https://vip.qq.com/zb/?ADTAG=vip.qq.com%2F&SNO=1625412135909">装扮特权</a></li><li><a href="https://vip.qq.com/index.php/vip/my/freedom?ADTAG=vip.qq.com%2F&SNO=1625412175368">成长体系</a></li><li><a href="https://vip.qq.com/index.php/vip/year/index?ADTAG=vip.qq.com%2F&SNO=1625412246309">年费专区</a></li><li><a href="https://vip.qq.com/kingcard.html?ADTAG=vip.qq.com%2F&SNO=1625412257193">免流量特权</a></li></ul></nav><div class="top-right"><a href="">登录</a><a href="">开通超级会员</a></div></div></header></div>
<!--滑动--><div class="slide"><input type="radio" name='pic' id='pic1' checked><input type="radio" name='pic' id='pic2'><input type="radio" name='pic' id='pic3'><input type="radio" name='pic' id='pic4'><input type="radio" name='pic' id='pic5'><input type="radio" name='pic' id='pic6'><div class="labels"><label for="pic1"></label><label for="pic2"></label><label for="pic3"></label><label for="pic4"></label><label for="pic5"></label><label for="pic6"></label></div><ul class="list"><li class="item"><img src="src/img/1.png" alt="not found"></li><li class="item"><img src="src/img/2.png" alt="not found"></li><li class="item"><img src="src/img/3.png" alt="not found"></li><li class="item"><img src="src/img/4.png" alt="not found"></li><li class="item"><img src="src/img/5.png" alt="not found"></li><li class="item"><img src="src/img/6.png" alt="not found"></li><li class="item"><img src="src/img/1.png" alt="not found"></li></ul></div>
<!--内容--><div class="content"><ul><li><a href="" class="content_list"><div class="content_text">功能特权<br>超级会员，特权王者</div><img src="src/img/7.png" alt=""></a></li><li><a href="" class="content_list"><div class="content_text">装扮特权<br>超级会员 我有我风采</div><img src="src/img/8.png" alt=""></a></li><li><a href="" class="content_list"><div class="content_text">游戏特权<br>游戏礼包，专属福利</div><img src="src/img/9.png" alt=""></a></li><li><a href="" class="content_list"><div class="content_text">生活特权<br>超多优惠福利</div><img src="src/img/10.png" alt=""></a></li></ul></div>
<!--下载--><div class="download"><ul><li><a href=""><span class="download_pic qq"></span><span class="download_text" id="d1">官方手Q账号</span></a></li><li><a href=""><span class="download_pic vx"></span><span class="download_text" id="d2">官方微信账号</span></a></li><li><a href=""><span class="download_pic qz"></span><span class="download_text" id="d3">官方空间</span></a></li><li><a href=""><span class="download_pic hf"></span><span class="download_text" id="d4">话费开通专区</span></a></li><li><a href=""><span class="download_pic dh"></span><span class="download_text" id="d5">兑换中心</span></a></li><li><a href=""><span class="download_pic kf"></span><span class="download_text" id="d6">客服中心</span></a></li></ul></div>
<!--版权--><div class="copyright"><span class="copyright_text">Copyright &copy; 1998 - 2021 Tencent . All Rights Reserved<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;腾讯公司 版权所有<br><br><br><br><br></span></div>
</body>
</html>

CSS:

/*navigate*/
*{padding: 0;margin: 0;list-style: none;
}body{background-image: url("src/img/background.jpg");display: flex;justify-content: center;height: 100vh;align-items: center;
}a{text-decoration: none;
}.wrap{z-index: 999;
}.nav-header{height: 90px;width: 100%;background: rgba(00,00,00,0.3);position: fixed;top: 0;left:0;
}.head-contain{width: 1180px;height: 90px;margin: 0 auto;text-align: center;
}.top-logo,.top-nav,.top-nav li,.top-right{height: 90px;display: inline-block;vertical-align: top;}.top-nav li{line-height: 90px;width: 90px;}.top-nav li a{display: block;text-align: center;font-size: 16px;color: white;}.top-nav li a:hover{color: red;}.top-right a{display: inline-block;font-size: 16px;text-align: center;margin-top: 25px;border-radius: 35px;}.top-right a:first-of-type{width: 93px;height: 38px;line-height: 38px;color: #fad65c;border: 1px #fad65c solid;}.top-right a:first-of-type:hover{background: #fad65c;color: #986b0d;
}.top-right a:last-of-type{width: 140px;height: 40px;font-weight: 700;line-height: 40px;background: #fad65c;color: #986b0d;
}.top-right a:last-of-type:hover{background: #fad65c;
}/*slide*/
:root {--width: 800px;--height: 407px;
}div.slide {width: var(--width);height: var(--height);overflow: hidden;position: relative;
}ul.list {width: calc(var(--width) * 7);height: inherit;position: relative;z-index: -1;animation: move 18s ease 1s infinite;
}@keyframes move {0% {transform: translate(calc( 0 * var(--width)));}17% {transform: translate(calc( -1 * var(--width)));}33% {transform: translate(calc( -2 * var(--width)));}50% {transform: translate(calc( -3 * var(--width)));}66% {transform: translate(calc( -4 * var(--width)));}83% {transform: translate(calc( -5 * var(--width)));}100% {transform: translate(calc( -6 * var(--width)));}}li.item {width: var(--width);height: inherit;box-sizing: border-box;color: #fff;font-size: 4rem;text-align: center;line-height: var(--height);float: left;
}input {display: none;
}.labels {position: absolute;bottom: .5rem;z-index: 1;width: inherit;justify-content: center;display: none;
}.slide:hover .labels {display: flex;
}.slide:hover {cursor: pointer;
}.labels label {width: .5rem;height: .5rem;border-radius: 50%;margin: 0 .3rem;border: .1rem solid #fff;background-color: transparent;box-sizing: border-box;cursor: pointer;
}input[id=pic1]:checked ~ .labels label[for=pic1],
input[id=pic2]:checked ~ .labels label[for=pic2],
input[id=pic3]:checked ~ .labels label[for=pic3],
input[id=pic4]:checked ~ .labels label[for=pic4],
input[id=pic5]:checked ~ .labels label[for=pic5],
input[id=pic6]:checked ~ .labels label[for=pic6]{background-color: #fff;border: .1rem solid #fff;
}input[id=pic1]:checked ~ ul.list {transform: translate(calc( 0 * var(--width)));
}input[id=pic2]:checked ~ ul.list {transform: translate(calc( -1 * var(--width)));
}input[id=pic3]:checked ~ ul.list {transform: translate(calc( -2 * var(--width)));
}input[id=pic4]:checked ~ ul.list {transform: translate(calc( -3 * var(--width)));
}input[id=pic5]:checked ~ ul.list {transform: translate(calc( -4 * var(--width)));
}input[id=pic6]:checked ~ ul.list {transform: translate(calc( -5 * var(--width)));
}.slide:hover .list {animation-play-state: paused;animation: none;
}
/*内容*/
.content{position: absolute;left: 170px;top:500px;display: inline-block;width: 1000px;height: 300px;
}.content li {display: inline-block;text-align: center;transition: transform 0.1s;
}.content_list{margin: 12px;
}.content li a div{position: relative;top: 80px;left: -5px;color: white;font-size: large;
}.content li:hover{transform: translate(0,-10px);
}/*download*/
.download{position: absolute;left: 170px;top:960px;display: inline-block;width: 1000px;height: 300px;
}.download li{display: inline-block;
}.download_pic{background: url("src/img/qq.png") no-repeat;background-size: 200px auto;display: block;width: 100px;height: 85px;margin: 25px;
}.qq{background-position: 0 0;
}.vx{background-position: 0 -100px;
}
.qz{background-position: 0 -400px;
}.hf{background-position: 0 -500px;
}.dh{background-position: 0 -200px;
}.kf{background-position: 0 -300px;
}.download_text{color: rgb(126,126,126);
}#d1{position: relative;left: 25px;
}#d2{position: relative;left: 25px;
}#d3{position: relative;left: 41px;
}#d4{position: relative;left: 25px;
}#d5{position: relative;left: 43px;
}#d6{position: relative;left: 44px;
}.qq:hover{background-position: -100px 0;
}.vx:hover{background-position: -100px -100px;
}
.qz:hover{background-position: -100px -400px;
}.hf:hover{background-position: -100px -500px;
}.dh:hover{background-position: -100px -200px;
}.kf:hover{background-position: -100px -300px;
}/*copyright*/
.copyright{position: absolute;top: 1200px;
}.copyright_text{color: rgb(126,126,126);font-size: small;text-align: center;
}

如果你懒得创建项目、寻找图片、修改代码，也可以通过以下链接下载压缩包。
https://download.csdn.net/download/r643064456/20045090
我是用IDEA写的，或许其他的IDE（没错，说的就是VS Code）应该也能打开吧！

用HTML5+CSS3实现qq会员页面的仿制相关推荐

php做个qq农场前台,qqnongchang_demo php+html5+css3实现qq农场的全部功能的插件 Web Server 274万源代码下载- www.pudn.com...
文件名称: qqnongchang_demo下载收藏√ [ 5 4 3 2 1 ] 开发工具: PHP 文件大小: 11048 KB 上传时间: 2017-04-18 下载次数: 0 提 ...
用html做qq会员页面导航,练习1：QQ会员页面导航.html
练习1:QQ会员页面导航 *{ margin: 0px; padding: 0px; } body a:link{ color: white; text-decoration: none; } bod ...
html5+css3手码百度页面
html5 源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
用html做qq会员页面导航,untitledQQ会员页面导航3.html
无标题文档 *{ margin: 0px auto; padding: 0px; } div{ margin: 10px; color: white; width: 100%; height: 50p ...
用html做qq会员页面导航,untitledQQ会员页面导航.html
无标题文档 *{ margin: 0px auto; padding: 0px; } div{ margin: 10px; color: white; width: 100%; height: 50p ...
用html做qq会员页面导航,untitledQQ会员页面导航4.html
无标题文档 *{ margin: 0px auto; padding: 0px; } div{ margin: 10px; color: white; width: 100%; height: 50p ...
Html5 + Css3 制作QQ悬浮特效
1 QQ二维码图标右侧悬浮,可开可收 2 点击QQ在线咨询,可以弹出对方qq对话框 3 代码如下 <!doctype html> <html lang="en"& ...
html制作水晶状态导航栏,HTML5 CSS3水晶风格的页面头部
CSS 语言: CSSSCSS 确定 body { margin: 0; padding: 0; } .crystal_container { position: relative; display: ...
html空间进入动画界面,HTML5 / CSS3 Transform / Animation 示例页面
HTML> Tommy's 3D page. html,body{ font-family: Verdana; } body{ max-width:320px; margin:0 auto; p ...

用HTML5+CSS3实现qq会员页面的仿制

用HTML5+CSS3实现qq会员页面的仿制相关推荐

最新文章

热门文章