一个导航条（按钮效果）

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

原创最新推荐文章于 2023-06-29 15:32:53 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#yahoo #html #border #google #浏览器 #网易

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>