使用"滑动门"技术设置玻璃材质背景的水平导航菜单
2012-05-29 00:26
519 查看
本例在CSS中使用"滑动门"技术设置玻璃材质背景的水平导航菜单,代码如下:
![](http://pic002.cnblogs.com/images/2012/168241/2012052900274912.png)
素材下载: http://files.cnblogs.com/likebeta/201205292522870.zip
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>使用滑动门技术实现玻璃效果菜单</title> <style type="text/css"> .menu { font-family:Arial; font-size:14px; width:0 auto 0 0; background:url(under.gif); } .menu ul { padding:0 0 0 8px; margin:0; list-style:none; height:35px; display:block; width:500px; } .menu ul li { float:left; } .menu ul li a { display:block; line-height:35px; color:#DDDDDD; text-decoration:none; padding:0 0 0 14px; float:left; //兼容IE } .menu ul li a:hover { color:#FFFFFF; background:url(hover.gif); } .menu ul li a b { display:block; padding:0 14px 0 0; } .menu ul li a:hover b { color:#FFFFFF; background:url(hover.gif) no-repeat right top; } </style> </head> <body> <div class="menu"> <ul> <li><a href="#"><b>Home</b></a></li> <li><a href="#"><b>Connect</b></a></li> <li><a href="#"><b>Web Dev</b></a></li> <li><a href="#"><b>Web Design</b></a></li> <li><a href="#"><b>Map</b></a></li> </ul> </div> </body> </html>
![](http://pic002.cnblogs.com/images/2012/168241/2012052900274912.png)
素材下载: http://files.cnblogs.com/likebeta/201205292522870.zip
相关文章推荐
- 使用CSS双层滑动门技术实现三态玻璃效果水平导航菜单
- iOS7 设置背景图片或导航为毛玻璃效果
- 如何使用jQuery技术开发ios风格的页面导航菜单
- 如何使用jQuery技术开发ios风格的页面导航菜单
- 使用jQuery开发超酷带有背景波浪动画的单页面网站导航菜单
- 使用JavaScript控制圆弧背景的导航菜单_网页代码站(www.webdm.cn)
- 使用SlidingMenu问题:无法设置背景,滑动白边和返回键收起展开菜单
- iOS7 设置背景图片或导航为毛玻璃效果
- CSS导航菜单--应用滑动门技术的玻璃效果菜单
- Qt中设置widget背景颜色/图片的注意事项(使用样式表 setStyleSheet())
- 通栏形式的划出栏显示(使用于导航菜单)
- div+css实现鼠标经过背景高亮的导航菜单代码
- android 4.2修改设置菜单的背景颜色
- OpenGL使用glColorMaterial设置材质
- Android的Toolbar(含溢出菜单设置[弹出菜单的使用])的使用PopMenu的样式
- 【android】 使用一个shape.xml文件,使用代码设置不同圆角背景颜色
- PopupWindow的使用及背景变暗设置
- WordPress菜单导航功能设置教程
- 海豚色水平CSS导航菜单,挺实用
- 使用视频作为网页背景的技术探讨