基于html和CSS3制作酷炫的导航栏

网络
秋天的落叶随着秋姑娘翩翩起舞；秋天的落叶随着秋的旋律摇荡；秋天的落叶随着秋的微风留下一片光明的大道。秋天让我们来体会 "自古逢秋悲寂寥 "的凄凉；秋天让我们来体会 "无边落木萧萧下 "的哀愁；秋天让我们来体会 "秋空雁度青天远 "的疏朗。

主要亮点:

1 ul 水平显示

2 li 去掉圆点

3 li中字体水平、竖直居中

4 li控制边框样式

5 使用html + css3 渐变画图 制作背景图片

6 更改颜色透明度

7 DIV制作边框阴影

先看效果图:




CSS Code复制内容到剪贴板
  1. <!doctypehtml>
  2. htmllang="en">
  3. <head>
  4. <metacharset="UTF-8"><!----编码----->
  5. <metaname="Generator"content="EditPlus®">
  6. <metaname="Author"content="黄涛">
  7. <metaname="Keywords"content="关键字，搜索引擎">
  8. <metaname="Description"content="描述语言">
  9. <title>案例</title>
  10. <styletype="text/css">
  11. *{margin:0;padding:0;}
  12. body{background:url("images/bg_title.jpg")repeat-x,url("images/bg.jpg");}
  13. #Logo{
  14. width:895px;height:45px;
  15. /*margin:上下左右*/
  16. margin:50pxauto;
  17. border-radius:10px;
  18. /*html+css3渐变画图*/
  19. background-image:-webkit-linear-gradient(rgba(41,41,41,0.75)0%,rgba(54,54,54,0.72)50%,rgba(24,23,23,0.94)51%);
  20. box-shadow:1px1px33px#fff;/*设计阴影的*/
  21. }
  22. #Logoulli
  23. {
  24. width:127px;height:45px;
  25. list-style:none;/*去掉圆点*/
  26. float:left;/*水平显示*/
  27. color:white;/*#fff*/
  28. font-size:18px;
  29. font-family:"微软雅黑";
  30. text-align:center;
  31. line-height:45px;/*行高跟高度一致时，竖直居中*/
  32. border-right:1pxsolid#000;/*右边框*/
  33. }
  34. #Logoullia
  35. {
  36. color:white;/*#fff*/
  37. font-size:18px;
  38. font-family:"微软雅黑";
  39. text-decoration:none;
  40. }
  41. #Logoulli:hover
  42. {
  43. background:rgba(10,5,5,0.45);
  44. }
  45. #Logoulli.first:hover
  46. {
  47. border-radius:10px0px0px10px;/*左上左下圆弧显示*/
  48. }
  49. #Logoulli.last:hover
  50. {
  51. border-radius:0px10px10px0px;/*右上右下圆弧显示*/
  52. }
  53. #Logoulliulli
  54. {
  55. border:none;
  56. border-top:1pxsolid#989898;
  57. background:rgba(10,5,5,0.45);/*颜色透明度*/
  58. border-radius:10px;
  59. }
  60. #Logoulliul
  61. {
  62. display:none;/*不显示*/
  63. }
  64. #Logoulliulli:hover
  65. {
  66. background:rgba(10,5,5,0.8);/*颜色透明度*/
  67. border-radius:10px;
  68. }
  69. #Logoulli:hoverul
  70. {
  71. display:block;
  72. -webkit-animation:roll1sease;/*roll旋转名称，1s旋转效果*/
  73. }
  74. @-webkit-keyframesroll/*roll旋转名称与上面一致*/
  75. {
  76. 0%{-webkit-transform:rotate(0deg);}
  77. 100%{-webkit-transform:rotate(360deg);}
  78. }
  79. </style>
  80. </head>
  81. <body>
  82. <divid="Logo">
  83. <ul>
  84. <liclass="first">
  85. <arel="nofollow noopener noreferrer" href="#">网址<a>
  86. <ul>
  87. <li>
  88. <arel="nofollow noopener noreferrer" href="http://www.baidu.com">百度</a>
  89. </li>
  90. <li>
  91. <arel="nofollow noopener noreferrer" href="http://www.sina.com">新浪</a>
  92. </li>
  93. </ul>
  94. </li>
  95. <li>
  96. <arel="nofollow noopener noreferrer" href="#">新闻<a>
  97. </li>
  98. <li>
  99. <arel="nofollow noopener noreferrer" href="#">视频<a>
  100. </li>
  101. <li>
  102. <arel="nofollow noopener noreferrer" href="#">音乐<a>
  103. </li>
  104. <li>
  105. <arel="nofollow noopener noreferrer" href="#">地图<a>
  106. </li>
  107. <li>
  108. <arel="nofollow noopener noreferrer" href="#">问问<a>
  109. </li>
  110. <liclass="last"style="border:none;">
  111. <arel="nofollow noopener noreferrer" href="#">关于<a>
  112. </li>
  113. </ul>
  114. </div>
  115. </body>
  116. /html>

代码超简单，希望对大家学习制作html和css3制作超酷导航栏有所帮助。

到此这篇关于基于html和CSS3制作酷炫的导航栏就介绍到这了。唯一可以强横地霸占一个男人的回忆的，就是活得更好。更多相关基于html和CSS3制作酷炫的导航栏内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！

您可能有感兴趣的文章
CSS3 3D酷炫立方体变换动画的如何实现
CSS3制作酷炫的条纹背景
CSS3制作酷炫的三维相册效果
CSS3近阶段篇之酷炫的3D旋转透视
如何利用CSS如何实现酷炫的下拉框特效