日期:2014-05-17  浏览次数:20682 次

求人写一个关于网站导航的css样式
说明:我不是为了设计一个具体的网页而这样要求的,而是通过这个例子代码,来学习一个css.
要求:
页面字体大小13,宋体,黑色.
对于整体页面的链接字(13px),颜色是绿色,要鼠标放上去才有下划线的,且变为红色
而对于导航条的文字(是带有链接的),是这样要求的,16px,白色,鼠标放上面后变为红色的,且变为粗体.
我只能写成如下样子,可是不能达到要求.
BODY   {
color:   Black;
background-color:   #EAFAEB;
font-family:宋体;
font-size:   13;
text-align:   left;
}

A   {
color:   #1E90FF;
text-decoration:   none;
}

A:HOVER   {

color:   Red;
text-decoration:   underline;
}

我对导航的文字定义一个class,可是它怎么设鼠标放上去或离开的行为啊
好迷茫啊。

写得有一些难,不知道你们理解了我的意思没有??

------解决方案--------------------
是不是这个意思?
<style>
.navUp{...}
.navDown{...}
</style>
<a class= "navDown " onmouseover= "this.className= 'navUp ' " onmouseout= "this.className= 'navDown ' "> 。。。 </a>
------解决方案--------------------
<style>
body{
font:13px "宋体 ";
color:#000;
}
a.a1{
color:#fff;
font-size:16px;
text-decoration:none;
}
a:hover.a1{
color:red;
text-decoration:underline;
}
</style>
<a class= "a1 " href= "# "> ss </a>
<a class= "a1 " href= "# "> aa </a> <!--这个是导航的链接-->

或者给导航定一个id,eg
<style>
body{
font:13px "宋体 ";
color:#000;
}
#nav a{
color:#fff;
font-size:16px;
text-decoration:none;
}
#nav a:hover{
color:red;
text-decoration:underline;
}
</style>
<div id= "nav ">
<a class= "a1 " href= "# "> ss </a>
<a class= "a1 " href= "# "> aa </a>
</div>
------解决方案--------------------
<style type= "text/css ">
body {
font: 13px "宋体 ";
color: #000;
background-color: #EAFAEB;
}
a {
color: #050;
text-decoration: none;
}
a:hover {
color: #f00;
text-decoration: underline;
}
.menu li {
list-style: none;
display: inline;
}
.menu a {
color: #fff;
font-size: 16px;
}
.menu a:hover {
color: #f00;
font-weight: bold;
}
</style>
<!--普通链接样式-->
<a href= "# "> test </a>
<!--导航链接样式-->
<ul class= "menu ">
<li> <a href= "# "> menu1 </a> </li>
<li> <a href= "# "> menu2 </a> </li>
</ul>