您的位置：首页 > Web前端 > CSS

css3书签风格按钮列表（兼容ie，ff，chrome，safari和opera）

2014-02-12 10:30 651 查看

原文地址：http://www.tobypitman.com/jquery-style-menu-with-css3/

比原文增加了对于ie，Firefox，Opera的兼容效果

由于ie8及以下不支持圆角效果，ie9及以下不支持css的transition属性，所以浏览器之间会有略微的差异

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3 jQuery style menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">

* { margin:0;
padding:0;
}

html {height: 100%;}

body{
position: relative;
height: 100%;
background-color: #cccccc; /* Old browsers */
background-image: -moz-linear-gradient(top,#cccccc 0%,  #ffffff 100%); /* FF3.6+ */
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background-image: -webkit-linear-gradient(top,#cccccc 0%,  #ffffff 100%); /* Chrome10+,Safari5.1+ */
background-image: -o-linear-gradient(top,#cccccc 0%, #ffffff 100%); /* Opera 11.10+ */
background-image: -ms-linear-gradient(top,#cccccc 0%, #ffffff 100%); /* IE10+ */
background-image: linear-gradient(to bottom,#cccccc 0%, #ffffff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#ffffff',GradientType=0 ); /* IE6-8 */
}

.navbox {
position: relative;
float: left;
}

ul.nav {
list-style: none;
display: block;
width: 200px;
position: relative;
top: 100px;
left: 100px;
padding: 60px 0 60px 0;
background: url(shad2.png) no-repeat;
-webkit-background-size: 50% 100%;
background-size: 50% 100%;
}

li {
margin: 5px 0 0 0;
}

ul.nav li a {
-webkit-transition: all 0.3s ease-out;/* Safari 和 Chrome */
transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;	/* Firefox 4 */
-o-transition: all 0.3s ease-out;	/* Opera */
background: #cbcbcb url(border.png) no-repeat;
color: #174867;
padding: 7px 15px 7px 15px;
-webkit-border-top-right-radius: 10px;
border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
border-bottom-right-radius: 10px;
width: 100px;
display: block;
text-decoration: none;
-webkit-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
}

ul.nav li a:hover {
background: #ebebeb url(border.png) no-repeat;
color: #67a5cd;
padding: 7px 15px 7px 30px;
}

</style>

</head>

<body>

<div class="navbox">
<ul class="nav">
<li><a href="#">XHTML</a></li>
<li><a href="#">C++</a></li>
<li><a href="#">Mootools</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Ajax</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Perl</a></li>
</ul>
</div>

<div class="navbox">
<ul class="nav">
<li><a href="#">XHTML</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Ajax</a></li>
<li><a href="#">PHP</a></li>
</ul>
</div>

<div class="navbox">
<ul class="nav">
<li><a href="#">XHTML</a></li>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS</a></li>
</ul>
</div>

</body>
</html>

效果图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航