今天小编跟大家讲解下有关基于html和CSS3制作酷炫的导航栏 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关基于html和CSS3制作酷炫的导航栏 的相关资料，希望小伙伴们看了有所帮助。
主要亮点:
1 ul 水平显示
2 li 去掉圆点
3 li中字体水平、竖直居中
4 li控制边框样式
5 使用html + css3 渐变画图 制作背景图片
6 更改颜色透明度
7 DIV制作边框阴影
先看效果图:
CSS Code复制内容到剪贴板 <!doctypehtml> htmllang="en"> <head> <metacharset="UTF-8"><!----编码-----> <metaname="Generator"content="EditPlus®"> <metaname="Author"content="黄涛"> <metaname="Keywords"content="关键字，搜索引擎"> <metaname="Description"content="描述语言"> <title>案例</title> <styletype="text/css"> *{margin:0;padding:0;} body{background:url("images/bg_title.jpg")repeat-x,url("images/bg.jpg");} #Logo{ width:895px;height:45px; margin:50pxauto; border-radius:10px; 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%); box-shadow:1px1px33px#fff; } #Logoulli { width:127px;height:45px; list-style:none; float:left; color:white; font-size:18px; font-family:"微软雅黑"; text-align:center; line-height:45px; border-right:1pxsolid#000; } #Logoullia { color:white; font-size:18px; font-family:"微软雅黑"; text-decoration:none; } #Logoulli:hover { background:rgba(10,5,5,0.45); } #Logoulli.first:hover { border-radius:10px0px0px10px; } #Logoulli.last:hover { border-radius:0px10px10px0px; } #Logoulliulli { border:none; border-top:1pxsolid#989898; background:rgba(10,5,5,0.45); border-radius:10px; } #Logoulliul { display:none; } #Logoulliulli:hover { background:rgba(10,5,5,0.8); border-radius:10px; } #Logoulli:hoverul { display:block; -webkit-animation:roll1sease; } @-webkit-keyframesroll { 0%{-webkit-transform:rotate(0deg);} 100%{-webkit-transform:rotate(360deg);} } </style> </head> <body> <divid="Logo"> <ul> <liclass="first"> <ahref="#">网址<a> <ul> <li> <ahref="http://www.baidu.com">百度</a> </li> <li> <ahref="http://www.sina.com">新浪</a> </li> </ul> </li> <li> <ahref="#">新闻<a> </li> <li> <ahref="#">视频<a> </li> <li> <ahref="#">音乐<a> </li> <li> <ahref="#">地图<a> </li> <li> <ahref="#">问问<a> </li> <liclass="last"style="border:none;"> <ahref="#">关于<a> </li> </ul> </div> </body> /html>代码超简单，希望对大家学习制作html和css3制作超酷导航栏有所帮助。
来源：爱蒂网
