61,112
社区成员
发帖
与我相关
我的任务
分享圆角水平导航栏在IE6下，A:Hover没反应。。。。。
<!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=utf-8" />
<title>无标题文档</title>
<style>
#menu{ font-size:14px; font-family:Arial; background-color:#000000;}
#menu ul{ list-style:none;}
#menu ul li{ float:left; margin:auto 1px; width:100px; display:block;}
#menu ul li a,#menu ul li a:visited{ text-align:center; text-decoration:none; display:block;}
#menu ul li a div,#menu ul li a:visited div{ height:1px; border-left:#000000 solid 1px; border-right:1px #000000 solid; background:#B1B461; border-top-width:0px; display:block;
overflow:hidden;}
#menu ul li a div.a1,#menu ul li a:visited div.a1{ margin:0px 5px; background:#000000;}
#menu ul li a div.a2,#menu ul li a:visited div.a2{ margin:0px 3px; border:0px 2px;}
#menu ul li a div.a3,#menu ul li a:visited div.a3{ margin:0px 2px;}
#menu ul li a div.a4,#menu ul li a:visited div.a4{ margin:0px 1px;}
#menu ul li a p,#menu ul li a:visited p{ background:#B1B461; padding:2px 4px; border:1px #000000 solid; border-top:0px; margin:0px; text-align:center;}
#menu ul li a:hover p,#menu ul li a:active p{ background:#79571E; color:#FFFFFF;}
#menu ul li a:hover div.a1,
#menu ul li a:hover div.a2,
#menu ul li a:hover div.a3,
#menu ul li a:hover div.a4{ background:#79571E;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>
<a href="">
<div class="a1"></div><div class="a2"></div>
<div class="a3"></div><div class="a4"></div>
<p>菜单项</p>
</a>
</li>
<li>
<a href="">
<div class="a1"></div><div class="a2"></div>
<div class="a3"></div><div class="a4"></div>
<p>菜单项</p>
</a>
</li>
<li>
<a href="">
<div class="a1"></div><div class="a2"></div>
<div class="a3"></div><div class="a4"></div>
<p>菜单项</p>
</a>
</li>
<li>
<a href="">
<div class="a1"></div><div class="a2"></div>
<div class="a3"></div><div class="a4"></div>
<p>菜单项</p>
</a>
</li>
</ul>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#menu{ font-size:14px; font-family:Arial; background-color:#000000;}
#menu ul{ list-style:none;}
#menu ul li{ float:left; margin:auto 1px; width:100px; display:block;}
#menu ul li a,#menu ul li a:visited{ text-align:center; text-decoration:none; display:block;}
#menu ul li a div,#menu ul li a:visited div{ height:1px; border-left:#000000 solid 1px; border-right:1px #000000 solid; background:#B1B461; border-top-width:0px; display:block;
overflow:hidden;}
#menu ul li a div.a1,#menu ul li a:visited div.a1{ margin:0px 5px; background:#000000;}
#menu ul li a div.a2,#menu ul li a:visited div.a2{ margin:0px 3px; border:0px 2px;}
#menu ul li a div.a3,#menu ul li a:visited div.a3{ margin:0px 2px;}
#menu ul li a div.a4,#menu ul li a:visited div.a4{ margin:0px 1px;}
#menu ul li a p,#menu ul li a:visited p{ background:#B1B461; padding:2px 4px; border:1px #000000 solid; border-top:0px; margin:0px; text-align:center;}
#menu ul li a:hover p,#menu ul li a:active p{ background:#79571E; color:#FFFFFF;}
#menu ul li a:hover div.a1,
#menu ul li a:hover div.a2,
#menu ul li a:hover div.a3,
#menu ul li a:hover div.a4{ background:#79571E;}
</style>
</head>
<body>
<div id="menu">
<ul>
<li>
<a href="">
<div class="a1"></div><div class="a2"></div>
<div class="a3"></div><div class="a4"></div>
<p>菜单项</p>
</a>
</li>
<li>
<a href="">
<div class="a1"></div><div class="a2"></div>
<div class="a3"></div><div class="a4"></div>
<p>菜单项</p>
</a>
</li>
<li>
<a href="">
<div class="a1"></div><div class="a2"></div>
<div class="a3"></div><div class="a4"></div>
<p>菜单项</p>
</a>
</li>
<li>
<a href="">
<div class="a1"></div><div class="a2"></div>
<div class="a3"></div><div class="a4"></div>
<p>菜单项</p>
</a>
</li>
</ul>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
cs5276 2010-01-18
- 打赏
- 举报
代码还好，不是很长，如果自己读起来有困难的话可以按字母排序的方式给css属性排序，比如：
#menu ul li a p,#menu ul li a:visited p{ background:#B1B461; padding:2px 4px; border:1px #000000 solid; border-top:0px; margin:0px; text-align:center;}
这段可以排成
#menu ul li a p,#menu ul li a:visited p{ background:#B1B461; border:1px #000000 solid; border-top:0px; margin:0px; padding:2px 4px; text-align:center;}
关于选择器的长短可以按照缩进的方式来写，使CSS代码结构化，网上有许多资料
#menu ul li a p,#menu ul li a:visited p{ background:#B1B461; padding:2px 4px; border:1px #000000 solid; border-top:0px; margin:0px; text-align:center;}
这段可以排成
#menu ul li a p,#menu ul li a:visited p{ background:#B1B461; border:1px #000000 solid; border-top:0px; margin:0px; padding:2px 4px; text-align:center;}
关于选择器的长短可以按照缩进的方式来写，使CSS代码结构化，网上有许多资料
xuexijava 2010-01-18
- 打赏
- 举报
没人说也来个帮顶的好结贴啊。。。。。
xuexijava 2010-01-18
- 打赏
- 举报
3q给分结贴
xuexijava 2010-01-16
- 打赏
- 举报
已解决
加上
#menu ul li a:hover{ background:transparent;}
有哪位高手帮看看上面的CSS代码选择器，能简写下
感觉自己写的代码乱，选择器太长
加上
#menu ul li a:hover{ background:transparent;}
有哪位高手帮看看上面的CSS代码选择器，能简写下
感觉自己写的代码乱，选择器太长
xuexijava 2010-01-16
- 打赏
- 举报
如题
代码贴上，高人帮改改。。。
最好能说为什么。。。。。。。。
先谢过了
代码贴上，高人帮改改。。。
最好能说为什么。。。。。。。。
先谢过了
