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>
提示:可以先在文本框内,根据需要修改代码后再运行
查看全文
相关阅读:
Spring 中的邮件任务
Spring 定时任务
java中同步交互 与 异步交互
Springboot 版本包冲突
Derby 配置环境变量
Springboot中的Web服务Tomcat改为Jetty
二叉树中和为某一值的路径
0-Java中this和super的用法总结
树9:二叉搜索树的后序遍历
位运算-输入一个整数,输出该数二进制表示中1的个数。其中负数用补码表示。
原文地址:https://www.cnblogs.com/joe235/p/1247513.html
最新文章
TortoiseGit部署和网络异常处理
Shaderlab-chapter2 渲染流水线
luajit-官方性能优化指南和注解(转
luaJIT-记录
算法-log2求值(整型)
lua-设计与实现-4表
lua-快捷开发
lua-设计与实现- 指令格式汇总解读
C-语言特性
定时器基础
热门文章
style获取样式注意
arguments实参集合
图片笔记-js多态,函数传参
js闲记
css闲记
js属性操作之 “.”点运算符合“[ ]”中括号运算符的关系
spring security 配置
SpringSecurity 与 Thymeleaf 整块无法响应 (新)
Spring Security 学习前言
SpringSecurity4 与 Thymeleaf 整合模块无法显应
Copyright © 2011-2022 走看看