http://www.mtime.com/
谢谢....

可以的话,提供一点CSS程序解释..
这个网也有一个类似的导航...

我复制了其中第四个作为例子,请爱号者,高手一起来研究...

<style type="text/css">
table {border-collapse:collapse; margin:0; padding:0;}
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}/####这里是定义了menu ul li a,也就是这定义的是链接的样式吗?
.menu ul li a:hover ul li a.hide {display:none;}/####这里的hover是指什么,
.menu ul li a, .menu ul li a:visited {background:#c9c9a7 url/?????(../../graphics/drop.gif) 20px right no-repeat;}/?????

.menu ul li a:hover {color:#fff; background:#b3ab79;}
.menu ul li a:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}
.menu ul li a:hover ul.right_side li {float:right; border-width:0 1px 0 0 0;}
.menu ul li a:hover ul.left_side li {float:left;}
.menu ul li a:hover ul li a.sub {background:#bd8d5e url(../../graphics/drop2.gif) 20px right no-repeat; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}
.menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;}

</style>

太多的问号了,很想学CSS,但又没有好的网站,或者好的书,有谁能介绍一个网站,或书.小弟先谢谢了~~"/>

这个网的导航菜单好酷啊.懂CSS样式的来帮忙解释下制作过种程.

发布时间:2024-05-10 20:06 发布:上海旅游网

问题描述:

http://www.mtime.com/
谢谢....

可以的话,提供一点CSS程序解释..
这个网也有一个类似的导航...

我复制了其中第四个作为例子,请爱号者,高手一起来研究...

<style type="text/css">
table {border-collapse:collapse; margin:0; padding:0;}
.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}/####这里是定义了menu ul li a,也就是这定义的是链接的样式吗?
.menu ul li a:hover ul li a.hide {display:none;}/####这里的hover是指什么,
.menu ul li a, .menu ul li a:visited {background:#c9c9a7 url/?????(../../graphics/drop.gif) 20px right no-repeat;}/?????

.menu ul li a:hover {color:#fff; background:#b3ab79;}
.menu ul li a:hover ul {display:block; position:absolute; width:749px; top:30px; left:0; background:#b3ab79; color:#fff;}
.menu ul li a:hover ul.right_side li {float:right; border-width:0 1px 0 0 0;}
.menu ul li a:hover ul.left_side li {float:left;}
.menu ul li a:hover ul li a.sub {background:#bd8d5e url(../../graphics/drop2.gif) 20px right no-repeat; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#b3ab79; color:#fff;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:0; top:30px; color:#000; background:#dfc184;}
.menu ul li a:hover ul li a:hover ul li a {background:#dfc184; color:#000;}
.menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;}

</style>

太多的问号了,很想学CSS,但又没有好的网站,或者好的书,有谁能介绍一个网站,或书.小弟先谢谢了~~

问题解答:

其实这个导航很简单的,只用了一点点的CSS加工效果,另外用图片进行修饰。

要学css,网上就有很多教程,比如说这里:http://www.w3school.com.cn/
最好再去下载一个CSS中文手册,里面包括了所有CSS内容:http://cid-068a84282da5c505.skydrive.live.com/self.aspx/Docs/CSS%E4%B8%AD%E6%96%87%E5%AE%8C%E5%85%A8%E5%8F%82%E8%80%83%E6%89%8B%E5%86%8C.chm

刚写的,不知合不合你所说的。hover意思是鼠标滑过时发生的事件。
<!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=utf-8" />
<title>nav_test</title>
<style type="text/css">
body {
background-color:#666666;
width:800px;
font-size:12px;
margin:0 auto;
}
#nav {
width:800px;
text-align:center;

}
.nav_menu li {
background-color:#FF6699;
padding:5px;
width:120px;
list-style:none;
margin-right:2px;
float:left;
border: solid #CCCCCC 1px;
color:#000000!important;
}
.nav_menu li ul li{ background-color:#66CCFF; border: solid #CCCCCC 1px; display:none; width:118px; margin-left:-45px;}
.nav_menu li:hover ul li{display:block;}
</style>
</head>
<body>
<div id="nav">
<ul class="nav_menu">
<li><a href="#">home
<ul>
<li>home</li>
<li>home</li>
<li>home</li>
</ul>
</a> </li>
<li>show<a href="#">
<ul>
<li>show</li>
<li>show</li>
<li>show</li>
</ul>
</a></li>
<li>produce<a href="#">
<ul>
<li>produce</li>
<li>produce</li>
<li>produce</li>
</ul>
</a></li>
<li>news<a href="#">
<ul>
<li>news</li>
<li>news</li>
<li>news</li>
</ul>
</a></li>
<li>about us</li>
</ul>
</div>
</body>
</html>

这个不完全是css做的,还依靠javascript

热点新闻