客服电话
APP下载
迪恩网络APP
随时随地掌握行业动态
官方微信
扫描二维码
关注迪恩网络微信公众号
|
本文实例讲述了CSS无序列表创建的标准菜单效果代码。分享给大家供大家参考。具体如下： 这是一款用LI无序列表创建的标准CSS菜单，这是国外一个网站的CSS制作教程，这里重新整理了一下，去除了广告代码，兼容性不错，在IE6/IE7/IE8、火狐下都表现很好，研究CSS的朋友请注意一些CSS的用法，很新颖。 运行效果截图如下： 在线演示地址如下： http://demo.ogeek.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网页设计有所帮助。 |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
六六分期app的软件客服如何联系？不知道吗？加qq群【895510560】即可！标题：六六分期
今天小编告诉大家如何处理win10系统火狐flash插件总是崩溃的问题，可能很多用户都不知
今天小编告诉大家如何对win10系统删除桌面回收站图标进行设置，可能很多用户都不知道
今天小编告诉大家如何对win10系统电脑设置节能降温的设置方法，想必大家都遇到过需要
我们在使用xp系统的过程中,经常需要对xp系统无线网络安装向导设置进行设置，可能很多
今天小编告诉大家如何处理win7系统玩cf老是与主机连接不稳定的问题，可能很多用户都不
电脑对日常生活的重要性小编就不多说了，可是一旦碰到win7系统设置cf烟雾头的问题，很
我们在日常使用电脑的时候，有的小伙伴们可能在打开应用的时候会遇见提示应用程序无法
今天小编告诉大家如何对win7系统打开vcf文件进行设置，可能很多用户都不知道怎么对win
今天小编告诉大家如何对win10系统s4开启USB调试模式进行设置，可能很多用户都不知道怎
请发表评论