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="#"><span> </span>air accessory kit</a></li> <li><a href="#"><span> </span>air blow gun</a></li> <li><a href="#"><span> </span>air chuck</a></li> <li><a href="#"><span> </span>connector</a></li> <li><a href="#"><span> </span>hardware assortment</a></li> <li><a href="#"><span> </span>hose</a></li> <li><a href="#"><span> </span>plastic coupler</a></li> <li><a href="#"><span> </span>quick coupler</a></li> <li><a href="#"><span> </span>tire inflator</a></li> <li><a href="#"><span> </span>vavle</a></li> </ul> </div> </body> </html>
提示:可以先在文本框内,根据需要修改代码后再运行
查看全文
相关阅读:
#415 Div2 Problem C Do you want a data? (math && 前后缀和 && 快速幂)
KMP模版 && KMP求子串在主串出现的次数模版
Codeforces 1140G Double Tree 倍增 + dp
Codeforces 1140F Extending Set of Points 线段树 + 按秩合并并查集 (看题解)
Codeforces 442D Adam and Tree dp (看题解)
DC3求后缀数组板子
Codeforces 865C Gotta Go Fast 二分 + 期望dp (看题解)
Codeforces 1137D Cooperative Game (看题解)
Codeforces 1139E Maximize Mex 二分图匹配
Codeforces 1139D Steps to One dp
原文地址:https://www.cnblogs.com/joe235/p/1247513.html
最新文章
Django视图系统
Django路由系统
WPF 自定义验证规则
WPF IDataErrorInfo使用-数据对象上验证
WPF数据验证方式
WPF绑定到linq表达式
jquery权限选择
jquery获取选中的值和设置单选扭选中
jquery 包裹标签
jquery 替换元素
热门文章
WPF 绑定到集合
WPF 数据库增删改查
#381 Div2 Problem C Alyona and mex (思维 && 构造)
#383 Div1 Problem B Arpa's weak amphitheater.... (分组背包 && 并查集)
POJ 2155 Matrix (树状数组 && 区间计数)
HDU 2852 KiKi's K-Number (树状数组 && 二分)
POJ 2182 Lost Cows (树状数组 && 二分查找)
UVa 1596 Bug Hunt (string::find && map && 模拟)
POJ 3067 Japan (树状数组 && 控制变量)
POJ 2299 Ultra-QuickSort (树状数组 && 离散化)
Copyright © 2011-2022 走看看