css横向列表

最新推荐文章于 2025-06-13 21:20:56 发布

yzbczq

最新推荐文章于 2025-06-13 21:20:56 发布

阅读量655

点赞数

CC 4.0 BY-SA版权

分类专栏： ajax 文章标签： CSS HTML

本文链接：https://blog.youkuaiyun.com/yzbczq/article/details/83336297

ajax 专栏收录该内容

29 篇文章

订阅专栏

本文提供了一个使用CSS实现的水平导航菜单示例，展示了如何通过简单的样式调整来改变链接的状态，包括鼠标悬停效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　<style type="text/css">
.test ul{list-style:none;}
.test li{float:left;width:100px;background:#CCC;margin-left:3px;line-height:30px;}
.test a{display:block;text-align:center;height:30px;}
.test a:link{color:#666;background:url(arrow_off.gif) #CCC no-repeat 5px 12px;text-decoration:none;}
.test a:visited{color:#666;text-decoration:underline;}
.test a:hover{color:#FFF; font-weight:bold;text-decoration:none;background:url(arrow_on.gif) #F00 no-repeat 5px 12px;}
</style>
<div class="test">
<ul>
<li><a href="1">首页</a></li>
<li><a href="2">产品介绍</a></li>
<li><a href="3">服务介绍</a></li>
<li><a href="4">技术支持</a></li>
<li><a href="5">立刻购买</a></li>
<li><a href="6">联系我们</a></li>
</ul>
</div>

来自--http://www.bitscn.com/school/HTMLCSS/200709/111793.html
一个有趣的 css 网站.分享..
http://onlyaa.com/examples/Drag.Drop.Modules/demo/demo_20070110_fetch_page.htm