主要亮点:
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制作超酷导航栏有所帮助。
