【温故而知新-CSS】使用CSS设计网站导航栏
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设计网站导航栏的更多相关文章
- css+js实现自动伸缩导航栏
用css+js实现自动伸缩导航栏 需要达到的效果: 默认首页选中样式 设置鼠标滑过效果:颜色变化(#f60),宽度变化,字体变化 所涉及的知识点: 布局:float css: 元素状态切换(displ ...
- JavaScript+CSS实现经典的树形导航栏
在一些管理系统里面,一般右侧都会有树形的导航栏,点击一下就会出现下拉菜单,显示出来该父菜单下面的子菜单 项目,然后配以图片,和CSS的效果,可以说是非常常用的功能,现在做一个项目,正好用到这个功能,于 ...
- HTML&CSS构建和设计网站
1.a链接:两个特性,href.target,href里添加mailto:邮箱可以直接链接到其它人的邮箱,添加#id,可以把窗口位置直接定位到该id的元素位置, target:_black可以在新的窗 ...
- css怎样使顶端悬浮导航栏不遮住下面一层页面内容
在两个层之间加这个<span class="blank" style="height:20px;"></span>,其中高度可以自己设置 ...
- css三级下拉的导航栏
#menu{ height: 65px; width:100%; background-color: rgba(0, 0, 0, 0.5);}#menu ul{ list-style: none;}# ...
- <ul>标签设计简单导航栏
当我们刚开始学习html/css的时候,对于padding .float.行内元素.块级元素用起来可能会混淆,但是呢我们可以通过一个简单的nav案例来清楚各自具体作用. 1.首先我们创建一个大的容器, ...
- html、css实现导航栏5种常用下拉效果
实现的效果:鼠标移入按钮时按钮中的内容就会出现,分别展示不同的出现效果.效果难点:不使用JavaScript,那这个效果的难点就是在于:hover伪类的掌控,以及考验对html的结构掌握. 1. ht ...
- PHP全栈开发（八）：CSS Ⅹ 导航栏制作
学习了这么久的CSS,我们现在也可以小试牛刀一下了,我们使用我们学会的CSS知识来制作一个导航栏. 我们都知道,在现代的导航栏里面,最普遍的就是使用无序列表来制作导航栏. 我们可以使用如下代码来制作一 ...
- Android应用-底部导航栏的使用
目录 1. 设计底部导航栏页面 1.1. 创建必须的文件夹 1.2. 设计主页面 2. 设计逻辑函数 3. 项目展示 底部导航栏是基于Bottom Navigation Bar 插件使用的 这个插件包 ...
随机推荐
- asp.net 前台绑定后台变量方法总结：<%= %> 和<%# %>的区别
经常会碰到在前台代码中要使用(或绑定)后台代码中变量值的问题.一般有<%= str%>和<%# str %>两种方式,这里简单总结一下.如有错误或异议之处,敬请各位指教. 一 ...
- JPA(4)表表关联关系
在我们做数据库设计的时候,最烦的就是各种表之间的关联关系了,关联关系有:一对多,多对一,一对一,其中还有单向和双向的区别. 1.双向一对多及多对一映射:既然是双向,那么就是同一类的了:双向一对多关系中 ...
- u-boot移植总结（二）LED点灯调试 和 u-boot加载地址
(一)LED点灯调试 FL2440电路总共有4个LED0,LED1,LED2,LED3,分别接到板子GPB5,GPB6,GPB8,GPB10引脚.通过设置三个寄存器GPBCON(0x56000010) ...
- 泛函编程（12）－数据流－Stream
在前面的章节中我们介绍了List,也讨论了List的数据结构和操作函数.List这个东西从外表看上去挺美,但在现实中使用起来却可能很不实在.为什么?有两方面:其一,我们可以发现所有List的操作都是在 ...
- Spring核心概念之AOP
一.AOP 的概念 AOP(Aspect Oriented Programming)的缩写,面向切面编程,主要作用就是对代码进行增强处理. 理解面向切面编程的含义:就是在不改变原有程序的基础上为代码增 ...
- python学习笔记2（pycharm、数据类型）
Pycharm 的使用 IDE(Integrated Development Environ ment) :集成开发环境 Vim :经典的linux下的文本编辑器(菜鸟和大神喜欢使用) Emac ...
- PHP 操作socket 实现简易聊天室
<?php $socket = socket_create(AF_INET, SOCK_STREAM, SOL_TCP ); socket_bind($socket ,'127.0.0.1', ...
- SharpGL学习笔记(十八) 解析3ds模型并显示
笔者设想的3D仿真中的元件,是不可能都是“画”出来的.这样就玩复杂了,应该把任务分包出去,让善于制作模型的软件来制作三维模型,我们只需要解析并且显示它即可. 3dsmax制作三维模型的方便,快捷,专业 ...
- jQuery Mobile笔记
1.获取jQuery mobile 文件,访问jQuerymobile网站下载 (貌似使用jquery mobile后,jquery会自动在网页中添加一些class类,第一次知道的我是被吓呆的!!) ...
- [Android]Android Debug key 的制作
Android Debug key 的制作 背景 在Android App 开发过程中,我们经常会使用一些第三方的服务,但是很多的第三方服务都会要求我们提供包名,签名安装包,这时候,我们在日常调试时, ...