<!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会员页面导航的更多相关文章

  1. html5/css3响应式页面开发总结

    一,自适应和响应式的区别 自适应是一套模板适应所有终端,但每种设备上看到的版式是一样的,俗称宽度自适应. 响应式一套模板适应所有终端,但每种设备看到的版式可以是不一样的. 虽然响应式/自适应网页设计会 ...

  2. 15款HTML5/CSS3案例展示，导航，日历，钟表。

    对于前端开发者来说,分享一些优秀的HTML5应用可以直接拿来用,更重要的是可以激发创作的灵感.今天我们要分享9款精挑细选的HTML5应用,个个都是干货. 1.HTML5/CSS3滑块动画菜单 图标动画 ...

  3. HTML5/CSS3 第二章页面组件

    页面组件 1 元素的尺寸/边框/背景 1.1 css尺寸相关属性 height 高度 min-height 最小高度 max-height 最大高度 width 宽度 min-width 最小宽度 m ...

  4. HTML5+CSS3热门活动页面

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

  5. html5/css3响应式布局介绍及设计流程

    html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...

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

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

  7. HTML5+CSS3学习笔记（二） 页面布局：HTML5新元素及其特性

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 本次学习HTML5的新标签元素有: <head ...

  8. HTML5+CSS3静态页面项目-PayPaul的总结

    学习前端有一段时间了,一直在看书上的理论知识,而实战项目却很少.师兄常说,想要知道自己的实力有多少,知识掌握了多少,最好的方法就是去实践了,实践出真知嘛.于是决定在这个假期里,主要是通过项目的实践以及 ...

  9. HTML5+CSS3静态页面项目-BusinessTheme的总结

    因为期末考试.调整心态等等的种种原因,距离上一次的项目练习已经过了很久了,今天终于有时间继续练习HTML5+CSS3的页面架构和设计稿还原.设计图很长,整个页面分为了好几个区域,所以就不放完整的设计图 ...

随机推荐

  1. Azure Cosmos DB (二) SQL API 操作

    一,引言 还记得国庆期间,我们学习了一下关于Azure Cosmos DB 的一些基础知识以及Azure Cosmos DB 的几种支持数据库类型.今天就开始分享一些实战操作,如何通过Azure Po ...

  2. SpringBoot使用activiti自定义流程demo解析

    环境搭建[这里直接讲解自定义流程] 集成 Activiti Modeler 下载源码 我这里选用的是 Activiti 5.23.0 版本的页面,下载 zip,解压 Activiti 5.23.0 源 ...

  3. Java 集合看这一篇就够了

    大家好,这里是<齐姐聊数据结构>系列之大集合. 话不多说,直接上图: Java 集合,也称作容器,主要是由两大接口 (Interface) 派生出来的: Collection 和 Map ...

  4. 【转载】opencvVS2019配置方法

    环境: 系统:win10系统截至2020920版本 opencv版本:3.0.0版本 IDE:宇宙最强IDEA最新版本2019社区版 教程: 1.下载opencv安装包官网下载链接:https://o ...

  5. 【C语言编程入门】Do you know 函数？不知道了吧，我来告诉你！

    ☆ 函数 在前面我们已经讲过了一些简单的函数,如程序的主函数main().标准输出函数printf().在C语言中,大多数功能都是依靠函数来实现的.But,你知道什么是函数吗?我猜你肯定不知道. 那么 ...

  6. spring boot:方法中使用try...catch导致@Transactional事务无效的解决(spring boot 2.3.4)

    一,方法中使用try...catch导致@Transactional事务无效的解决方法 1,问题的描述: 如果一个方法添加了@Transactional注解声明事务, 而方法内又使用了try catc ...

  7. 服务器同一个tomcat部署2两个相同的项目

    项目A,B(B 是A 的复制) 若把A,B工程同时部署到tomcat下,会发生只能访问A,B工程中的其中一个,而另一个会出现404错误(或者无法访问),此时可参照如下方法解决: 步骤1:找到工程下的w ...

  8. QT/C++插件式框架、利用智能指针管理内存空间的实现、动态加载动态库文件

    QT.C++插件式框架.主要原理还是 动态库的动态加载. dlopen()函数.下面为动态加载拿到Plugininstance对应指针.void**pp=(void**)dlsym(handle,&q ...

  9. Github上的沙雕项目，玩100遍都不够

    这段时间大家在家自我隔离.居家办公憋坏了吧.为了打发这种无聊的生活,我决定拿出我在github上珍藏多年的沙雕项目,让大家在无聊的时候可以打发时间. Github作为互联网上最大的开源社区,一直备受程 ...

  10. Docker学习笔记之-通过Xshell连接 CentOS服务

    上一节演示如何在虚拟机中安装 CentOS服务,Docker学习笔记之-在虚拟机VM上安装CentOS 7.8 本节主要演示如何通过 Xshell软件链接CentOS服务,本例以虚拟机作为演示,直接在 ...