故事博客

听说分享~
一个有意思的博客!

div+css制作导航栏上浮动hot、new等小图标

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Css制作导航栏上浮动小图标</title>
<style>
body {
font-size:12px;
margin:200px;
}
ul, li {
list-style-type:none;
margin:0;
padding:0;
float:left;
}
#nav {
height:30px;
width:610px;
margin-left:auto;
margin-right:auto;
}
#nav li {
margin-left:1px;
line-height:30px;
background:#ff6600;
}
#nav li a {
display:block;
float:left;
text-decoration:none;
color:#fff;
padding:0 10px;
}
sup {
position:absolute;
margin-top:-8px;
margin-left:-13px;
background:url(background.gif);
width:16px;
height:16px
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">网页特效</a></li>
<li><a href="#">精品代码</a><sup></sup></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品资讯</a></li>
<li><a href="#">客户服务</a></li>
</ul>
</div>
</body>


分享到: 更多()