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>
提示:可以先在文本框内,根据需要修改代码后再运行
查看全文
相关阅读:
学习流程
Linux计划任务 定时任务 Crond 配置详解 crond计划任务调试 sh x 详解 JAVA脚本环境变量定义
asp.net 将Excel中某个工作簿的数据导入到DataTable方法
在浏览器输入url,发生了什么?BSC结构图(百度搜索关键字发生了什么?)
在C#中使用属性控件添加属性窗口
转载:面向对象在数据库应用程序中的应用(dotNet)
中国软件:10个人20年坎坷路
客户端回调
鼠标放在图片连接上面,预览图片
一个合格的程序员该做的事情
原文地址:https://www.cnblogs.com/joe235/p/1247513.html
最新文章
selenium+java搭建环境
nginx静态资源配置实例
性能测试分类与流程
最佳并发用户和最大并发用户
性能测试中的集合点
nginx文件配置优化
性能测试领域指导表
性能测试术语
nginx调优
性能测试过程
热门文章
sql语句循环插入几百万条数据
asp.net 中用js模拟Button点击事件
SQL2000的个人版也装不了啊呀!!(XP的系统) 以前某个程序在安装的计算机上创建了挂起程序,运行安装程序之前必须重启计算机
IE8无法调试?IE进入不了调试状态
汉字转拼音首字母缩写
简单应用ajaxPro
.net取table里td的值
log4net使用方法
必须使用记录或另一备份以恢复包含系统注册数据的文件.恢复成功(已解决)
Linux6.7 安装图文
Copyright © 2011-2022 走看看