【前端积累】菜单垂直伸缩样式

最新推荐文章于 2024-07-20 18:16:53 发布

weixin_34198453

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量225

点赞数

文章标签：前端 ViewUI

原文链接：http://www.cnblogs.com/dream-to-pku/p/6039172.html

版权

<!DOCTYPE html>
<html>
<head>
<title>圆角水平菜单</title>
<meta charset="utf-8">
<style type="text/css">
*{margin: 0;padding: 0;font-size: 14px;}
ul{list-style: none;height: 50px;border-bottom: 5px solid #F60;padding-left: 30px;}
li{float: left;margin-top:20px; }
a{text-decoration: none;display: block;height: 30px;line-height: 30px;width: 120px;background-color: #ccc;margin-bottom: 1px;text-align: center;}
.on,a:hover{color: #fff;background-color:#F60;height: 40px;margin-top: -10px;line-height: 40px;}
</style>
</head>
<body>
<ul>
<li><a class="on" 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>
</html>

转载于:https://www.cnblogs.com/dream-to-pku/p/6039172.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34198453

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端积累】菜单垂直伸缩样式

<!DOCTYPE html><html><head><title>圆角水平菜单</title><meta charset="utf-8"><style type="text/css">*{margin: 0;padding: 0;font-size: 14px;}ul{list-s...
复制链接

扫一扫