<!--
所学技术:
1.float属性
2.css继承
3.内联的js函数
4.使用列表创建导航
5.鼠标改变字体颜色 A:hover
6.padding-right属性 作用是使子列表向左或向右靠
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
*
{
PADDING-LEFT: 0px;
padding-right: 0px;
}
.hNav UL LI
{
FLOAT: left; OVERFLOW: hidden; WIDTH: 99px; LINE-HEIGHT: 29px; HEIGHT: 29px; TEXT-ALIGN: center; LIST-STYLE-TYPE: none;
}
.hNav UL LI A:hover
{
COLOR: #f33;
}
.hNav UL LI.over
{
OVERFLOW: visible
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="hNav">
<ul>
<li οnmοuseοver="this.className='over'" οnmοuseοut="this.className='' ">
<a >网站导航</a>
<ul>
<li style="PADDING-LEFT: 0px; padding-right: 0px;"><a>财富</a></li>
<li><a style="">财富</a></li>
<li><a>财富</a></li>
</ul>
</li>
<li οnmοuseοver="this.className='over'" οnmοuseοut="this.className='' ">
<a>网站导航2</a>
<ul>
<li><a>财富</a></li>
<li><a>财富</a></li>
</ul>
</li>
<li οnmοuseοver="this.className='over'" οnmοuseοut="this.className='' ">
<a>网站导航3</a>
<ul>
<li><a>财富</a></li>
</ul>
</li>
</ul>
</div>
</form>
</body>
</html>
css 最简单的导航条
最新推荐文章于 2024-08-12 22:06:26 发布