css制作导航栏上浮动小图标

最新推荐文章于 2021-10-23 10:13:34 发布

weixin_30709809

最新推荐文章于 2021-10-23 10:13:34 发布

阅读量276

点赞数

原文链接：http://www.cnblogs.com/dudumao/archive/2012/10/04/2711557.html

版权

 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <title>Css制作导航栏上浮动小图标</title>
 4 <style>
 5 body {
 6 font-size:12px;
 7 margin:200px;
 8 }
 9 ul, li {
10 list-style-type:none;
11 margin:0;
12 padding:0;
13 float:left;
14 }
15 #nav {
16 height:30px;
17 width:610px;
18 margin-left:auto;
19 margin-right:auto;
20 }
21 #nav li {
22 margin-left:1px;
23 line-height:30px;
24 background:#ff6600;
25 }
26 #nav li a {
27 display:block;
28 float:left;
29 text-decoration:none;
30 color:#fff;
31 padding:0 10px;
32 }
33 sup {
34     position:absolute;
35     margin-top:-20px;
36     margin-left:-60px;
37     width:50px;
38     height:40px;
39     background-image: url(http://www.xxx.com/images/hot.gif);
40     background-repeat: no-repeat;
41 }
42 </style>
43 </head>
44 <body>
45 <div id="nav">
46 <ul>
47     <li><a href="http://www.xxx.com">首页</a></li>
48     <li><a href="http://www.xxx.com">导航一</a></li>
49     <li><a href="http://www.xxx.net">导航二</a></li>
50     <li><a href="http://www.xxx.net">导航三</a><sup></sup></li>
51     <li><a href="http://www.xxx.com">导航四</a></li>
52     <li><a href="http://www.xxx.com">导航五</a></li>
53     <li><a href="http://www.xxx.com">导航六</a></li>
54 </ul>
55 </div>
56 </body>

转载于:https://www.cnblogs.com/dudumao/archive/2012/10/04/2711557.html

weixin_30709809

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css制作导航栏上浮动小图标

1 <head> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <title>Css制作导航栏上浮动小图标</title> 4 <style> 5 body { 6 font-size:12px; 7 m...
复制链接

扫一扫