CSS文本导航

发布-adding | 查看- | 发表时间-2008-2-29

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
ul {
  list-style-type: none;
}
li {
  float: left;
  display: block;
  width: 100px;
}
a {
  font-family: "宋体";
  font-size: 12px;
  font-weight: bold;
  color: #006699;
  text-decoration: none;
  line-height: 12px;
  width: 100px;
  display: block;
  vertical-align: middle;
}
a:hover {
  font-family: "宋体";
  line-height: 12px;
  font-size: 12px;
  font-weight: bold;
  color: #FF9900;
  text-decoration: none;
}
#enFont{
  font-size: 10px;
  color: #999999;
  width: 100px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  line-height: 10px;
  float:left;
}
span{margin:0px;padding:0px;}

-->
</style>
</head>

<body>
<ul>
  <li><a href="#">导航菜单</a><span id="enFont">Menu</span></li>
  <li><a href="#">导航菜单</a><span id="enFont">Menu</span></li>
  <li><a href="#">导航菜单</a><span id="enFont">Menu</span></li>
  <li><a href="#">导航菜单</a><span id="enFont">Menu</span></li>
  <li><a href="#">导航菜单</a><span id="enFont">Menu</span></li>
  <li><a href="#">导航菜单</a><span id="enFont">Menu</span></li>
  <li><a href="#">导航菜单</a><span id="enFont">Menu</span></li>
</ul>
</body>

</html>

或许你还对下面的文章感兴趣

CSS常用网站布局实例(2008-2-26 21:32:17)

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。