![](https://iknow-base.cdn.bcebos.com/lxb/notice.png)
DIV+CSS导航条
http://www.kovan.cn/请问用dic+css用:hover属性通过和js的配合能够实现上面网站导航的效果么!谢谢!...
http://www.kovan.cn/
请问用dic+css
用:hover属性
通过和js的配合能够实现上面网站导航的效果么!
谢谢! 展开
请问用dic+css
用:hover属性
通过和js的配合能够实现上面网站导航的效果么!
谢谢! 展开
3个回答
展开全部
CSS导航样式
导航条的制作可以采用一个列表,并对之中的列表项浮动定位,再加上细节上的样式设计,一个导航就完成了,下面根据不同的导航实例分析一下。
横向导航
BADY部分
<body> <!—以列表作为导航条,列表项作为导航频道,很好的利用了列表标签-->
<ul id="nav">
<li><a href="#" id="current">首页</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">参考</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">联系</a></li>
</ul>
</body>
CSS部分
<style type="text/css" >
<!--
#nav {
height:26px;
border-bottom:2px solid #2788da;
}
#nav li { /*针对列表项,去除列表前面的样式,并使之浮动定位,形成横向导航条*/
float:left;
list-style-type:none;
}
#nav li a { /*将导航文字作为块级元素,使之可以像一个方块按钮一样去运作,对之进行样式设计*/
color:#000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
background-color:#eee;
margin-left:2px;
}
#nav li a#current { /*此样式是想模仿一种文件夹样式,当前文档所在频道会显示为与其他频道不同的样式*/
background-color:#2788da;
color:#fff;
}
#nav li a:hover{ /*设置鼠标悬在按钮上的样式,注意,a:hover只有在a标签中有href属性中的才有效*/
background-color:#bbb;
color:#fff;
}
-->
</style>
导航条的制作可以采用一个列表,并对之中的列表项浮动定位,再加上细节上的样式设计,一个导航就完成了,下面根据不同的导航实例分析一下。
横向导航
BADY部分
<body> <!—以列表作为导航条,列表项作为导航频道,很好的利用了列表标签-->
<ul id="nav">
<li><a href="#" id="current">首页</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">参考</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">联系</a></li>
</ul>
</body>
CSS部分
<style type="text/css" >
<!--
#nav {
height:26px;
border-bottom:2px solid #2788da;
}
#nav li { /*针对列表项,去除列表前面的样式,并使之浮动定位,形成横向导航条*/
float:left;
list-style-type:none;
}
#nav li a { /*将导航文字作为块级元素,使之可以像一个方块按钮一样去运作,对之进行样式设计*/
color:#000;
text-decoration:none;
padding-top:4px;
display:block;
width:97px;
height:22px;
text-align:center;
background-color:#eee;
margin-left:2px;
}
#nav li a#current { /*此样式是想模仿一种文件夹样式,当前文档所在频道会显示为与其他频道不同的样式*/
background-color:#2788da;
color:#fff;
}
#nav li a:hover{ /*设置鼠标悬在按钮上的样式,注意,a:hover只有在a标签中有href属性中的才有效*/
background-color:#bbb;
color:#fff;
}
-->
</style>
参考资料: http://hi.baidu.com/%B0%D9%C1%E9%C4%F1137/blog/item/6b75690e568e15e036d122d0.html
展开全部
就用CSS就能实现那种效果了。用background-image:url()就OK了。
a:hover {
background-image: url(bg.gif);
}
a:hover {
background-image: url(bg.gif);
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
展开全部
可以的,不用js就可以,你把他的网页另存一下,就可以得到css了
已赞过
已踩过<
评论
收起
你对这个回答的评价是?
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询