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 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>

你可能感兴趣的:(css)