<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>css3下拉工具条 - 网页模板</title>
<script type="text/javascript" charset="UTF-8" src="js/prefixfree.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/base.css" media="all" />
<style>
body {
background:url("bg.jpg") center center no-repeat fixed #333;
background-size: 100% 100%;
}
.demo {
text-align: center;
min-height: 200px;
}
.dropdownlist {
display: inline-block;
margin: 50px;
}
.dropdownlist li {
list-style-type:none;
position:relative;
}
.dropdownlist li a {
font-size:20px;
font-family:"signal-icon";
text-align:center;
line-height:48px;
color:#fff;
display:block;
width:58px;
height:48px;
background-image:-*-linear-gradient(top,rgb(105,96,106),rgb(80,73,80));
transition:all 500ms linear;
text-decoration:none;
}
.list-wrapper {
border-radius:4px;
border:3px solid rgba(243,233,229,0.2);
box-shadow:0 0 0 1px rgba(243,233,229,0.6);
position:relative;
}
.dropdownlist li[class^="list-"] {
padding-bottom:20px;
}
.dropdownlist li[class^="list-"] .list-wrapper > a {
font-size:30px;
border:1px solid rgb(63,57,66);
border-radius:3px;
box-shadow:inset 0 1px 0 rgb(132,127,137),
inset 0 -1px 0 rgb(73,66,71),
inset 0 0 0 1px rgb(106,98,111),
0 1px 0 rgb(137,121,118),
0 2px 0 rgb(163,144,141),
0 0 0 1px rgb(175,155,151);
}
.dropdownlist li:nth-child(1)[class^="item-"] a {
box-shadow: inset 0 1px 0 rgb(132,127,137),
inset 0 -1px 0 rgb(73,66,71),
inset 0 0 0 1px rgb(106,98,111),
-1px 0 0 rgba(110,93,101,0.2),
1px 0 0 rgba(110,93,101,0.2),
0 -1px 0 rgba(110,93,101,0.2);
}
.dropdownlist li:nth-child(2)[class^="item-"] a {
box-shadow: inset 0 1px 0 rgb(132,127,137),
inset 0 -1px 0 rgb(73,66,71),
inset 0 0 0 1px rgb(106,98,111),
-1px 0 0 rgba(110,93,101,0.4),
1px 0 0 rgba(110,93,101,0.4);
}
.dropdownlist li:nth-child(3)[class^="item-"] a {
box-shadow: inset 0 1px 0 rgb(132,127,137),
inset 0 -1px 0 rgb(73,66,71),
inset 0 0 0 1px rgb(106,98,111),
-1px 0 0 rgba(110,93,101,0.6),
1px 0 0 rgba(110,93,101,0.6),
0 1px 0 rgba(89,75,84,0.8),
0 2px 0 rgba(89,75,84,0.6),
0 3px 0 rgba(89,75,84,0.4);
}
.dropdownlist li[class^="item-"] > a {
border:1px solid rgb(64,57,66);
border-bottom:none;
}
.dropdownlist li:last-child[class^="item-"] > a {
border:1px solid rgb(64,57,66);
}
.dropdownlist li:first-child[class^="item-"] > a{
border-radius:3px 3px 0 0;
}
.dropdownlist li:last-child[class^="item-"] > a {
border-radius:0 0 3px 3px;
}
.dropdownlist li[class^="item-"] > a:visited {
color:#033e6b;
}
.dropdownlist li a:hover {
background-image:-*-linear-gradient(top,rgb(90,80,80),rgb(65,68,65));
cursor:pointer;
}
.dropdownlist li[class^="list-"] ul {
position:absolute;
left:-3px;
top:130%;
border-radius:4px;
padding:0;
border:none;
transition: all 500ms ease-in;
border:3px solid rgba(243,233,229,0.2);
box-shadow:0 0 0 1px rgba(243,233,229,0.6);
display: none;
}
.dropdownlist li[class^="list-"] ul:before {
content:'';
border-left:5px solid transparent; border-right:5px solid transparent; border-top:5px solid transparent; border-bottom:5px solid rgba(243,233,229,0.4); position:absolute;
width:1px;
height:1px;
left:50%;
top:-15px;
margin-left:-5px
}
.dropdownlist li[class^="list-"]:hover ul {
display:block;
}
@font-face {
font-family: 'signal-icon';
src:url('fonts/signal-icon.eot');
src:url('fonts/signal-icon.eot?#iefix') format('embedded-opentype'),
url('fonts/signal-icon.svg#signal-icon') format('svg'),
url('fonts/signal-icon.woff') format('woff'),
url('fonts/signal-icon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body>
<div class="page">
<header id="header">
<hgroup class="white">
<h1>CSS3制作下拉工具条</h1>
<h2>作者：<a href="http://weibo.com/zhp1991" target="_blank">白牙</a>(如有更好建议或疑问请加群：1041263)</h2>
</hgroup>
</header>
<section class="demo">
<ul class="dropdownlist">
<li class="list-1">
<div class="list-wrapper">
<a href="#">#</a>
<ul>
<li class="item-1"><a href="#1">"</a></li>
<li class="item-2"><a href="#2">$</a></li>
<li class="item-3"><a href="#3">!</a></li>
</ul>
</div>
</li>
</ul>
</section>
</div>
<br><br><br><br><br><br><br><br><br><br>
<div style="text-align:center;clear:both">
<p>适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。</p><br>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
css3下拉工具条.zip
版权申诉
163 浏览量
2022-11-17
21:18:03
上传
评论
收藏 51KB ZIP 举报
css3下拉工具条.zip （10个子文件） 
css3下拉工具条 
css3下拉工具条.jpg 19KB jiaoben726 css 
base.css 1KB fonts 
signal-icon.svg 4KB signal-icon.dev.svg 4KB signal-icon.ttf 2KB signal-icon.woff 2KB signal-icon.eot 2KB
index.html 5KB js prefixfree.min.js 6KB bg.jpg 33KB资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
