runxinzhi.com
首页
百度搜索
简单漂亮的导航栏效果
今天在网站偶然看到的一个效果,简单错位实现的导航。
感觉不错挺漂亮,给简单改造了一下,给需要的朋友,兼容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>
提示:可以先在文本框内,根据需要修改代码后再运行
相关阅读:
【BZOJ】1626: [Usaco2007 Dec]Building Roads 修建道路(kruskal)
【BZOJ】1669: [Usaco2006 Oct]Hungry Cows饥饿的奶牛(lis)
【BZOJ】1666: [Usaco2006 Oct]Another Cow Number Game 奶牛的数字游戏(刷水严重)
【BZOJ】1699: [Usaco2007 Jan]Balanced Lineup排队(rmq/树状数组)
【BZOJ】1625: [Usaco2007 Dec]宝石手镯(01背包)
【BZOJ】1617: [Usaco2008 Mar]River Crossing渡河问题(dp)
【BZOJ】1618: [Usaco2008 Nov]Buying Hay 购买干草(dp)
【BZOJ】1616: [Usaco2008 Mar]Cow Travelling游荡的奶牛(dp/-bfs)
【BZOJ】1613: [Usaco2007 Jan]Running贝茜的晨练计划(dp)
【BZOJ】1612: [Usaco2008 Jan]Cow Contest奶牛的比赛(floyd/dfs)
原文地址:https://www.cnblogs.com/joe235/p/1247513.html
最新文章
Android异常之 unable to write jarlist cache file
Android之 学习路线
Android之 环境搭建
Comet:基于 HTTP 长连接的“服务器推”技术
Web 通信 之 长连接、长轮询(long polling)
【转】零基础写Java知乎爬虫之进阶篇
一个java高级工程师的进阶之路
jdom学习读取XML文件
解决hibernate向mysql插入中文乱码问题
java分层架构概念
热门文章
Java程序员常用工具集
简单分析什么是SQL注入漏洞
WEB前端开发成长指南
【BZOJ】1646: [Usaco2007 Open]Catch That Cow 抓住那只牛(bfs)
【BZOJ】1677: [Usaco2005 Jan]Sumsets 求和(dp/规律)
【BZOJ】1657: [Usaco2006 Mar]Mooo 奶牛的歌声(单调栈)
【BZOJ】1631: [Usaco2007 Feb]Cow Party(dijkstra)
【BZOJ】1636: [Usaco2007 Jan]Balanced Lineup(rmq+树状数组)
【BZOJ】1679: [Usaco2005 Jan]Moo Volume 牛的呼声(数学)
【BZOJ】1621: [Usaco2008 Open]Roads Around The Farm分岔路口(dfs)
Copyright © 2020-2023
润新知