一个导航条（按钮效果）

最新推荐文章于 2023-06-29 15:32:53 发布

setoy

最新推荐文章于 2023-06-29 15:32:53 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML/CSS 文章标签： yahoo html border google 浏览器网易

本文链接：https://blog.youkuaiyun.com/setoy/article/details/1553343

HTML/CSS 专栏收录该内容

13 篇文章

订阅专栏

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<head>

<title>border-style的outset属性</title>

.bevelmenu{ font: bold 13px arial; padding: 6px 0; margin: 0; width: 100%; background-color: #fff2bf; text-align: left; /*将值设置为"right"菜单会向右靠拢*/ }

.bevelmenu li{ list-style: none; display: inline; }

.bevelmenu li a{ padding: 3px 0.5em; text-decoration: none; color: black; background-color: #fff2bf; border: 2px solid #fff2bf; }

.bevelmenu li a:hover{ color: black; background-color: #ffe271; border-style: outset; }

html>body .bevelmenu li a:active{ /* 鼠标按下的效果只有非ie浏览器才支持 */ border-style: inset; } </style>

</head>

<body>

<ul class="bevelmenu"><li><a href="http://www.sina.com">新浪</a> </li><li><a href="http://www.163.com">网易</a> </li><li><a href="http://www.baidu.com">baidu</a> </li><li><a href="http://www.yahoo.com">yahoo</a> </li><li><a href="http://www.google.com">google</a> </li></ul>

</body>

</html>