036_CSS导航条
1. 导航栏/链接列表
1.1. 导航栏需要标准的html作为基础。
1.2. 在我们的例子中, 将用标准的html列表来构建导航栏。
1.3. 导航栏基本上是一个链接列表, 因此使用<ul>和<li>元素是非常合适的:
<ul><li><a href="default.asp">Home</a></li><li><a href="news.asp">News</a></li><li><a href="contact.asp">Contact</a></li><li><a href="about.asp">About</a></li> </ul>1.4. 现在, 让我们从列表中去掉圆点和外边距:
ul {list-style-type: none;margin: 0;padding: 0; }1.4.1. list-style-type:none删除圆点。导航栏不需要列表项标记。
1.4.2. 把外边距和内边距设置为0可以去除浏览器的默认设定。
1.5. 以下例子中的代码是用在垂直、水平导航栏中的标准代码
<!DOCTYPE html> <html><head><title>垂直、水平导航栏中的标准代码</title><meta charset="utf-8" /><style type="text/css">ul {list-style-type: none;margin: 0;padding: 0;}</style></head><body><ul><li><a href="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li><li><a href="#about">About</a></li></ul></body> </html>1.6. 效果图
2. 垂直导航栏
2.1. 如需构建垂直导航栏, 我们只需要定义<a>元素的样式, 除了上面的代码之外:
a {display: block;width: 120px; }2.2. display: block把链接显示为块元素可使整个链接区域可点击(不仅仅是文本), 同时也允许我们规定宽度。
2.3. width: 120px块元素默认占用全部可用宽度。我们需要规定120像素的宽度。
2.4. 请始终规定垂直导航栏中<a>元素的宽度。如果省略宽度, IE6会产生意想不到的结果。
2.5. 完整样式的垂直导航栏实例
<!DOCTYPE html> <html><head><title>垂直导航栏</title><meta charset="utf-8" /><style type="text/css">ul {list-style-type: none;margin: 0;padding: 0;}a {text-decoration: none; /*去掉下划线*/display: block;width: 120px;color: #FFFFFF;font-weight: bold;text-align: center;line-height: 48px;}/* 未访问的链接 */a:link {background-color: #bebebe;;} /* 已访问的链接 */ a:visited {background-color: #00FF00;} /* 鼠标移动到链接上 */a:hover {background-color: #FF00FF;} /* 选定的链接 */a:active {background-color: #0000FF;}</style></head><body><ul><li><a href="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li><li><a href="#about">About</a></li></ul></body> </html>2.6. 效果图
3. 水平导航栏
3.1. 创建水平导航栏可以对列表进行浮动:
li {float: left; } a {display: block;width: 120px; }3.2. 使用float: left来把块元素滑向彼此。
3.3. display: block把链接显示为块元素可使整个链接区域可点击(不仅仅是文本), 同时也允许我们规定宽度。
3.4. width: 120px 由于块元素默认占用全部可用宽度, 链接无法滑动至彼此相邻。我们需要规定120像素的宽度。
3.5. 完整样式对列表项进行浮动的水平导航栏
<!DOCTYPE html> <html><head><title>水平导航栏</title><meta charset="utf-8" /><style type="text/css">body {margin: 0px;}ul {list-style-type: none;margin: 0;padding: 0;}li {float: left;}a {text-decoration: none;display: block;width: 120px;color: #FFFFFF;font-weight: bold;text-align: center;line-height: 48px;}/* 未访问的链接 */a:link {background-color: #98bf21} /* 已访问的链接 */ a:visited {background-color: #00FF00;} /* 鼠标移动到链接上 */a:hover {background-color: #FF00FF;} /* 选定的链接 */a:active {background-color: #0000FF;}</style></head><body><ul><li><a href="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li><li><a href="#about">About</a></li></ul></body> </html>3.6. 效果图
《新程序员》：云原生和全面数字化实践50位技术专家共同创作，文字、视频、音频交互阅读
总结
以上是生活随笔为你收集整理的036_CSS导航条的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 019_CSS尺寸
- 下一篇： 038_CSS3图像透明度