谁有没有写的比较标准好的CSS样式 ,发上来大伙看看 学习学习

因为要兼容不同的浏览器，所以sina tom apple adobe等大型网站都没有通过W3C的测试


其中错误最少的是tom网站的，你可以参看一下任何一家门户网站，即便是没有通过W3C，也有他们的可取之处。（小型网站是很容易通过W3C的）
http://jigsaw.w3.org/css-validat ... ng=1&lang=zh-cn

现在要保证标准和兼容是很难的。建议去w3的网站看看，这个地方很多地方也是不错的。

@charset "utf-8";
*{ margin:0 ; padding:0}
body{ font:12px Arial, Helvetica, sans-serif "宋体"; color:#000000; background:#FFFFFF; line-height:20px}
input,select{ font-size:12px}
ul,li{ list-style:none}
img{ border:0}
button{ font-size:12px}
a{ color:#000000; text-decoration:none}
a:hover{ color:#9a0000; text-decoration:underline}
h1,h2,h3,h4,h5{ font-size:14px}
em{ font-style:normal}
.fright{ float:right}
.tcenter{ text-align:center}
.ove{ overflow:hidden; zoom:1}
.block{ display:block}
.clear{ clear:both}
.clr{ clear:both; height:0px; overflow:hidden; font-size:0}
.clr10{ height:10px; font-size:0; overflow:hidden; clear:both}

/*head*/
#head{ width:950px; margin:0 auto; height:75px; overflow:hidden; position:relative; background:#9a0000}
#logo{ float:left}
#help{ float:right; color:#fff; font-weight:bold; margin-top:10px}
#help a{ color:#edd584; margin:10px; font-size:14px}
#yahoo{ position:absolute; bottom:10px; right:0}
#nav1{ width:410px; height:25px;position:absolute; bottom:0!important; bottom:-1px; z-index:1;background:#500101;filter:alpha(opacity=50);opacity:0.5; left:120px }
#nav{position:absolute; bottom:0!important; bottom:-1px; left:120px; height:25px; line-height:25px ; z-index:2 }
#nav ul li{ float:left;}
#nav ul li a{ font-size:14px; font-weight:bold; color:#FFFFFF; display:block; padding:0 10px; }
#nav ul li a:hover{ background-color:#2b0000; color:#fff}
#nav ul li.last{ background:none }
#gun{ height:20px; background-color:#dddddd; border-bottom:1px #c2c2c2 solid; width:950px; margin:0 auto}
.fun{ position:absolute; bottom:10px; right:310px; z-index:3}
/*body*/
#container{ width:950px; margin:0 auto; background:#f2f2f4; }
.search{ padding:0 20px; width:910px; margin:0 auto}
.name{ float:left;  }
.name h1{font-family: "黑体";  height:40px; line-height:40px; font-weight:normal; display:inline}
.name h1 a:link,.name h1 a:visited{color:#ffcc01;font-size:30px}
.name h1 a:hover{color:#ffcc01;font-size:30px}
.name span a{ color:#9a9a9b}

.name strong,.name strong a{ color:#69a2d2}
.sou{ float:right;}
.sou em{ font-style:normal; padding-left:70px; color:#798180}
.sou em span{ margin-left:7px}
.sou strong{ font-size:14px}
.sou ul li{ float:left}
.sou ul li input{  margin-left:10px}

.sideleft{ width:630px; border:1px #d5d5d5 solid; float:left; padding:10px;  background:#FFFFFF}
.sideleft h1{ }
.sideleft h1 a.yellow:link,.sideleft h1 a.yellow:visited{ color:#fe6c0b}
.sideleft h1.h1{ color:#000;}
.sideleft h1 span{ color:#c5c5c5; font-size:12px; font-weight:normal}
.sideleft h1 span a{color:#fe6c0b}
.main{ overflow:hidden}
.main_l{ float:left; width:300px}
.hot{}
.hot strong,.main_c strong,.strong{ display:block; text-align:center; float:left; }
.hot strong a,.main_c strong a,.strong a{ display:block; padding:5px;color:#c80205; line-height:10px; border:1px #e2e2e2 solid}
.hot strong a:hover,.main_c strong a:hover,.strong a:hover{ background:#c80205; color:#FFFFFF; text-decoration:none}
.hot strong span{ color:#414141}
.hot strong a:hover span{ color:#FFFFFF}
.hot dl{ float:left; width:200px; margin-left:5px}
.hot dl h2 a{ font-size:14px; color:#3463fc}
.hot dl dt a{ color:#7d7ad2}
.hot dl dd img{ margin-right:5px}
.hot dl dd a{color:#3463fc}
.main_r,.area_r{ float:right; width:300px}
.main_c{ clear:both; height:50px; overflow:hidden}
.main_c dl{ float:left; line-height:18px; margin-left:20px}
.main_c dt a,.area_r ul dl dt a{ font-size:12px; font-weight:bold; color:#3463fc}
.main_c dl dd,.area_r ul dl dd{ width:210px; overflow:hidden}
.cblue:link,.cblue:visited{ color:#9ca5dc}
.area{ border-top:1px solid #d2d5de; padding-top:10px}
.area_l{ width:280px; float:left}
.area h1 a{  color:#fe6c0b; height:30px; line-height:30px;}
.area_r h2 a{ float:left;  color:#fcbc02}
.area_r ul{ border-left:1px #f9f6c9 solid; float:left;padding-left:20px}
.area_r ul dl{ height:50px}

.main_f{ width:190px; float:left; margin-right:20px}
.main_f0{ margin-right:0}
.main_f h2{ text-align:center; background:#9a0000; overflow:hidden;  font-size:12px}
.main_f h2 a{color:#fff}
.main_f h2 a:hover{ color:#FFFFFF}
.main_f ul li{clear:both; line-height:30px; padding-top:5px }
.main_f ul li p{ float:left; width:120px; margin-left:10px; line-height:20px}

.sideright{ width:280px; float:right; overflow:hidden}
.time{ padding:30px 0 10px 0; border-bottom:1px #c4c5e4 solid}
.time p{ float:left}
.time ul{ float:left; margin-left:10px}
.time ul li a{ color:#395fc0; font-weight:bold}
.newsphoto{}
.newsphoto h1{ color:#fbc726}

/*foot*/
#foot{ border-top:1px #cccad8 solid; width:950px; margin:0 auto;  text-align:center; line-height:30px}


.gusetlist{ width:950px; margin:0 auto; font-size:14px; line-height:35px}
.gusetlist h1{ font-size:16px}
.gusetlist h1 span{ color:#FF0000; font-size:20px}
.gusetlist table tr{ background:#f0f0f0}
.gusetlist table th{ background:#cacaca}
.gusetlist table td{ padding-left:20px}
.gusetlist table td input{  border:1px #999999  solid; height:20px; width:200px}
.gusetlist p{}
.gusetlist p button{ float:right; width:100px; height:30px; line-height:30px; background:#999999; color:#FFFFFF}

楼上的还不错，不过有很多细节没注意好，代码还不够简练。。。。个人看法。

列举一二：

十六位颜色值，有的简写，有的没简。
color:#000000; background:#FFFFFF，.main_f h2 a{color:#fff}

定义了全局的em为正常字体，下面的派生就可以不定义了,继承要尽量利用

当定义了position:relative，没定义left,top是没意义的。或许您想为了兼容，但其实有更简方法。

input,select{ font-size:12px}
button{ font-size:12px}
这些都可以写在一起。

.fright{ float:right}
.sou{ float:right;}
这些用一个就行了。同时既然设了一置通用的样式，此后除非整块都需要达到某种效果，一般就不必再定义相同的。
比如.main_r,.area_r{ float:right; width:300px}
可以.main_r{width:300px}
在htm中这样 <div class="main_r fright">
而用到.area_r的地方，同样这句就行了。

.name h1 a:link,.name h1 a:visited{color:#ffcc01;font-size:30px}
这样写在IE6下是有问题的。可以测试下。

。。。。。不举了。。一眼看下还是比较多有小问题的地方和重定义的内容。
有怪莫怪。一向直言。。。。

强人
牛人
敬礼

要講標準的話，四樓的代碼起碼有一半不符合規範。

用不著不高興，要講標準，我就用標準的規範來審視你的代碼。

谢谢

body{margin: 0 auto;padding: 0;color: #666666;font:12px Verdana,宋体;width:100%;}
img,a img{border:0; margin:0; padding:0;}
h1,h2,h3,h4,h5,h6 {margin:0; padding:0;font-weight:normal;}
ul,li{margin:0px;padding:0px;list-style-type: none;}
.clear{clear:both;}
a {text-decoration:none;}

#top,#head,#main,#foot{width:970px;margin-left:auto;margin-right:auto;clear:both;}

#top{height:34px; background:url(../images/topBg.jpg) repeat-x left top;}
#topNav{float:right;margin-top:10px;}
#topNav li{float:left;width:80px;overflow:hidden; line-height:32px;font:10px Verdana, Arial, Helvetica, sans-serif; text-align:center; border-right:1px double #CCCCCC;}
#topNav li a{color:#999999;}
#topNav li a:hover{color:#752d76;}
#topNav li.bgEnd{ border:none;}

#head{height:96px;}
#logo{width:225px;height:96px;float:left; background:url(../images/logo.jpg) no-repeat left top;}
#mainNav{height:38px;width:720px;float:right;margin-right:4px; border-bottom:1px double #993399; border-top:1px double #993399;}

#mainNav a {display: block; width: 120px; text-align:center;}
#mainNav a:link {color:#333;}
#mainNav a:visited {color:#333;}
#mainNav a:hover  {color:#333;font-weight:bold;}

#mainNav li {float: left; width: 120px;line-height:38px;}
#mainNav li a:hover{}
#mainNav li ul {line-height: 24px;height:24px;  list-style-type: none;text-align:left;left: -999em; width: 980px; position: absolute; float:left;}
#mainNav li ul li{float: left; width: 80px;background: #f4e2f4;line-height: 24px;height:24px; }
#mainNav li ul a{display: block; width: 80px;text-align:center;line-height: 24px;height:24px; }

#mainNav li ul a:link{color:#666;}
#mainNav li ul a:visited{color:#666;}
#mainNav li ul a:hover{color:#F3F3F3;font-weight:normal;background:#881b83;}

#mainNav li:hover ul {left:auto;}
#mainNav li.sfhover ul {left:auto;}
#content{clear:left;}

/* main */
#mainLeft{float:left;width:624px;}
#mainRight{float:right;width:346px;}
.mainLeft624{width:624px;height:500px;}

#foot{height:60px; background:url(../images/topBg.jpg) no-repeat left top;}


#mainNavBottom{height:31px; background:url(../images/mainNavBottomBg.jpg) repeat-x left;}
#location{float:left;width:300px;margin-left:160px; line-height:28px;}
#location a{color:#666666;}
#location a:hover{ color:#333333; text-decoration:underline;}

请高手给指点一下，看看哪里写的不规范

http://jigsaw.w3.org/css-validator/#validate_by_input

谢谢楼上的，看到了，都是body里面的问题。
我列出来给大家看看吧！
1、font:12px Verdana,宋体;
应改为  font-size:12px; font-family:Verdana;

2、width:100%; 去掉

这样就没错了！

引用:

原帖由 wbleon 于 2008-6-10 12:09 发表
谢谢楼上的，看到了，都是body里面的问题。
我列出来给大家看看吧！
1、font:12px Verdana,宋体;
应改为  font-size:12px; font-family:Verdana;

2、width:100%; 去掉

这样就没错了！

No!是因为你的宋体没加双引号

我楼上这位兄台代码有点。。。。
再次直言了。同样列举一二吧：

引用:

img,a img{border:0; margin:0; padding:0;}

定义了img{border:0; margin:0; padding:0;}
则全局都是这样了。不用再额外定义a中包含的。

当数值为0时，可以忽略单位。比如0px可以写成0
颜色值的简写就不说了。个人习惯问题而已

引用:

#topNav li{font:10px Verdana, Arial, Helvetica, sans-serif; }

不就是为了定义成10px吗？写成font-size:10px;就行了。你上面已字义了字体

引用:

margin-left:auto;margin-right:auto;

这句嘛。。。暂不想评论，简写和下面的#top不会有冲突的其实。
这和当要定义三条边时，不必

引用:

border-left:1px sold #000;
border-right:1px sold #000;
border-bottom:1px sold #000;

而可以简写成：

引用:

border:1px sold #000;border-top:none;

一样。

引用:

background:url(../images/topBg.jpg) repeat-x left top;}

如果我没搞错的话，left top可以不用写,（topBg.jpg有点怪怪的，不过没有错。）

引用:

#logo{width:225px;height:96px;float:left; background:url(../images/logo.jpg) no-repeat left top;}

这句不是错对问题，而是。。。呵呵，反正我觉得logo作为img显示比起作为背景好些，无论是否裸跑，都得看到我的logo.

引用:

#mainNav li ul {line-height: 24px;height:24px;  list-style-type: none;text-align:left;left: -999em; width: 980px; position: absolute; float:left;}
#mainNav li ul li{float: left; width: 80px;background: #f4e2f4;line-height: 24px;height:24px; }
#mainNav li ul a{display: block; width: 80px;text-align:center;line-height: 24px;height:24px; }

#mainNav li ul a:link{color:#666;}
#mainNav li ul a:visited{color:#666;}
#mainNav li ul a:hover{color:#F3F3F3;font-weight:normal;background:#881b83;}

#mainNav li:hover ul {left:auto;}
#mainNav li.sfhover ul {left:auto;}
#content{clear:left;}

看得我迷迷糊糊的，这段让高手来说吧。
我不想议论什么，反正我是拒绝这段代码。

在下很粗心的，所以看代码不会想太仔细。。。以上说错就当我们是在探讨吧

我写得多多学习共同进步
@charset "utf-8";
/* 默认样式 */
body{margin:0;font: normal 12px "Lucida Grande",Tahoma,Verdana,Lucida,Arial,Helvetica,sans-serif;}
img{ border:0px;}
p,em,span,form,select,input,option,ul,li,dd,dt,dl,h1,h2,h3,h4,h5,h6{ margin:0; padding:0;}
ul li{list-style-type: none;}
.clear{ clear:both;}
.hidden{display: none;}
.pointer{cursorointer}
/*链接样式*/
a{text-decoration: none;cursorointer; }
a:link,a:visited {text-decoration: none;cursorointer; color:#0066CC;}
a:hover { text-decoration:underline;cursor:pointer;}
/*边框颜色*/
.b{ border:1px solid #95C6E4;}
/*框架样式*/
#all{ width:950px; margin:0 auto; display:table;font-size:9pt; color:#0066CC;}
.header{ display:block}
.main{ display:block;}
.footer{ display:block}
/*头部样式*/
.header .top_{ height:25px; background:#1B6892;}
.header .sub_{ line-height:25px; padding-left:25px; color:#C5E7F1; width:200px;}
.header .title_{ height:81px; background:url(../images/logo_gb.gif) repeat-x; overflow:hidden; clear:both}
.header .logo{ width:109px; float:left; margin:20px 0 0 40px; display:inline}
.header .themes{ width:480px; float:left; margin:10px 0 0 30px; display:inline}
.header ._right{ width:205px;  float:left; margin:6px 0 0 50px; display:inline}
.header ._right a{ background:url(../images/icp.gif) no-repeat; width:65px; height:58px; float:left}
.header ._right a.a1,.header .blog_right a.a1:visited{ background-position:-7px 0}
.header ._right a.a1:hover{ background-position:-7px -60px;}
.header ._right a.a2,.header .blog_right a.a2:visited{ background-position:-85px 0}
.header ._right a.a2:hover{ background-position:-85px -60px;}
.header ._right a.a3,.header .blog_right a.a3:visited{ background-position:-160px 0}
.header ._right a.a3:hover{ background-position:-160px -60px;}
.header .menu{ height:43px; background:url(../images/menu_bg.gif) repeat-x;}
.header .menu ul{ margin-left:25px; }
.header .menu li{ float:left; display:block;  height:43px; cursor:pointer}
.header .menu li a,.header .menu li a:visited{padding:11px 15px 10px 15px; font-size:9pt; font-weight:bold; color:#017BC4; display:block;}
.header .menu li a:hover{ background:url(../images/hover.gif) repeat-x; color:#fff; font-weight:bold;font-size:9pt; text-decoration:none; display:block}
.header .menu li a.h{ background:url(../images/hover.gif) repeat-x; color:#fff; font-weight:bold;font-size:9pt; text-decoration:none; display:block}
/*主体样式*/
.main{ border-top:1px solid #95C6E4; background:url(../images/main_bg.gif) repeat-x; margin-top:5px;}
.main .left{ width:230px; float:left;}
.main .center{ width:470px;float:left; margin-left:10px; display:inline;}
.main .right{ float:right; width:230px;}

ul.list{ height:28px; border-left:1px solid #95C6E4;}
ul.list li.msg_1{font-size:9pt; color:#0077C0; font-weight:bold; height:26px; line-height:28px; text-indent:2.5em; background:url(../images/pic_msg1.gif) no-repeat 10px center;}
ul.sidebar li{ background:url(../images/line.gif) repeat-x bottom; padding:5px 0;width:225px; white-space:nowrap; overflow:hidden;}
ul.sidebar li a{background:url(../images/bi.gif) no-repeat 10px center; padding-left:24px}

ul.list_r{ height:28px; border-right:1px solid #95C6E4;}
ul.list_r li.msg_1{font-size:9pt; color:#0077C0; font-weight:bold; height:26px; line-height:28px; text-indent:2.5em; background:url(../images/msgr.gif) no-repeat 10px center;}

.left ul.search{ margin-top:10px; padding-bottom:8px;}/*高度以后要去掉*/
.left ul.search li.tab{ background:url(../images/tab.gif) no-repeat 10px center #D9F4F9; text-indent:2.5em; line-height:25px; border-bottom:1px solid #95C6E4;}
.left ul.search li.tab_li,.left ul.search li.tab_t{ margin:8px 5px}
.left ul.search li.tab_li input{ background:url(../images/input_bg.gif) repeat-x; width:160px; padding:2px; border:1px solid #ccc;}
.left ul.search li.tab_t select{ width:80px; background:#ccc}
.left ul.search li.tab_t input{ background:url(../images/search.gif) no-repeat; width:68px; height:22px; border:none; cursor:pointer; margin-left:10px}

ul.hot{ margin-top:10px;}
ul.hot .title{ height:27px; background:url(../images/at.gif) repeat-x;}
ul.hot h4{background:url(../images/ho.gif) no-repeat 10px center; text-indent:2.5em; line-height:29px; height:25px; font-size:9pt;color:#0077C0; }
ul.hot li{ background:url(../images/line.gif) repeat-x bottom;  line-height:25px; width:225px; white-space:nowrap; overflow:hidden;}
ul.hot li a{background:url(../images/bi.gif) no-repeat 10px center; padding-left:25px}

.left ul.guild{ padding:5px; margin-top:10px}
.left ul.guild a{ margin-right:10px;}

.hidden{display:none;}
.center .from_pic{ width:470px; margin-top:28px;}
ul.scrollUl{height:27px; background:url(../images/menu_bg2.gif) repeat-x 0 bottom;}
ul.scrollUl li{ float:left; cursor:pointer; width:95px;  margin-right:2px; overflow:hidden; position:relative; top:0.1em; padding:5px 0 3px 10px;}
*html ul.scrollUl li{padding-bottom:4px} /*IE6*/
.sorc{ background:#F6FBFF;}
.sd1{ background:url(../images/top.gif) repeat-x; border-top:1px solid #95C6E4; border-right:1px solid #95C6E4;border-left:1px solid #95C6E4;font-weight:bold; border-bottom:1px solid #F6FBFF; }
.sd{background:url(../images/bottom.gif) repeat-x; border-top:1px solid #95C6E4; border-right:1px solid #95C6E4;border-bottom:1px solid #95C6E4;border-left:1px solid #95C6E4;font-weight:bold;}
.sd1 img,.sd img{ padding-right:6px;}

#cont_1 ul{ margin:10px 0; padding:0 10px;}
#cont_1 ul li{background:url(../images/b_i.gif) no-repeat 0 center;  display:block;padding: 7px 0 7px 0;}
#cont_1 ul li a{background:url(../images/line.gif) repeat-x bottom; padding-left:20px;display:block;}
#cont_1 ul li a:hover{color:#000066; text-decoration:none;}
#cont_1 ul li span{ float:right;}

#cont_2 ul{ margin:10px 0; padding:0 10px;}
#cont_2 ul li{background:url(../images/b_i.gif) no-repeat 0 center;  display:block;padding: 7px 0 7px 0;}
#cont_2 ul li a{background:url(../images/line.gif) repeat-x bottom; padding-left:20px;display:block;}
#cont_2 ul li a:hover{color:#000066; text-decoration:none;}
#cont_2 ul li span{ float:right;}

.sid_1{ margin-top:10px;}
.bo_title{ background:url(../images/hot.gif) repeat-x; height:25px; line-height:25px; padding-left:5px;font-size:9pt;color:#0077C0;}
.bo_title h4.los{ background:url(../images/sid.gif) no-repeat 0 center; height:25px; line-height:25px; font-size:9pt;color:#0077C0; padding-left:20px}
.sid_1 ul{ padding:0 10px; margin:5px 0;}
.sid_1 ul li{background:url(../images/bi.gif) no-repeat 0 center;}
.sid_1 ul li a{line-height:25px; height:25px; background:url(../images/line.gif) repeat-x bottom; display:block;  text-indent:1.7em;}

/*页脚样式*/
.footer{ margin-top:10px; margin-bottom:20px; clear:both}
.link{ background:url(../images/line_bg.gif) repeat-x; height:65px; padding:0 5px;}
.link .tit_line{ font-size:9pt; font-weight:bold; text-indent:1em; line-height:25px;}
.link a{ padding:5px;}
.copyright{ margin-top:10px; height:60px; background:#1b6892; text-align:center; padding-top:10px; color:#C5E7F1}
.copyright a,.copyright a:visited{ padding:5px; line-height:28px;color:#C5E7F1}

[ 本帖最后由 ixiaoyu 于 2008-6-10 15:36 编辑 ]

如果大家都把上面的CSS用到DIV，做个实例的话，会更加吸引的哦

大家对css的规范讨论挺多的啊。我也不敢说我写的就规范。。。

说到推荐几个的话。CZG应该是不错的地方。里面有很多样式是来自不同的人之手。而且大部分是比较有造诣的。比如： Eric Stoltz 。

所以，楼主可以去看看他们写的css，应该能够学习到东西，或者连同CZG的XHTML结构一起看看，我觉得他们的结构很不错。