CSS文本导航

分类 : 代码案例

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=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="http://www.css5.net">CSS5.NET</a><span id="enFont">Menu</span></li>

</ul>

</body>

</html>


分类: 代码案例  发布: 2019-07-18-星期四   访问() .NET技术    Web前端    JAVA开发    语言编程    数据库    电脑知识    代码案例

Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved