body #nav li a { width: auto; }
#nav li a:hover { background-color: #ffcc00; color: #fff; border-right: 10px solid #ff00ff; border-left: 10px solid #ff00ff; }
#navh li { float: left;list-style: none !important; }
#navh ul { list-style: none; margin: 0; padding: 0; border: none; }
#navh li a { color: #ffffff; text-decoration: none; padding-top: 4px; display: block; width: 65px; height: 20px; text-align: center; background-color: #6600cc; margin-left: 2px; }
#navh li a:hover { background-color: #9999ff; color: #ffffff; }
-->

1.实现背景变换的导航菜单效果预览：

源代码：

<!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=utf-8" />

<title>实现背景变换的导航菜单</title>

<!--

利用#nav 定义div的样式，包括宽度、右边框、填充的符合属性、字体、字号、背景颜色和字体颜色

利用#nav ul 定义 div 下的 ul 对象的样式，包括列表属性 list-style、边距 margin、填充 padding、边框 border 属性

利用#nav li 定义 li 对象的样式

利用#nav li a 定义 li 对象下的链接文字样式

利用#nav li a:hover 定义 li 对象下的链接文字激活样式

 --->

<style type="text/css">

#nav {

    width:150px;

    border-right:1px solid #000;

    padding:0 0 1em 0;

    margin-bottom:1em;

    font-family:"宋体";

    font-size:13px;

    background-color:#ff9933;

    color:#000000;

}

#nav ul {

    list-style:none;

    margin:0;

    padding:0;

    border:none;

}

#nav li {

    margin:0;

    border-bottom:1px solid #ffff00;

}

#nav li a {

    display:block;

    padding:5px 5px 5px 0.5em;

    background-color:#ff9933;

    color:#fff;

    text-decoration:none;

    width:100%;

    border-right:10px solid #ffcc00;

    border-left:10px solid #ffcc00;

}

html>body #nav li a {

    width:auto;

}

#nav li a:hover {

    background-color:#ffcc00;

    color:#fff;

    border-right:10px solid #ff00ff;

    border-left:10px solid #ff00ff;

}

</style>

</head>

<body>

<div id="nav">

  <ul>

    <li><a href="#nav">首页</a></li>

    <li><a href="#nav">公司频道</a></li>

    <li><a href="#nav">最新动态</a></li>

    <li><a href="#nav">客房介绍</a></li>

    <li><a href="#nav">酒店服务</a></li>

    <li><a href="#nav">休闲娱乐</a></li>

    <li><a href="#nav">旅行社</a></li>

  </ul>

</div>

</body>

</html>

2.利用CSS制作横向导航

效果预览：

源代码：

<!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=utf-8" />

<title>利用CSS制作横向导航</title>

<!--

首先定义了ul 下li 对象，给#navh li 指定了 float:left 属性，所有的li对象都向左浮动，从而形成横向的排列形式

导航的关键在于a 链接对象的样式控制，在这里使用#navh li a{} 给li 下的每一个a 链接对象编写了样式

display:block 使得a 链接对象的显示方式由一段文本变为一个块状对象，这样就可以使用CSS的外边距、内边距、边框等属性给a 链接标签加上一系列样式

-->

<style type="text/css">

#navh li{ float:left;}

#navh ul {

    list-style:none;

    margin:0;

    padding:0;

    border:none;

}

#navh li a { color:#ffffff; text-decoration:none; padding-top:4px; display:block; width:65px; height:20px; text-align:center; background-color:#6600cc; margin-left:2px; }

#navh li a:hover{ background-color:#9999ff; color:#ffffff;}

</style>

</head>

<body>

<div id="navh">

  <ul>

    <li><a href="#navh">首页</a></li>

    <li><a href="#navh">公司频道</a></li>

    <li><a href="#navh">最新动态</a></li>

    <li><a href="#navh">客房介绍</a></li>

    <li><a href="#navh">酒店服务</a></li>

    <li><a href="#navh">休闲娱乐</a></li>

    <li><a href="#navh">旅行社</a></li>

  </ul>

</div>

</body>

</html>

来源：《HTML、CSS、Javascript网页制作从入门到精通》13.3章节

【温故而知新-CSS】使用CSS设计网站导航栏的更多相关文章

  1. css+js实现自动伸缩导航栏

    用css+js实现自动伸缩导航栏 需要达到的效果: 默认首页选中样式 设置鼠标滑过效果:颜色变化(#f60),宽度变化,字体变化 所涉及的知识点: 布局:float css: 元素状态切换(displ ...

  2. JavaScript+CSS实现经典的树形导航栏

    在一些管理系统里面,一般右侧都会有树形的导航栏,点击一下就会出现下拉菜单,显示出来该父菜单下面的子菜单 项目,然后配以图片,和CSS的效果,可以说是非常常用的功能,现在做一个项目,正好用到这个功能,于 ...

  3. HTML&CSS构建和设计网站

    1.a链接:两个特性,href.target,href里添加mailto:邮箱可以直接链接到其它人的邮箱,添加#id,可以把窗口位置直接定位到该id的元素位置, target:_black可以在新的窗 ...

  4. css怎样使顶端悬浮导航栏不遮住下面一层页面内容

    在两个层之间加这个<span class="blank" style="height:20px;"></span>,其中高度可以自己设置 ...

  5. css三级下拉的导航栏

    #menu{ height: 65px; width:100%; background-color: rgba(0, 0, 0, 0.5);}#menu ul{ list-style: none;}# ...

  6. <ul>标签设计简单导航栏

    当我们刚开始学习html/css的时候,对于padding .float.行内元素.块级元素用起来可能会混淆,但是呢我们可以通过一个简单的nav案例来清楚各自具体作用. 1.首先我们创建一个大的容器, ...

  7. html、css实现导航栏5种常用下拉效果

    实现的效果:鼠标移入按钮时按钮中的内容就会出现,分别展示不同的出现效果.效果难点:不使用JavaScript,那这个效果的难点就是在于:hover伪类的掌控,以及考验对html的结构掌握. 1. ht ...

  8. PHP全栈开发（八）：CSS Ⅹ 导航栏制作

    学习了这么久的CSS,我们现在也可以小试牛刀一下了,我们使用我们学会的CSS知识来制作一个导航栏. 我们都知道,在现代的导航栏里面,最普遍的就是使用无序列表来制作导航栏. 我们可以使用如下代码来制作一 ...

  9. Android应用-底部导航栏的使用

    目录 1. 设计底部导航栏页面 1.1. 创建必须的文件夹 1.2. 设计主页面 2. 设计逻辑函数 3. 项目展示 底部导航栏是基于Bottom Navigation Bar 插件使用的 这个插件包 ...

随机推荐

  1. cURL和HTTPie

    http://lingxiankong.github.io/blog/2014/08/19/curl-httpie/ 前两天在网上看到一个号称比cURL更牛逼的命令行工具HTTPie,提供命令行交互方 ...

  2. JPA(7) spring-data-jpa

    对于不是使用spring管理的项目,我们就自己创建对象使用:大概的思路就是①创建dao接口②实现该接口,并且编写逻辑: Dao: public interface StudentDao { publi ...

  3. 最小生成树Prim算法（邻接矩阵和邻接表）

    最小生成树,普利姆算法． 简述算法: 先初始化一棵只有一个顶点的树,以这一顶点开始,找到它的最小权值,将这条边上的令一个顶点添加到树中 再从这棵树中的所有顶点中找到一个最小权值(而且权值的另一顶点不属 ...

  4. Python调用C的SDK出现返回值不符合预期以及Segmentation fault

    1.sdk返回值不是int型 1.1 登录函数调用 def login(ip, port, username, password, device_info, error_code):"&qu ...

  5. sqlite3之基本操作（二）

    作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! Python自带一个轻量级的关系型数据库SQLite.这一数据库使用SQL语言.S ...

  6. winform（无边框窗体与timer）

    一.无边框窗体 1.控制按钮如何制作就是放置可以点击的控件,不局限于使用按钮或是什么别的,只要放置的控件可以点击能触发点击事件就可以了 做的好看一点,就是鼠标移入(pictureBox1_MouseE ...

  7. jQuery Mobile笔记

    1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...

  8. C#获取网上图片的宽高代码

    用Visual Studio建立Console应用程序,记得引用程序集System.Drawing; 代码如下: using System;using System.Drawing;using Sys ...

  9. swift学习笔记之-下标脚本

    //下标脚本subscript import UIKit /*下标脚本(Subscripts) 下标脚本: 1.可以定义在类(Class).结构体(structure)和枚举(enumeration) ...

  10. DOM性能小记

    在使用DOM操作时,同样的效果用不同的方式来实现,性能方面也会有很大的差异.尤其在移动式设备上,资源本来就很有限,一旦DOM写不好的话操作就会非常卡顿.这个周末,就写个DOM性能小记吧.错漏之处,望多 ...