第一步。我们创建了一个新的my.html档。在内容填入如下面。这个html文件不动，直到最后。正是这些内容：

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

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

<head>

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

</head>

<body>

<div class = "nav">

<ul>

    <li><a href="#">辛星PHP</a></li>

    <li><a href="#">辛星Python</a></li>

    <li><a href="#">辛星CSS</a></li>

    <li><a href="#">辛星HTML</a></li>

    <li><a href="#">辛星jQuery</a></li>

    <li><a href="#">辛星Java</a></li>

</ul></div>

</body>

</html>

第二步，我们開始新建一个xin.css文件，然后開始进行调整这些导航条的显示格式。我们要做的第一步就是先把列表的小圆点给去掉。我们先写例如以下代码：

.nav ul{list-style-type: none;}

我们发现小圆点没了。可是。如今这些列表元素都是竖向排列的，我们想让它们横向排列。

第三步，我们通过设置li的浮动来让它们横向排列，我们在第二行加入代码，因此整个代码成为：

.nav ul{list-style-type: none;}

.nav li{float:left;}

第四步，我们发现如今它们是到了一起了，可是是连在一起的，这是为什么呢，由于它们没有设置宽度，我们仅仅要给他们设置了一定的宽度。它们就会分开啦，可是我们同一时候还能够设置一下背景色，因此该代码就成为了例如以下代码：

.nav ul{list-style-type: none;}

.nav li{float:left;width: 100px;background:#CCC;}

第五步我们就開始设置鼠标的样式了，顺便我们把下划线给去掉。我们前面介绍过伪类的概念，假设读者不熟悉。也能够到前面翻翻我的教程。我们同一时候加入背景颜色什么的，因此它的代码成为以下这个样子：

.nav ul{list-style-type: none;}

.nav li{float:left;width: 100px;background:#CCC;}

.nav a:link{color:#666;background: #CCC;text-decoration: none;}

.nav a:visited{color: #666;text-decoration: none;}

.nav a:hover{color: #FFF;font-weight: bold;text-decoration: underline;background: #0F0;}

第六步也是源自我们的问题，我们调整一下大小，即我们设置一下.nav a的属性值，代码例如以下：

.nav ul{list-style-type: none;}

.nav li{float:left;width: 100px;}

.nav a:link{color:#666;background: #CCC;text-decoration: none;}

.nav a:visited{color: #666;text-decoration: none;}

.nav a:hover{color: #FFF;font-weight: bold;text-decoration: underline;background: #0F0;}

.nav a{display: block;text-align: center;height: 30px;font-weight: bold;}

第七步就是我们的这个导航条是黏在一起的，我们须要分开菜看上去更加舒服一点，因此我们这里设置一下li的属性。让它的边距设置为3px，然后在让字体的大小适合该导航条的大小。最后的代码例如以下：

.nav ul{list-style-type: none;}

.nav li{float:left;width: 100px;margin-left: 3px;line-height: 30px;}

.nav a:link{color:#666;background: #CCC;text-decoration: none;}

.nav a:visited{color: #666;text-decoration: none;}

.nav a:hover{color: #FFF;font-weight: bold;text-decoration: underline;background: #0F0;}

.nav a{display: block;text-align: center;height: 30px;font-weight: bold;}

到如今为止。我们的导航条就做完了，假设读者是一位高手，可能会指出它的不足，可是毕竟是用手写的，没用不论什么的图片，让我们来看一下总体效果把：

版权声明：本文博主原创文章，博客，未经同意不得转载。

辛星与您使用CSS导航条的更多相关文章

  1. css -- 导航条

    1.垂直导航条 HTML: <ul class="nav"> <li><a href="">Home</a>&l ...

  2. css 导航条 布局

    导航条(简单易用的导航) <!DOCTYPE html> <html> <head> <style> ul { list-style-type:none ...

  3. CSS导航条nav简单样式

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

  4. css导航条等元素位置不变

    在容器元素中插入 position: fixed; 如果是在微信小程序中,直接用bottom或者top等就可以简单的设置导航条了.

  5. css导航条的设计

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

  6. css导航条

    #nav ul { display: none; position: absolute; padding-top: 0px;} #nav li:hover ul { display: block;}

  7. 2014年度辛星css教程夏季版第六节

    这一节我们就要讲到布局了,其实布局本身特别简单,但是要合理的布好局就不那么简单了,就像我们写文章一样,写一篇文章非常简单,但是要写一篇名著就很难了,这需要我们扎实的功底和对文学的理解,但是,千里之行, ...

  8. 2014年度辛星css教程夏季版第四节

    接下来的这一节我计划讲解的是超链接和列表的样式,然后我们做出一个导航栏出来,其实导航栏是非常常见的,但是我们这里做得这个有点并不那么完善,等我们学完了css之后再完善它. ************** ...

  9. 辛星和您一起手写CSS气泡

    上文中我公布了一篇手写导航条的博客,那么这一篇博客我将和大家一起手写气泡.那么什么是气泡呢?先给那些刚入门的童鞋一个截图,来更好的认识一下什么是气泡把: 这就是一个简单的气泡啦,那么它主要用来干什么呢 ...

随机推荐

  1. asp.net ajax 检测用户名是否可用代码

    原文  asp.net ajax 检测用户名是否可用代码 .net ajax 检测用户名是否可用代码 <script type="text/网页特效" src="c ...

  2. JavaScript常用全局属性与方法

    最近,在学习JavaScript,Java作域链包含全局,记录下常用的全局属性与方法,就当是知识的积累,未列出全部,如需查看全部可参考JS相关的API文档. 常用的全局属性:  全局属性      作 ...

  3. RAID的解释（附购买链接）

     现在使用RAID6  早期 raid5+1hotspare   小型机有存储备份 就是这么多年没有恢复过~ 金融行业 数据万金  是的 磁盘阵列柜换控制器  型号太老 缓存数据问题 把存储都下线了 ...

  4. ConnectivityManager

    ConnectivityManager 主要管理网络连接的相关的类它主要负责的是1 监视网络连接状态 包括(Wi-Fi, GPRS, UMTS, etc)2 当网络状态改变时发送广播通知3 当网络连接 ...

  5. STL 二分查找三兄弟（lower_bound(),upper_bound(),binary_search())

    一:起因 (1)STL中关于二分查找的函数有三个:lower_bound .upper_bound .binary_search  -- 这三个函数都运用于有序区间(当然这也是运用二分查找的前提),以 ...

  6. Mac OS升级到Yosemite后一些问题

    苹果"优山美地"採用移动设备平面风格,看起来还是相当清爽. 只是升级完还是有一些程序兼容性问题的. 1. 开发Android的程序猿们,Java se 6 须要升级到2014_00 ...

  7. 访问祖先类的虚方法（直接访问祖先类的VMT，但是这种方法在新版本中未必可靠）

    访问祖先类的虚方法 问题提出 在子类覆盖的虚方法中,可以用inherited调用父类的实现,但有时候我们并不需要父类的实现,而是想跃过父类直接调用祖先类的方法. 举个例子,假设有三个类,实现如下: t ...

  8. 推动Common Lisp的实际应用

    推动Common Lisp的实际应用 推动Common Lisp的实际应用

  9. 数字证书, 数字签名, SSL(TLS) , SASL .

    因为项目中要用到TLS + SASL 来做安全认证层. 所以看了一些网上的资料, 这里做一个总结. 1. 首先推荐几个文章: 数字证书: http://www.cnblogs.com/hyddd/ar ...

  10. Android程序的目录结构

    本篇文章我们将介绍Android应用程序的目录结构.本目录下有如图的目录结构: 下面我们来一 一介绍: 1.     Src:该目录中存放的是该项目的源代码 2.     Gen:该目录下的文件全部都 ...