打印

[讨论] 纳闷儿好长时间了，高手请进~~~

taoqun [楼主]

竹叶青青

中级会员

认证
帖子: 220
体力: 284
威望: 0
当前: 湖北武汉
离线: 11 天

专长 前端制作

1^# 大中小发表于 2009-12-9 10:21

<!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>
#nav{ width:250px; font-family:Arial, Helvetica, sans-serif;}
#nav ul{ margin:0; padding:0; list-style-type:none;}
#nav li{
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;
}
#nav li a{ display:block; padding:5px 5px 5px 20px; text-decoration:none; border-left:20px solid #0000FF; border-right:1px solid #0000FF;}
#nav li a:link ,#nav li a:visited{
	background-color:#666666;
	color:#FFFFFF;
}
#nav li a:hover{ background-color:#000000; color:#FFFFFF;}
</style>
</head>
<body>
<div id="nav">
<ul>
   <li><a href="#">我的主页</a></li>
   <li><a href="#">竹叶青青</a></li>
   <li><a href="#">CSS学习心得</a></li>
   <li><a href="#">青青在学习CSS</a></li>
   <li><a href="#">WEB标准系列页</a></li>
   <li><a href="#">前端制作</a></li>
   <li><a href="#">我的博客</a></li>
</ul>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

问题1:这三种写法都能实现我想要的效果，但哪种比较符合规范呢？
问题2：支持IE78 FF，IE6也能实现，问题是鼠标必须触发文字才会实现链接效果，这就是传说中的IE6不支持伪类么？

[ 本帖最后由 taoqun 于 2009-12-9 10:26 编辑 ]

路漫漫长，一步一步扎实的走！

TOP

西部数码分布式集群主机傲视群雄 | visual studio 2010专区

tonijoy

涛涛轰

高级会员

帖子: 788
体力: 950
威望: 1
当前: 广东深圳
离线: 2 天

专长 网页设计,前端制作,策划

2^# 大中小发表于 2009-12-9 10:42

..........

我觉得第一种好些...

帅哥开始AS之旅了~~

TOP

PSD网页模板下载,高端实用 | 免费自助建站

yoom

木匠的背篓

版主

认证
帖子: 2995
体力: 4424
威望: 5
当前: 上海虹口

专长 前端制作

3^# 大中小发表于 2009-12-9 11:05

推荐第一种，除非导航区域里面只有“导航”。

web标准学习书籍推荐

TOP

沪江网招聘:程序开发/设计/前端

lisfan

中级会员

认证
帖子: 116
体力: 229
威望: 0
当前: 浙江温州
离线: 14 天

专长 网页设计

4^# 大中小发表于 2009-12-9 11:20

问题1：第3种最不规范，如果以仅仅这里的这个导航而言，第2种是最好的，但实际网页里可不是这样，因此还是第1种
问题2：给 a加宽度width:204px;

TOP

danran521

新手上路

认证
帖子: 16
体力: 18
威望: 0
当前: 北京海淀区
离线: 1 天

5^# 大中小发表于 2009-12-9 11:35

3#的说得有道理如果这个区域只有导航的话用第二种如果还有其他内容块就用第一种
个人比较喜欢用第二种语义性好点

TOP

taoqun [楼主]

竹叶青青

中级会员

认证
帖子: 220
体力: 284
威望: 0
当前: 湖北武汉
离线: 11 天

专长 前端制作

6^# 大中小发表于 2009-12-9 11:49

回复 4# lisfan 的帖子

为什么是204px呢？问题已经解决

路漫漫长，一步一步扎实的走！

TOP

lisfan

中级会员

认证
帖子: 116
体力: 229
威望: 0
当前: 浙江温州
离线: 14 天

专长 网页设计

7^# 大中小发表于 2009-12-9 13:01

250-5-20-20-1=204px..

TOP

31666595

中级会员

认证
帖子: 106
体力: 218
威望: 0
当前: 北京海淀区
离线: 20 天

8^# 大中小发表于 2009-12-9 13:10

回复 6# taoqun [楼主] 的帖子

也可以给a 加display:block;
这是IE6的 BUG，应该是把a默认为行内元素了。。

TOP

taoqun [楼主]

竹叶青青

中级会员

认证
帖子: 220
体力: 284
威望: 0
当前: 湖北武汉
离线: 11 天

专长 前端制作

9^# 大中小发表于 2009-12-9 14:32

回复 7# lisfan 的帖子

问题1已经解决，问题2主要是IE6的bug问题，你说的设置a元素的width:204px本身没有错，但是在我这个问题里设置是无效的，当a元素设置了zoom:1值后便触发了haslayout，IE6下就正常了，不过谢谢你。。。

路漫漫长，一步一步扎实的走！

TOP

stri

棒棒

银牌会员

认证
帖子: 903
体力: 1181
威望: 0
当前: 河南郑州
离线: 1 天

专长 前端制作

10^# 大中小发表于 2009-12-9 17:31

回复 9# taoqun [楼主] 的帖子

那就 JS了.
我也推荐前两种.
原因:你试下在无CSS页面下.看那个页面表现的更有意义.

技术博客....

TOP

ycg520520

初级会员

帖子: 87
体力: 143
威望: 0
离线: 1 天

11^# 大中小发表于 2009-12-9 17:47

SEO角度来讲建议用一下

<!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>
*{font-size:12px; margin:0; padding:0;}
#nav{width:250px; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0; list-style-type:none;}
#nav h2 { border-bottom:1px solid #FFF;}
#nav h2 a{ display:block; padding:5px 5px 5px 20px; text-decoration:none; border-left:20px solid #0000FF; border-right:1px solid #0000FF;}
#nav h2 a:link ,#nav h2 a:visited{
	background-color:#666666;
	color:#FFFFFF;
}
#nav h2 a:hover{ background-color:#000000; color:#FFFFFF;}
</style>
</head>
<body>
<div id="nav">
   <h2><a href="#">我的主页</a></h2>
   <h2><a href="#">竹叶青青</a></h2>
   <h2><a href="#">CSS学习心得</a></h2>
   <h2><a href="#">青青在学习CSS</a></h2>
   <h2><a href="#">WEB标准系列页</a></h2>
   <h2><a href="#">前端制作</a></h2>
   <h2><a href="#">我的博客</a></h2>
</div>
</body>
</html>

提示：您可以先修改部分代码再运行

TOP

taoqun [楼主]

竹叶青青

中级会员

认证
帖子: 220
体力: 284
威望: 0
当前: 湖北武汉
离线: 11 天

专长 前端制作

12^# 大中小发表于 2009-12-9 19:26

回复 11# ycg520520 的帖子

考虑SEO，你这样写不太符合语义啊。。。

路漫漫长，一步一步扎实的走！

TOP

rao3324180

梦幻编织者

银牌会员

认证
帖子: 647
体力: 1085
威望: 0
当前: 广东梅州
离线: 1 天

专长 前端制作,JS,网管

13^# 大中小发表于 2009-12-10 00:15

如果DIV内区域不加任何东西.第二种比较语义化.
在IE6下. 给A加了height:1em;以便触发A全局效果.

<!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>
#nav{width:250px; font-family:Arial, Helvetica, sans-serif; margin:0; padding:0; list-style-type:none;}
#nav li{ border-bottom:1px solid #FFF;}
#nav li a{ display:block; padding:5px 5px 5px 20px; text-decoration:none; border-left:20px solid #0000FF; border-right:1px solid #0000FF;height:1em;}
#nav li a:link ,#nav li a:visited{
	background-color:#666666;
	color:#FFFFFF;
}
#nav li a:hover{ background-color:#000000; color:#FFFFFF;}
</style>
</head>
<body>
<ul id="nav">
   <li><a href="#">我的主页</a></li>
   <li><a href="#">竹叶青青</a></li>
   <li><a href="#">CSS学习心得</a></li>
   <li><a href="#">青青在学习CSS</a></li>
   <li><a href="#">WEB标准系列页</a></li>
   <li><a href="#">前端制作</a></li>
   <li><a href="#">我的博客</a></li>
</ul>
</body>
</html>

提示：您可以先修改部分代码再运行

TOP

taoqun [楼主]

竹叶青青

中级会员

认证
帖子: 220
体力: 284
威望: 0
当前: 湖北武汉
离线: 11 天

专长 前端制作

14^# 大中小发表于 2009-12-10 08:47

回复 13# rao3324180 的帖子

嗯，这是一个典型的IE6的bug问题给a元素定义某些特定的属性，触发A的haslayout属性。。。我试了，设置height也可以解决问题的关键。。。

路漫漫长，一步一步扎实的走！

TOP