|
本文用CSS实现的一个网站首页导航栏，鼠标放上去将会有突出提示，不错，大家可以看看，并用代码和运行后的效果欣赏！
<HTML>
<HEAD>
<META content=EditPlus name=Generator>
<LINK href="lc.css" type=text/css rel=stylesheet>
<DIV id=content> <UL> <LI><A href="">首 页</A> <LI><A href="/html/java/">java专区</A> <LI><A href="/html/net/">.net专区</A> <LI><A href="/html/database/">数据库</A> <LI><A href="/html/website/">网站制作</A> <LI><A href="/html/download/">资源下载</A> <LI><A href="/html/health/">IT健康</A> <LI><A href="/html/it/">IT故事</A> </LI></UL> </DIV>
<PRE> lc.css</PRE>
效果如下：
lc.css文件内容如下：
#content{
- border:1px solid #FF9F60;
- background-color:#FFF0E6;
- height:36px;
- }
- #content ul{
- margin:5px;
- padding: 0px;
- float: left;
- }
- #content li{
- float:left;
- padding:0px;
- list-style-type:none;
- width: 60px;
- text-align:center;
- margin-top: 0px;
- margin-right:5px;
- margin-bottom: 0px;
- margin-left:0px;
- }
-
- #content li a {
- font-family: "宋体";
- font-size:12px;
- font-weight:bold;
- text-decoration:none;
- color:#333333;
- padding:4px;
- width: 60px;
- display:block;
- border: 1px solid #FFF0E6;
- }
- #content li a:hover {
- border:1px solid #FF9F60;
- }<PRE></PRE>
| 
