css导航条

最新推荐文章于 2025-08-07 11:18:45 发布

hnbk8

最新推荐文章于 2025-08-07 11:18:45 发布

阅读量476

点赞数

文章标签： css float xhtml url html border

本文介绍了一个使用HTML和CSS实现的导航栏样式案例，详细展示了如何通过CSS对导航栏进行定制化设计，包括背景颜色、字体大小、鼠标悬停效果等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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" lang="en" xml:lang="en">
<head>
<title>Chapter 2: Scalable Navigation</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body {
margin: 0;
padding: 0;
font-size: small;
}
#nav {
float: left;
width: 100%;
margin: 0;
padding: 10px 0 0 46px;
list-style: none;
background: #FFCB2D url(img/nav_bg.gif) repeat-x bottom left;
}
#nav li {
float: left;
margin: 0;
padding: 0;
font-family: "Lucida Grande", sans-serif;
font-size: 55%;
}
#nav a {
float: left;
display: block;
margin: 0 1px 0 0;
padding: 4px 8px;
color: #333;
text-decoration: none;
border: 1px solid #9B8748;
border-bottom: none;
background: #F9E9A9 url(img/off_bg.gif) repeat-x top left;
}
#nav a:hover, body#intro #t-intro a {
color: #333;
padding-bottom: 5px;
border-color: #727377;
background: #fff url(img/on_bg.gif) repeat-x top left;
}
#nav a:hover, body#intro #in a{
color: #333;
padding-bottom: 5px;
border-color: #727377;
background: #fff url(img/on_bg.gif) repeat-x top left;
}
</style>
</head>