作为一个穷人，唯一一次逛这么久的会员首页还是因为要写最头大的web~苦涩

效果图

源码

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8"/>

		<link rel="icon" href="qqIcon.jfif" type="image/x-icon"/>

		<title>QQ会员</title>

		<link rel="stylesheet" href="qqmember.css" type="text/css"/>

	</head>

	<body>

		<div id="all">

			<nav>

				<ul>

					<li>

						<image src="logo.png" height="100px width="100px"/>

					</li>

					<li class="words">

						<a href="#">功能特权</a>

					</li>

					<li class="words">

						<a href="#">游戏特权</a>

					</li>

					<li class="words">

						<a href="#">生活特权</a>

					</li>

					<li class="words">

						<a href="#">会员活动</a>

					</li>

					<li class="words">

						<a href="#">成长体系</a>

					</li>

					<li class="words">

						<a href="#">年费专区</a>

					</li>

					<li class="words">

						<a href="#">超级会员</a>

					</li>

				</ul>

			</nav>

			<div>

				<div>

					<a href="#" class="button" id="open">开通超级会员</a>

				</div>

				<div id="open">

					<a href="#" class="button" id="land">登录</a>

				</div>

			</div>

		</div>

	</body>

</html> 


body{

	margin:0;

	padding:0;

}

#all{

	width:100%;

	height:100px;

	background-color:rgba(0,0,0,0.15)

}

ul{

	list-style-type:none;

	margin:0;

	padding:0;

}

li{

	display:inline-block;

	float:left;

}

.words{

	margin-top:45px;

	margin-left:45px;

	width:100px;

}

.button{

	border:1px solid #000080;

	border-radius:15px;

	background-color:#BC8F8F;

	padding:10px;

	margin-top:30px;

	float:right;

	display:inline-block;

}

li a:hover{

	color:yellow;

}

li a:active{

	color:green;

}

a{

	text-decoration: none;

}

#open{

	margin-right:75px;

	background-color: #D2691E;

}

QQ会员首页HTML+CSS的更多相关文章

  1. 腾讯QQ会员技术团队：以手机QQ会员H5加速为例，为你揭开sonic技术内幕

    目前移动端越多越多的网页开始H5化,一方面可以减少安装包体积,另一方面也方便运营.但是相对于原生界面而言,H5的慢速问题一定被大家所诟病,针对这个问题,目前手Q存在几种方案,最常见的便是离线包方案,但 ...

  2. QQ空间首页背景图片淡出解析与不足完善

    一件事情的发生总是有原因的,当然更多的是对技术本身的追求,一定要搞懂啦,废话不多说,大宝剑直插主题. 起因 以前做过一个xx项目,在登陆界面背景图片中,直接引用了一张大图,css类似于这样(backg ...

  3. HTML5+CSS3 QQ会员页面导航

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. QQ会员AMS平台PHP7升级实践

    作者:徐汉彬链接:https://zhuanlan.zhihu.com/p/21493018来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. QQ会员活动运营平台(AMS ...

  5. 腾讯QQ会员技术团队：人人都可以做深度学习应用：入门篇（下）

    四.经典入门demo:识别手写数字(MNIST) 常规的编程入门有"Hello world"程序,而深度学习的入门程序则是MNIST,一个识别28*28像素的图片中的手写数字的程序 ...

  6. QUIC协议的分析，性能测试以及在QQ会员实践

    WeTest 导读 你听过HTTPS.HTTP2.0.SPDY,但是这些应用层协议都是基于可靠的传输层协议TCP来实现的.那么,基于高效的UDP协议有没有一种相对可靠的应用层协议呢? Why QUIC ...

  7. C#7.2——编写安全高效的C#代码 c# 中模拟一个模式匹配及匹配值抽取 走进 LINQ 的世界 移除Excel工作表密码保护小工具含C#源代码 腾讯QQ会员中心g_tk32算法【C#版】

    C#7.2——编写安全高效的C#代码 2018-11-07 18:59 by 沉睡的木木夕, 123 阅读, 0 评论, 收藏, 编辑 原文地址:https://docs.microsoft.com/ ...

  8. qq会员权益

    1.功能特权qq会员可以获得增加好友上限.QQ等级加速.创建2000人群.创建1000人群.表情漫游.云消息服务.离线传文件.网络相册.靓号抵用卷.文件中转站这10个方面的福利当然会员和超级会员在上面 ...

  9. 日请求亿级的 QQ 会员 AMS 平台 PHP7 升级实践

    QQ会员活动运营平台(AMS),是QQ会员增值运营业务的重要载体之一,承担海量活动运营的Web系统.AMS是一个主要采用PHP语言实现的活动运营平台, CGI日请求3亿左右,高峰期达到8亿.然而,在之 ...

  10. 升级到php7相关问题，日请求过亿QQ会员活动平台PHP7升级实践

    升级到php7相关问题,日请求过亿QQ会员活动平台PHP7升级实践 日请求过亿:QQ会员活动平台PHP7升级实践http://mp.weixin.qq.com/s?__biz=MjM5MjAwODM4 ...

随机推荐

  1. 开源一款DDS信号发生扩展板-FreakStudio多米诺系列

    原文链接: FreakStudio的博客 摘要 信号发生扩展板通过SPI接口生成可调频率和幅度的正弦波.方波和三角波,频率小于1MHz.支持幅度调节,提供原始和6倍放大输出接口.配备5阶低通滤波器.噪 ...

  2. 面试题57. 和为s的两个数字

    地址:https://leetcode-cn.com/problems/he-wei-sde-liang-ge-shu-zi-lcof/ <?php /** 面试题57. 和为s的两个数字 输入 ...

  3. MySQL2022.3.2

    创建库 CREATE DATABASE STUDENT; 创建表 CREATE TABLE STU(SNO INT PRIMARY KEY,//主键SNM CHAR(2) NOT NULL,//不能为 ...

  4. 错误修正记录：synopsys license服务器激活报错-No valid hostids,exiting

    长久没用vcs,此次新装design compiler,再次用到lmgrd,报错 (snpslmd)No valid hostids,exiting (snpslmd)EXITING DUE TO S ...

  5. mac php.ini在哪

    解答 mac 默认没有 php.ini 文件,但是有对应的模版文件 php.ini.default,位于/etc/php.ini.default,可以拷贝一份进行修改. cd /etc sudo cp ...

  6. laravel引用文件资源

    <link rel="stylesheet" href="{{ asset('css/swiper.min.css') }}"> <link ...

  7. 「2024 年度技术精华盘点」IvorySQL & PostgreSQL 技术干货全解析！

    2024 年,IvorySQL 公众号持续输出高质量技术内容,涵盖 PostgreSQL 核心技术解析 和 IvorySQL 创新实践 两大方向.无论您是数据库领域的初学者,还是经验丰富的开发者,这些 ...

  8. rot-偏移，ascii，md5爆破

    题目: 破解下面的密文: 83 89 78 84 45 86 96 45 115 121 110 116 136 132 132 132 108 128 117 118 134 110 123 111 ...

  9. HoloLens2 开发推荐配置

    博客地址:https://www.cnblogs.com/zylyehuo/ 1.win11 pro+vs2019+unity2018+MRTK2.6.1 2.win10 pro+vs2019+uni ...

  10. 深入理解泛型-重写泛型类方法遇到的问题（涉及JVM反编译字节码）

    下面的代码DateInterval类想重写父类Pair<LocalDate>中的setSecond方法,保证设置的第二个日期要在第一个日期之后,不能出现second早于first的情况.这 ...