Html5 + Css3 制作酷炫的导航栏
来源:互联网 发布:php证书查询系统 编辑:程序博客网 时间:2024/06/06 16:31
主要亮点:
1 ul 水平显示
2 li 去掉圆点
3 li中字体水平、竖直居中
4 li控制边框样式
5 使用html + css3 渐变画图 制作背景图片
6 更改颜色透明度
7 DIV制作边框阴影
先看效果图:
实现代码:
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <!----编码-----> <meta name="Generator" content="EditPlus®"> <meta name="Author" content="黄涛"> <meta name="Keywords" content="关键字,搜索引擎"> <meta name="Description" content="描述语言"> <title>案例</title><style type="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:上下 左右*/margin:50px auto;border-radius:10px;/*html + css3 渐变画图 */ 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:1px 1px 33px #fff;/*设计阴影的*/}#Logo ul li{width:127px; height:45px;list-style:none;/*去掉圆点*/float:left;/*水平显示*/color:white;/* #fff */font-size:18px;font-family:"微软雅黑";text-align:center;line-height:45px;/* 行高跟 高度一致时,竖直居中*/border-right:1px solid #000;/*右边框*/}#Logo ul li a{color:white;/* #fff */font-size:18px;font-family:"微软雅黑";text-decoration:none;}#Logo ul li:hover{background:rgba(10,5,5,0.45);}#Logo ul li.first:hover{border-radius:10px 0px 0px 10px;/*左上 左下 圆弧显示 */}#Logo ul li.last:hover{border-radius:0px 10px 10px 0px;/*右上 右下 圆弧显示 */}#Logo ul li ul li {border:none;border-top:1px solid #989898;background:rgba(10,5,5,0.45);/*颜色透明度 */border-radius:10px;}#Logo ul li ul{display:none;/*不显示*/}#Logo ul li ul li:hover{background:rgba(10,5,5,0.8);/*颜色透明度 */border-radius:10px;}#Logo ul li:hover ul{display:block;-webkit-animation:roll 1s ease;/*roll 旋转名称,1s旋转效果 */}@-webkit-keyframes roll /*roll旋转名称与上面一致*/{0% {-webkit-transform:rotate(0deg);}100% {-webkit-transform:rotate(360deg);}}</style> </head> <body><div id="Logo"><ul><li class="first"> <a href="#">网址<a><ul><li><a href="http://www.baidu.com">百度</a></li><li><a href="http://www.sina.com">新浪</a></li></ul></li><li> <a href="#">新闻<a></li><li> <a href="#">视频<a></li><li> <a href="#">音乐<a></li><li> <a href="#">地图<a></li><li> <a href="#">问问<a></li><li class="last" style="border:none;"> <a href="#">关于<a></li></ul></div> </body></html>
3 0
- Html5 + Css3 制作酷炫的导航栏
- 利用html5和css3制作简单精美的网站导航
- css3制作导航栏
- html5--导航栏制作
- html5--导航栏制作
- 最新炫酷HTML5/CSS3应用推荐 导航
- css3的属性transition制作菜单导航
- html5/Css3 导航样式
- CSS3制作旋转导航
- HTML5--CSS3制作的三级下拉菜单
- HTML5+CSS3制作便签
- HTML5和css3实例:制作HTML5验证的网页表单
- 纯html5+css3下拉导航
- 【实战HTML5与CSS3 第二篇】绚丽的快速导航!
- 【CSS3】---练习制作导航菜单
- css3动画制作扇形导航
- HTML5与CSS3学习笔记:导航栏(一)
- css3学习过程中导航条的制作笔记
- 怎么知道属性表中有多少个可编辑的field
- JavaScript 闭包 之 依次循环每一秒 alert 数组中的一个值
- Android中Manifest的Application的name和getApplication()的关系
- (php)输出菱形
- JavaWeb——Servlet完整总结
- Html5 + Css3 制作酷炫的导航栏
- 互联网---张鑫旭---读了张大大的好多博客了(自己小有心得) 怀着感恩的心来写
- C和指针(学习之旅)
- 上传文件(含文件名加密)
- C++多态有哪几种方式?
- 反射工具类
- 利用java反射机制解析json
- 内存管理
- Android studio中几个插件的使用