简单漂亮的导航栏效果

zoukankan html css js c++ java

简单漂亮的导航栏效果

今天在网站偶然看到的一个效果，简单错位实现的导航。
感觉不错挺漂亮，给简单改造了一下，给需要的朋友，兼容IE6\IE7\FF。

效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>简单漂亮的导航栏效果</title> <style type="text/css"> body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; background-color: #000000; color: #FFFFFF; } #LDH ul{ 180px; } #LDH li { list-style:none; margin-bottom: 1px; text-align: left; } #LDH li a{ display:block; line-height: 20px; text-decoration: none; height: 20px; background-color: #FFCC00; color: #000000; } #LDH li span { display: block; height: 20px; 20px; float: left; background-color: #636563; border-right- 1px; border-right-style: solid; border-right-color: #000000; margin-right: 12px; } #LDH li a:hover { background-color: #FFD942; margin-right: 1px; } #LDH li a:hover span { background-color: #82837E; 19px; } </style> </head> <body> <div id="LDH"> <ul> <li><a href="#"> air accessory kit</a></li> <li><a href="#"> air blow gun</a></li> <li><a href="#"> air chuck</a></li> <li><a href="#"> connector</a></li> <li><a href="#"> hardware assortment</a></li> <li><a href="#"> hose</a></li> <li><a href="#"> plastic coupler</a></li> <li><a href="#"> quick coupler</a></li> <li><a href="#"> tire inflator</a></li> <li><a href="#"> vavle</a></li> </ul> </div> </body> </html>
提示：可以先在文本框内，根据需要修改代码后再运行

查看全文

相关阅读:
配置PL/SQL Developer连接Oracle数据库
 解决RPC failed; HTTP 413 curl 22 The requested URL returned error: 413 Request Entity Too Large问题
 解决java.lang.IllegalArgumentException: No converter found for return value of type: class java.util.ArrayList问题
 解决spring mybatis 整合后mapper接口注入失败
 如何解决Failed to start component [StandardEngine[Catalina].StandardHost[127.0.0.1].StandardContext[]]问题
 五毛的cocos2d-x学习笔记05-场景与场景动画，动作
 五毛的cocos2d-x学习笔记04-触摸点
 五毛的cocos2d-x学习笔记03-控件
 五毛的cocos2d-x学习笔记02-基本项目源码分析
 五毛的cocos2d-x学习笔记01-创建项目

原文地址：https://www.cnblogs.com/joe235/p/1247513.html