仿QQ会员

最新推荐文章于 2024-07-24 11:09:48 发布
最新推荐文章于 2024-07-24 11:09:48 发布
阅读量275 收藏
点赞数
文章标签： javascript css 前端 html5 vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/z2759922095/article/details/124807845
版权 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="box">
      <div class="bgc">
        <ul>
          <li><img src="./img/logo.png" alt="" /></li>
          <li>靓号站</li>
          <li class="one">功能特权</li>
          <li>游戏特权</li>
          <li class="two">成长体系</li>
          <li>年费专区</li>
          <li>免流量特权</li>
          <li>登录</li>
          <li>开通超级会员</li>
        </ul>
      </div>
      <div class="navs">
        <ul class="first">
          <li class="com">全部特权</li>
          <li class="com">分等级特权</li>
        </ul>
        <ul class="second">
          <li class="com">任务中心</li>
          <li class="com">排名中心</li>
        </ul>
      </div>

      <div class="father">
        <div class="son1">
          <p>功能特权<br /><span> 超级会员 特权王者</span></p>
        </div>
        <div class="son2">
          <p>装扮特权 <br /><span> 超级会员 我有我风采</span></p>
        </div>
        <div class="son3">
          <p>
            游戏特权<br />
            <span> 游戏礼包 专属福利</span>
          </p>
        </div>
        <div class="son4">
          <p>生活特权 <br /><span> 超多优惠福利</span></p>
        </div>
      </div>
    </div>
    <script>
      var lis = document.querySelector(".bgc").querySelectorAll("li");
      var navs = document.querySelector(".navs");
      var one = document.querySelector(".one");
      var two = document.querySelector(".two");
      var first = document.querySelector(".first");
      var second = document.querySelector(".second");
      var p = document.querySelector('.father').querySelectorAll('p')
      lis[2].addEventListener("mouseenter", function () {
        first.style.display = "block";
        navs.style.display = "block";
      });
      lis[2].addEventListener("mouseout", function () {
        first.style.display = "none";
        navs.style.display = "none";
        navs.addEventListener("mouseenter", function () {
          first.style.display = "block";
          second.style.display = "none";
          navs.style.display = "block";
        });
        navs.addEventListener("mouseout", function () {
          first.style.display = "none";
          navs.style.display = "none";
        });
      });
      lis[4].addEventListener("mouseenter", function () {
        second.style.display = "block";
        navs.style.display = "block";
      });
      lis[4].addEventListener("mouseout", function () {
        second.style.display = "none";
        navs.style.display = "none";
        navs.addEventListener("mouseenter", function () {
          first.style.display = "none";
          second.style.display = "block";
          navs.style.display = "block";
        });
        navs.addEventListener("mouseout", function () {
          second.style.display = "none";
          navs.style.display = "none";
        });
      });
    </script>
  </body>
</html>

计科秃头驴
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
最新版仿QQ会员首页—前端练习.zip
07-02
前端练习之仿QQ会员首页，静态页面，基于html+css，之前做练习写的，对数据的严格把控，使其更接近于原页面。
一个仿QQ截图的代码
04-14
一个仿QQ截图的代码
仿制QQ会员官网主页Html
chaohui2638457321的博客
09-17 597
在idea使用html+css 简单仿制QQ会员官网主页页面 附带登录页面 跳转登陆页面 导航栏设置固定 底部信息栏附加根据鼠标在页面滑动的距离设置自动隐藏和显示 登录页面在点击登录后，实现覆盖整个页面，保持固定在页面中央位置，背景半透明化 登录成功后实现鼠标移入头像显示账号信息等~~ 效果图： 走之前别忘了点个关注哦！！！！ 百度网盘： 链接：https://pan.baidu.com/s/1iyOrL9WOVsdpCO0ID-c0hg 提取码：ksjh ...
仿QQ抽会员引流_manufacturing36x_简易授权系统_twelvec5v_
10-03
Simple authorization system
CSS3QQ会员项目
04-08
CSS动画效果，文字图片切入效果，仿QQ会员页面
最新版仿QQ会员首页(赋源码)—前端练习
qq_44731369的博客
07-03 898
不久前写的仿QQ会员首页，静态页面，基于html+css，之前做练习写的，对数据的严格把控，使其更接近于原页面，适合初学者练习。 效果图： 源码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>QQ会员页面导航</title> <link href="style.css" rel="stylesheet" type="text/css" /
制作qq会员页面导航
jiamaa的博客
05-31 3778
制作qq会员页面导航@TOC 我在网上搜了很多帮助文档，样式设计都没有做得很好的，CSS样式设计都做得不够完美，这个是我总结了很多别人的经验和自己的经验出来的，希望对大家有所帮助，谢谢。 这个是最终结果图： 下面是代码块： 制作会员页面导航-上机练习1 <img src="img/qq会员.png" alt="logo"/> <nav class="nav"> <ul> <li><a hre
通过HTML和CSS仿制qq会员界面.rar
07-06
在本压缩包“通过HTML和CSS仿制qq会员界面.rar”中，包含了使用HTML5和CSS3技术来模仿QQ会员界面的设计与实现。这是一份关于前端开发的学习资源，主要针对初学者或有一定基础的开发者，帮助他们提升网页布局和样式...
利用html+css等语言在idea实现仿制QQ会员页面 .rar
09-17
在QQ会员页面的仿制中，我们可能会用到`<div>`元素作为布局容器，以及`<h1>`至`<h6>`的标题标签，`<p>`用于段落，`<a>`用于链接，`<img>`用于图片展示等。 接下来，我们探讨CSS。CSS负责网页的样式和布局。我们可以...
android仿QQ代码
11-23
在仿QQ的项目中，这可能是模仿QQ会员服务的一部分，提供特殊优惠以吸引用户。 2. IM-master：这是一个可能的项目目录名，暗示了项目的核心部分——即时通讯模块。"master"通常指的是Git仓库的主分支，这表明整个项目...
仿QQ会员右下角提示框c#实现,提示窗体不获得焦点.pdf
12-22
在实现仿QQ会员提示框的过程中，我们需要做的是在提示框首次显示时不抢夺焦点。我们可以通过一个布尔变量`isFristShow`来标记是否是首次加载，并保存当前活动窗体的句柄`actform`。在窗体的`OnActivated`事件中，...
仿QQ会员右下角提示框c#实现
CsharpDonet的专栏
12-15 894
为了不让大家再误会，我在这里声明，我做的是在登录后的提示，只要大家用过QQ，Q会员开通过就知道 的， 先看一下效果吧 说一下实现 吧， 第一步是先把QQ会员 便当 的框给截图下来，然后放到Ps里P一下，需要做到这样就行了，看图片 第二步，可以在上面加一 些Lable就行了，关闭按钮是两个图片，切换的方法是这样的  private void
如何用c#实现仿QQ会员右下角提示框
冷月宫主的专栏
06-08 1020
先看一下效果吧 说一下实现 吧， 第一步是先把QQ会员 便当 的框给截图下来，然后放到Ps里P一下，需要做到这样就行了，看图片 第二步，可以在上面加一 些Lable就行了，关闭按钮是两个图片，切换的方法是这样的 //图片离开事件         private void pictureBox1_MouseLeave(object sender, EventAr
Next.js静态导出与动态路由优化
天涯学馆
07-20 1053
Next.js 是一个流行的 React 框架，它简化了构建服务端渲染（SSR）和静态站点生成（SSG）的应用。静态导出是Next.js的一项强大特性，它允许你将整个应用程序导出为静态文件，从而在无服务器环境下运行，提高加载速度和降低服务器成本。动态路由则允许你根据数据生成页面，即使在静态导出的情况下也能保持灵活性。
Vue 3 和 SpringBoot 实现文件分片上传示例
exlink2012的专栏
07-22 401
实现分片上传，并使用Spring Boot在后端保存文件。前端将文件分片并逐个上传到后端，后端接收到所有分片后再进行合并，最终保存为一个完整文件。
【React 】开发环境搭建详细指南
最新发布
lph159的博客
07-24 832
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 994
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
VUE中的重点*
qq_61132537的博客
07-22 895
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
仿QQ客户端实战：个性化功能与代码优化
本次提供的资源是关于仿QQ客户端的软件实战说明书，详细记录了在Eclipse和MySQL环境下进行的课程设计任务。课程目标是让学生运用所学的程序知识，修改、增加功能并优化现有程序，以创建一个具有个性化的聊天工具。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值