CSS无序列表创建的标准菜单效果代码
2015-10-13 10:27
645 查看
本文实例讲述了CSS无序列表创建的标准菜单效果代码。分享给大家供大家参考。具体如下:
这是一款用LI无序列表创建的标准CSS菜单,这是国外一个网站的CSS***教程,这里重新整理了一下,去除了广告代码,兼容性不错,在IE6/IE7/IE8、火狐下都表现很好,研究CSS的朋友请注意一些CSS的用法,很新颖。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/css-list-menu-style-codes/
具体代码如下:
希望本文所述对大家的CSS网页设计有所帮助。
这是一款用LI无序列表创建的标准CSS菜单,这是国外一个网站的CSS***教程,这里重新整理了一下,去除了广告代码,兼容性不错,在IE6/IE7/IE8、火狐下都表现很好,研究CSS的朋友请注意一些CSS的用法,很新颖。
运行效果截图如下:
在线演示地址如下:
http://demo.jb51.net/js/2015/css-list-menu-style-codes/
具体代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS菜单</title> <style type="text/css"> html,body { margin:0; padding:0; color:#222; background:#fff; } body { padding:10px; font:76%/150% Verdana, Arial, sans-serif; } #nav { margin:0; padding:0; background:#808259; width:100%; float:left; border:1px solid #42432d; border-width:1px 0; } #nav li { display:inline; padding:0; margin:0; } #nav a:link,#nav a:visited { color:#000; background:#b2b580; padding:20px 40px 4px 10px; float:left; width:auto; border-right:1px solid #42432d; text-decoration:none; font:bold 1em/1em Arial, Helvetica, sans-serif; text-transform:uppercase; text-shadow: 2px 2px 2px #555; } #nav a:hover { color:#fff; background:#727454; } #nav li:first-child a { border-left:1px solid #42432d; } #home #nav-home a, #about #nav-about a, #archive #nav-archive a, #lab #nav-lab a, #reviews #nav-reviews a, #contact #nav-contact a { background:#e35a00; color:#fff; text-shadow:none; } #home #nav-home a:hover, #about #nav-about a:hover, #archive #nav-archive a:hover, #lab #nav-lab a:hover, #reviews #nav-reviews a:hover, #contact #nav-contact a:hover { background:#e35a00; } #nav a:active { background:#e35a00; color:#fff; } </style> </head> <body id="home"> <ul id="nav"> <li id="nav-home"><a href="#">我的博客</a></li> <li id="nav-about"><a href="#">日志排行</a></li> <li id="nav-archive"><a href="#">日志存档</a></li> <li id="nav-lab"><a href="#">我的书库</a></li> <li id="nav-reviews"><a href="#">活动图集</a></li> <li id="nav-contact"><a href="#">联系我们</a></li> </ul> </div> </body> </html>
希望本文所述对大家的CSS网页设计有所帮助。
相关文章推荐
- 手机web——自适应网页设计(html/css控制)
- JS+CSS实现仿雅虎另类滑动门切换效果
- CSS书写规范、顺序
- JS+CSS实现仿雅虎另类滑动门切换效果
- CSS3 文本溢出截取
- 【转】CSS position绝对定位absolute relative
- HTML/CSS(五)margin padding border
- css中postion的fixed与absolute区别详解
- TextView自定义超链接样式
- CSS3实现的响应式字体:自适应视图窗口大小的新单位
- CSS简要内容
- html2canvas根据DOM元素样式实现网页截图
- 解决自动换行,自适应高度。常见与标签样式的 ViewGroup
- SeekBar样式
- css一些有效特性
- css关于文本的重要属性
- CSS工具(Autoprefixer、CSScomb、CSS3 Pie、CSS3 Maker)
- css3 calc():css简单的数学运算-加减乘除
- css3 2D变换 transform
- CSS实现带倒三角标记的WEB标准菜单效果代码