DahuangPhoneLAMPCSS & DIV → css ul li 菜单代码


  共有319人关注过本帖平板打印复制链接

主题:css ul li 菜单代码

帅哥哟,离线,有人找我吗?
wong
  1楼 | 信息 | 搜索 | 邮箱 | 主页 | UC


加好友 发短信
等级:新手上路 帖子:3 积分:132 威望:0 精华:0 注册:2013/12/4 22:26:13
css ul li 菜单代码  发帖心情 Post By:2017/9/22 11:32:03 [只看该作者]

 默认状态下,图标为arrow.off.gif,当鼠标移动到链接上,图标变为arrow_on.gif

效果变成:

现在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;}

页面的完整代码是:

<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>

好了,主要步骤就是这7步,立刻拷贝和修改代码试试,你也可以用CSS做横向菜单了!

 回到顶部