<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

    <title>常用水平导航制作方式</title>

</head>

<style type="text/css">

    #globallink{

        margin:0px;
        padding:0px;                    /*边界、填充均为0*/
        clear:both;                      /*清除浮动*/
    }

    #globallink ul{

        list-style:none;                     /*不显示列表图象，默认实心圆等*/
        padding:0px;
        margin:0px;
        display:inline;                      /*内联对象的默认值。用该值将从对象中删除行 */
    }

    #globallink li{

        float:left;                            /*这是关键语句，li不换行 实现横向排列*/
        text-align:center;                      /* 文字居中对齐*/
        width:100px;                          /*每个连接块的宽度为100px*/
    }

    #globallink li a{

        display:block;                                     /*当然块级元素来显示，使得链接变成一个按钮 */
        padding:9px 6px 11px 6px;                         /*填充上、右、下 、左*/
        margin:0px;                                   /*边界为0px*/
    }

    #globallink   li a:link, #globallink li a:visited{

        color:#FFF;                             /*字体颜色设置为白色，在css中可以缩写 例如：#f98与ff9988是一样的*/
        font-size:17px;                                   /*字体大小为17px值*/
        text-decoration:none;                          /*不显示下划线*/
        background-color:#3366CC;                     /*设置导航条背景色为蓝色*/

    }

    #globallink li a:hover{                 /*设置对象在其鼠标悬停时的样式表属性*/
        background-color:#ff9933;              /*改变背景颜色*/
        text-decoration:underline;           /*加上下划线*/
        font-size:20px;                       /*鼠标悬停时字体放大为20px*/
    }

</style>

<body>
<div id="globallink">
    <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="#">关于我们</a></li>
    </ul>
</div>
</body>
</html>

CSS 标签实例二的更多相关文章

  1. CSS标签选择器(二)

    一.CSS选择器概述 1.1.CSS功能 CSS语言具有两个基本功能:匹配和渲染 当浏览器在解析CSS样式时,首先应该确定哪些元素需要渲染,即匹配哪些HTML元素,这个操作由CSS样式中的选择器负责标 ...

  2. CSS 标签实例一 homepage.css

    #overlayer { position: absolute; //指定一个元素(静态的,相对的,绝对或固定)的定位方法的类型. /*top: 50px;*/ left: 0; //定义了定位元素左 ...

  3. HTML学习笔记——标签（二）

    标签十二:<ul>标签 语义:是没有前后顺序的信息列表 语法: <ul> <li>信息</li> <li>信息</li> ... ...

  4. css sprite实例

    css sprite直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.本文章向码农们介绍css sprite使用方法和基本使用实例,需要的码农可以参考一下. 一.什么是css ...

  5. CSS 分页实例

    CSS 分页实例 一.简单分页 如果你的网站有很多个页面,你就需要使用分页来为每个页面做导航. 以下实例演示了如何使用 HTML 和 CSS 来创建分页: <!DOCTYPE html> ...

  6. 模拟jQuery中的ready方法及实现按需加载css,js实例代码

    这篇文章介绍了模拟jQuery中的ready方法及实现按需加载css,js实例代码,有需要的朋友可以参考一下     一.ready函数的实现经常用jQuery类库或其他类库中的ready方法,有时候 ...

  7. CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼

    今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化 可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...

  8. CSS 基础（二）

    本节内容: 文本 字体 链接 列表 表格 一.文本 文本颜色 颜色属性被用来设置文字的颜色. 三种方式: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的 ...

  9. CSS标签居中

    CSS标签居中是相对于父标签说的,即在父标签的中居中.通常是在子标签中使用margin:0 auto,来使子标签居中.此外子标签需要有固定的宽度才行,比如 子标签为div时,div的宽度默认占父标签的 ...

随机推荐

  1. 关于python课程的想法和建议。

    第一次听说python是在刚结束与世隔绝的高中生活之后,当时的网络上铺天遍地都是人工智能和机器学习,于是便知道了python这门编程语言.我是光电信息科学与工程专业的学生,这个专业的学生必须要懂计算机 ...

  2. DevExpress v17.2新版亮点——CodeRush篇（一）

    用户界面套包DevExpress v17.2日前终于正式发布,本站将以连载的形式为大家介绍各版本新增内容.本文将介绍了CodeRush v17.2 的新功能,快来下载试用新版本! Unit Test ...

  3. SharePoint的安装和配置-PowerShell

    1. 引入SPModule组件 Import-Module SPModule.misc Import-Module SPModule.setup 需要将执行策略修改为不限制 2. 无人值守安装Shar ...

  4. vue 和 react 选择

    经典 react 还是有其优点的, 生态更丰富,  更容易 测试 和 调试, 更适合超大型应用,  更适合app,  weex不一定能到达 reactNative的高度 而vue , 更为直观, 上手 ...

  5. Linux：centos内核升级

    centos内核升级 centos升级2.6内核到3.10 在yum的ELRepo源中,有 m ain l ine(3.13.1). l ong- t erm(3.10.28)这2个内核版本,long ...

  6. Java实现哈夫曼编码和解码

    最近无意中想到关于api返回值加密的问题,譬如我们的api需要返回一些比较敏感或者重要不想让截获者得到的信息,像如果是做原创图文的,文章明文返回的话则有可能被抓包者窃取. 关于请求时加密的方式比较多, ...

  7. docker使用web界面管理Registry

    1:安装 docker-registry-web项目   [root@Docker ~]#docker pull atcol/docker-registry-ui   2:docker run镜像   ...

  8. tensorflow中屏蔽输出的log信息方法

    tensorflow中可以通过配置环境变量 'TF_CPP_MIN_LOG_LEVEL' 的值,控制tensorflow是否屏蔽通知信息.警告.报错等输出信息. 使用方法: import os imp ...

  9. QT 5.4.1 for Android Windows环境搭建

    QT 5.4.1 for Android Windows环境搭建 2015-5-13 目录 一.参考文章: 二.准备软件: 三.安装准备好的软件: 四.配置Qt 5.4.1 for Android 五 ...

  10. 20155225 2016-2017-2 《Java程序设计》第五周学习总结

    20155225 2006-2007-2 <Java程序设计>第五周学习总结 教材学习内容总结 使用try.catch异常处理,异常处理继承架构等 使用Collection收集对象,了解C ...