HTML5+CSS3 QQ会员页面导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>QQ会员页面导航</title>
<style type="text/css">
body{
margin:0;
padding: 0;}
#list{
width: 100%;
height: 50px;
background: #666666 url(1/logo.png) 50px -4px no-repeat;
background-size:110px 60px;
}
ul{
list-style: none;
margin-left: 150px;
margin-top: 0px;
height: 50px;
line-height: 50px;
}
li{
display: inline-block;
margin-right: 15px;
}
a{
color: white;
font-size: 12px;
text-decoration: none;
}
/*登录按钮*/
#login{
padding: 5px 10px;
color: #FAD65C;
border: 1px solid #FAD65C;
border-radius: 10px;
margin-left: 20px;
}
/*开通超级会员按钮*/
#open{
padding: 5px 20px;
background: #FAD65C;
border-radius: 10px;
}
a:hover{
color: blue;
}
#login:hover{
background: #fad65c;
color: white;
}
#open:hover{
color:blue;
background: #FAD65C;
}
</style>
</head>
<body>
<div id="contain">
<div id="list">
<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>
</body>
</html>
HTML5+CSS3 QQ会员页面导航的更多相关文章
- html5/css3响应式页面开发总结
一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...
- 15款HTML5/CSS3案例展示,导航,日历,钟表。
对于前端开发者来说,分享一些优秀的HTML5应用可以直接拿来用,更重要的是可以激发创作的灵感.今天我们要分享9款精挑细选的HTML5应用,个个都是干货. 1.HTML5/CSS3滑块动画菜单 图标动画 ...
- HTML5/CSS3 第二章页面组件
页面组件 1 元素的尺寸/边框/背景 1.1 css尺寸相关属性 height 高度 min-height 最小高度 max-height 最大高度 width 宽度 min-width 最小宽度 m ...
- HTML5+CSS3热门活动页面
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- html5/css3响应式布局介绍及设计流程
html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...
- QUIC协议的分析,性能测试以及在QQ会员实践
WeTest 导读 你听过HTTPS.HTTP2.0.SPDY,但是这些应用层协议都是基于可靠的传输层协议TCP来实现的.那么,基于高效的UDP协议有没有一种相对可靠的应用层协议呢? Why QUIC ...
- HTML5+CSS3学习笔记(二) 页面布局:HTML5新元素及其特性
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...
- HTML5+CSS3静态页面项目-PayPaul的总结
学习前端有一段时间了,一直在看书上的理论知识,而实战项目却很少.师兄常说,想要知道自己的实力有多少,知识掌握了多少,最好的方法就是去实践了,实践出真知嘛.于是决定在这个假期里,主要是通过项目的实践以及 ...
- HTML5+CSS3静态页面项目-BusinessTheme的总结
因为期末考试.调整心态等等的种种原因,距离上一次的项目练习已经过了很久了,今天终于有时间继续练习HTML5+CSS3的页面架构和设计稿还原.设计图很长,整个页面分为了好几个区域,所以就不放完整的设计图 ...
随机推荐
- 南方IT比赛项目
注意: 出现以下提示点击否就可以了 导入工作台: 导入模型 安装 安装到工作台上 修改模型位置 更新工具位置 点击是 改角度 九十度 添加组件 改一下名字,方便记忆 把工具移到组件 拆除后将工具移到S ...
- 技术分享丨华为鲲鹏架构Redis知识二三事
摘要:华为云鲲鹏Redis,业界首个基于自研ARM-Based全栈整合的Redis云服务,支持双机热备的HA架构,提供单机.主备.Proxy集群.Cluster集群实例类型,满足高读写性能场景及弹性变 ...
- linux网络收包过程
记录一下linux数据包从网卡进入协议栈的过程,不涉及驱动,不涉及其他层的协议处理. 内核是如何知道网卡收到数据的,这就涉及到网卡和内核的交互方式: 轮询(poll):内核周期性的检查网卡,查看是否收 ...
- centos8上配置openssh的安全
一,openssh服务版本号的查看 1,查看当前sshd的版本号 : [root@yjweb ~]# sshd --help unknown option -- - OpenSSH_7.8p1, Op ...
- 白话k8s-Pod的组成
k8s的所有功能都是围绕着Pod进行展开的,我们经常会看到类似这样一张图 告诉我们,Pod是一组container的集合,container之间可以通过localhost:port的方式直接访问. 感 ...
- Linux命令之{ }花括号
括号扩展:{ } {} 可以实现打印重复字符串的简化形式 [10:04:14 root@C8[ 2020-06-16DIR]#echo file{1,3,5} file1 file3 file5 [1 ...
- 通过命令行上传ipa到appstore
搞持续集成自动化打包上传到appstore遇到这个问题,记录一下. 其实主要就一条到命令: xcrun altool --upload-app -f xxxx.ipa -u "yanqizh ...
- 【API进阶之路】研发需求突增3倍,测试团队集体闹离职
摘要:最近研发的需求量涨了3倍,开发团队拼命赶进度,可苦了测试团队. 本以为从一线研发转管理后会清闲一些,但是没想到,我还要充当救火队员的角色. 到了第四季度,各业务部门都在憋着劲儿冲业绩,毕竟这跟年 ...
- byte + byte = int
byte+byte=int,低级向高级是隐式类型转换,高级向低级必须强制类型转换,byte<char<short<int<long<float<double
- 【Python 1-0】10个学习Python的理由以及Python的优势有哪些?
Python的由来 首发地址 Python的创始人是吉多·范罗苏姆,1989年他在阿姆斯特丹的CWI工作,圣诞节期间,吉多·范罗苏姆为了打发圣诞节的无聊,决定开发一个新的脚本解释程序,作为ABC 语言 ...