1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.  
  5. <head>
  6.  
  7.     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  8.  
  9.     <title>常用水平导航制作方式</title>
  10.  
  11. </head>
  12.  
  13. <style type="text/css">
  14.  
  15.     #globallink{
  16.  
  17.         margin:0px;
            padding:0px;                    /*边界、填充均为0*/
            clear:both;                      /*清除浮动*/
        }
  18.  
  19.     #globallink ul{
  20.  
  21.         list-style:none;                     /*不显示列表图象，默认实心圆等*/
            padding:0px;
            margin:0px;
            display:inline;                      /*内联对象的默认值。用该值将从对象中删除行 */
        }
  22.  
  23.     #globallink li{
  24.  
  25.         float:left;                            /*这是关键语句，li不换行 实现横向排列*/
            text-align:center;                      /* 文字居中对齐*/
            width:100px;                          /*每个连接块的宽度为100px*/
        }
  26.  
  27.     #globallink li a{
  28.  
  29.         display:block;                                     /*当然块级元素来显示，使得链接变成一个按钮 */
            padding:9px 6px 11px 6px;                         /*填充上、右、下 、左*/
            margin:0px;                                   /*边界为0px*/
        }
  30.  
  31.     #globallink   li a:link, #globallink li a:visited{
  32.  
  33.         color:#FFF;                             /*字体颜色设置为白色，在css中可以缩写 例如：#f98与ff9988是一样的*/
            font-size:17px;                                   /*字体大小为17px值*/
            text-decoration:none;                          /*不显示下划线*/
            background-color:#3366CC;                     /*设置导航条背景色为蓝色*/
  34.  
  35.     }
  36.  
  37.     #globallink li a:hover{                 /*设置对象在其鼠标悬停时的样式表属性*/
            background-color:#ff9933;              /*改变背景颜色*/
            text-decoration:underline;           /*加上下划线*/
            font-size:20px;                       /*鼠标悬停时字体放大为20px*/
        }
  38.  
  39. </style>
  40.  
  41. <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. 离线部署 Cloudera Manager 5 和 CDH 5.12.1 及使用 CDH 部署 Hadoop 集群服务

    Cloudera Manager Cloudera Manager 分为两个部分:CDH和CM. CDH是Cloudera Distribution Hadoop的简称,顾名思义,就是cloudera ...

  2. mongo长连接

    php mongoclient默认都是长连接 mongo close方法可以关闭长连接 redis,mysql 短连接和长连接可选 他们的close方法都不可以关闭长连接

  3. CUDA ---- Shared Memory

    CUDA SHARED MEMORY shared memory在之前的博文有些介绍,这部分会专门讲解其内容.在global Memory部分,数据对齐和连续是很重要的话题,当使用L1的时候,对齐问题 ...

  4. git操作远端分支（转）

    http://www.cnblogs.com/Camier-myNiuer/p/5558884.html 原文地址:http://hi.baidu.com/lingzhixu/blog/item/4a ...

  5. bean的实例化

    bean的实例化 构造器方式 静态方法方式 普通工厂方式 一般的,默认bean实例化使用的是构造器方式,调用的是无参的构造方法 package com.Model; public class Dog ...

  6. 搭建docker管理工具（DOCKER-UI）

    [root@Docker ~]#docker pull dockerui/dockerui [root@Docker ~]#docker run -d -p 9000:9000 -v /var/run ...

  7. SIM800C 使用基站定位

    /******************************************************************************* * SIM800C 使用基站定位 * ...

  8. CodeForces - 1093D：Beautiful Graph（二分图判定+方案数）

    题意:给定无向图,让你给点加权(1,2,3),使得每条边是两端点点权和维奇数. 思路:一个连通块是个二分图,判定二分图可以dfs,并查集,2-sat染色. 这里用的并查集(还可以带权并查集优化一下,或 ...

  9. makefile，让编译更简单

    陈皓 (CSDN) 概述—— 什么是makefile?或许很多Winodws的程序员都不知道这个东西,因为那些Windows的IDE都为你做了这个工作,但我觉得要作一个好的和professional的 ...

  10. 时间操作（JavaScript版）—页面显示格式：年月日 上午下午 时分秒 星期

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wangshuxuncom/article/details/35222531 <!DOCTYPE ...