最新版仿QQ会员首页(赋源码)—前端练习

最新推荐文章于 2023-09-20 16:41:58 发布
最新推荐文章于 2023-09-20 16:41:58 发布
阅读量872 收藏 4
点赞数 1
分类专栏： 练习demo
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44731369/article/details/107107839
版权

之前做练习写的仿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>超级会员&nbsp;特权王者</em>
                    <img src="image/picture1.png">
                </a>
            </li>
            <li class="recommendList">
                <a href="#">
                    <strong>装扮特权</strong>
                    <em>超级会员&nbsp;我有我的风采</em>
                    <img src="image/picture2.png">
                </a>
            </li>
            <li class="recommendList">
                <a href="#">
                    <strong>游戏特权</strong>
                    <em>游戏礼包&nbsp;专属福利</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

sai小懒
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
QQ会员注册完整代码
逍遥的博客
07-22 6305
  &lt;!doctype html&gt;   &lt;html lang="en"&gt;   &lt;head&gt;   &lt;meta charset="UTF-8"&gt;   &lt;title&gt;QQ会员&lt;/title&gt;   &lt;link href="css/a
HTML5浮动-制作QQ会员页面导航
08-29
QQ登录导航
零基础学前端（六）HTML+CSS实战：模仿QQ官网首页
tengyuxin的博客
09-20 1111
1. 我前面已经将HTML 和 CSS讲解完成，希望初学者是跟着一步一步敲代码走过来的。2. 我个人觉得先不着急进入Javascript的学习，要将前面写样式，写布局的基础打好，所以我编写了本篇模仿QQ网站首页，请认真阅读。
自定义 behavior - 完美仿 QQ 浏览器首页，美团商家详情页
程序员徐师兄的博客
02-28 164
记得两年前的时候，曾写过自定义 behavior 的文章自定义 Behavior -仿新浪微博发现页的实现，到现在差不多有一万多的阅读量吧。今天，对该 behavior 进行升级，相对于两年前的 behavior，增加了以下功能级联滑动过程中增加监听回调，方便外部根据滑动距离，进行相应的动画，展现炫酷的 UI，通过 setPagerStateListener 设置回调监听在滑动到顶部的时候，可以设置是否能够滑动将 Head 滑动下来，方法为 setCouldScroollOpen。
css 圆形扩散特效 水波
笔记库
10-16 2005
<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=...
web制作QQ会员导航
y943711797的博客
11-10 817
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>QQ会员-不做大多数</title> <link rel="icon" href="img/logo.png" type="x-png" /> <style> li { list-style: none;
HTML+CSS+JS实现仿QQ个人资料卡（思路+源码）
小新的博客
08-21 2569
最近在学习前端的知识，无意间发现QQ 那个个人资料卡还挺好看的，就想着自己能不能照着原版搞出一个高仿出来，话不多时直接开始先睡上一觉，找找灵感，睡醒来又饿了，出去吃个饭，回来天tm都黑了，哈哈哈哈，金今天又是摆烂的一天，啊啊啊，不行至少今天这篇博客得写个前言部分....于是乎我们来到第二天，开始干（要干啥来着，幸亏昨天还写了个标题，要不然都忘了——HTML+CSS+JS实现仿QQ个人资料卡）
最新版仿QQ会员首页—前端练习.zip
07-02
前端练习之仿QQ会员首页，静态页面，基于html+css，之前做练习写的，对数据的严格把控，使其更接近于原页面。
精仿QQ网址导航源码2016版 v20160331
12-07
完美精仿＂腾讯好QQ＂网址导航源码，腾讯好网址在去年改版之后目前唯一的新版源码。
练习1：QQ会员页面导航.7z
06-04
第七章的上级练习1参考答案：QQ会员页面导航，里面有详细的css样式代码，大家可以仔细参考一下！
DIV+CSS 仿QQ首页
10-11
DIV+CSS 仿QQ首页 Web 开发
仿腾讯QQ ui界面 demo (studio源码)
05-08
个人学习开发，主要包含 登陆界面，消息主页面，联系人页面，滑动菜单，聊天页面，二维码扫描页面。个人水平有限，有很多不足之处希望大家多多海涵，多多提出意见。更多请下载demo预览，感谢！注（很多代码参考网络，没有注明出处望见谅，仅供学习参考）
超酷仿QQ导航菜单（JS+CSS）
12-31
超酷仿QQ导航菜单（JS+CSS），可以在同一窗口浏览所有链接页面，清新的QQ皮肤界面一定为你的网站增色不少，因为它使用了“可控制的页面内滚动区域”技术，可以让同一内嵌框架网页添加无数链接菜单，加入了可移动层代码。
CSS3QQ会员项目
04-08
CSS动画效果，文字图片切入效果，仿QQ会员页面
仿QQ微信小程序源码.zip
07-13
仿QQ微信小程序源码.zip
QQ代挂网站前端美化模板源码
最新发布
03-25
QQ代挂前端美化模板源码，UI有动态效果，自行修改连接跳转到自己的代挂连接即可。
制作qq会员页面导航
jiamaa的博客
05-31 3656
制作qq会员页面导航@TOC 我在网上搜了很多帮助文档，样式设计都没有做得很好的，CSS样式设计都做得不够完美，这个是我总结了很多别人的经验和自己的经验出来的，希望对大家有所帮助，谢谢。 这个是最终结果图： 下面是代码块： 制作会员页面导航-上机练习1 <img src="img/qq会员.png" alt="logo"/> <nav class="nav"> <ul> <li><a hre
用HTML5+CSS3实现qq会员页面的仿制
r643064456的博客
07-06 3805
取自本人大一小学期认识实习作业。 一 选题说明 为了做出一个好看的网站，我参考了许多制作精美的网站，但这些网站几乎都用到了JS技术，最后我找到了qq会员网站，里面虽然也应用了不少JS技术，但大部分都可以用CSS重做实现。于是，我决定对qq会员网站进行仿制。 以下是原网站链接： https://vip.qq.com/ 也可以打开我仿制的网页，点击左上方的logo进入官网。 二 功能说明 最上方是半透明导航条，固定于上方。 中间是一个轮播图，qq会员官网使用了JS代码，但我用CSS代码实现了，思路是用anima
wpf仿qq贴边自动隐藏源码
01-30
WPF仿QQ贴边自动隐藏功能主要是通过设置窗口的动画效果来实现的。首先，需要监听窗口的位置变化事件，当窗口靠近屏幕边缘时，触发隐藏动画效果。其次，可以使用WPF自带的动画库，如DoubleAnimation、Storyboard等，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值