先给大家看一下我是怎么写CSS的：

=============================

/* 全局控制 */
*{ margin:0; padding:0; border:0;}
body{ font-size:12px; font-family:"宋体"; background:url(/image/topbg.gif) top repeat-x #404040;}
/*a {behavior:url(/image/noline.htc)} */
a:link,a:visited,a:active{ color:#000; text-decoration:none; font-size:12px;}
a:hover{ color:#50AC23; text-decoration:underline;font-size:12px;}
li { list-style:none;}

/* 布局 - 总框 */
#hezewangzhan { width:900px; margin:auto;}

/* 布局 - 头部 */
#head {background:url(/image/top.jpg); height:112px;}
 #qhcss { height:20px; text-align:right; line-height:20px; color:#F3E989;padding:10px 10px 0 0}
  .qhcss_1{ background:#000; margin-left:10px;}
  .qhcss_1:link,.qhcss_1:visited,.qhcss_1:active{ color:#000; border:1px solid #fff; font-size:10px;}
  .qhcss_1:hover{text-decoration:none; color:#333; border:1px solid #fff; font-size:10px; }
  .qhcss_2{ background:#33CC00; margin-left:10px;}
  .qhcss_2:link,.qhcss_2:visited,.qhcss_2:active{ color:#33CC00; border:1px solid #fff; font-size:10px;}
  .qhcss_2:hover{text-decoration:none; color:#33CC00; border:1px solid #fff; font-size:10px;}

  #logo{ padding:25px 20px  0 60px; }
  #logo h1{ font-size:12px; color:#fff; font-weight:100;text-align:right;}
 
 #nav{ padding-top:8px;}
  #nav ul { padding:0 15px 0 21px; overflow:hidden; height:30px;}
  #nav li{ float:left; padding:0 12px; text-align:center; background:url(/image/menu_do.gif) no-repeat right; cursor:pointer; height:35px; line-height:35px;}
  #nav li a {color:#fff; font-size:14px; text-decoration:none;}
 
 #head_line { background:url(/image/tline.gif); height:4px; font-size:0; line-height:0;clear:both;}

/* 布局 - 中间 */

#main { width:900px;background:#fff; overflow:hidden; clear:both;}
 /* 布局 - 中间 - 左 */
 #main_left{ width:560px; float:left;padding:10px 5px 0px 12px;}
  .m_l_t{ font-size:0; background:url(/image/m_l_t.gif); height:9px;}
  .m_l_bg{ background:url(/image/m_l_bg.gif);}
  .m_l_f{ font-size:0; background:url(/image/m_l_f.gif); height:9px; margin-bottom:10px;}
  
  /* 布局 - 中间 - 作品展示 */
  #zuopin { padding:0 10px; overflow:hidden; height:178px; }
   #zuopin_left{float:left; width:270px; border:1px solid #CCC; background:#fff; padding:3px;}
    #zuopin_pic {height:168px; overflow:hidden;}
     #zuopin_pic img{ width:270px;}
   #zuopin_right{ float:left; width:250px; padding:0 0 0 10px;}
    #zuopin_title{ height:25px;}
     #zuopin_title a{ color:#50AC23; font-size:14px; font-weight:bold;}
    #zuopin_info{ color:#999; line-height:20px;}
     #zuopin_info span{ color:#f50;}
     #zuopin_info a{ color:#f50;}
    #zuopin_about {line-height:20px;color:#999;}
    #zuopin_more{ border-top:1px dotted #999; margin-top:5px; padding-top:10px; text-align:right;}
     #zuopin_more a{color:#50AC23;}
  /* 布局 - 中间 - 选项卡 */
  .navtab { height:27px;}
  .navtab li { float:left; width:83px; height:27px; line-height:27px; background:url(/image/dh_bg.gif); cursor:pointer; margin:0 3px 0 0; text-align:center; color:#000; }
  .navtab .active{background:url(/image/dh_bg_hover.gif);font-weight:bold;color:#fff;}
   .navtab .active a { color:#fff; text-decoration:none;}
  .navContent { clear:both; width:544px;border:1px solid #ccc; padding:7px;}
  /* 布局 - 中间 - 广告 */
  .ad{ margin-bottom:10px; clear:both; width:560px; height:80px; background:url(/image/ad_2.gif);}
  .gehang { font-size:0; height:10px; width:10px; clear:both;}
  /* 布局 - 中间 - 选项卡 - 新闻 */
  .news{}
   .news_nr{ overflow:hidden;}
    .news_pic { float:left; width:120px; text-align:center; line-height:20px; height:170px; display:block;}
     .news_pic img { width:110px; height:138px; padding:3px; border:1px solid #ccc;}
    .news_list { float:right; padding:0 0 0 10px;display:block; width:405px; height:170px; overflow:hidden;}
     .news_list li { float:left; width:202px; height:22px; color:#f60;}
  
 /* 布局 - 中间 - 右 */
 #main_right{ width:300px; float:left; padding:10px 10px; height:200px;}
  .m_r_t{ font-size:0; background:url(/image/m_r_t.gif); height:6px; margin-top:10px;}
  .m_r_bg{ background:url(/image/m_r_bg.gif); overflow:hidden; display:block;}
  .m_r_f{ font-size:0; background:url(/image/m_r_f.gif); height:6px; clear:both; line-height:0}
  /* 布局 - 中间 - 右 - 公告 */
  #gonggao_bt{ font-size:14px; color:#666; font-weight:bold; padding:5px 0 0 20px;}
  #gonggao_list { background:url(/image/123456789.gif) no-repeat; width:280px; margin:auto;}
   #gonggao_list ul { padding:1px 0 0 40px;}
   #gonggao_list ul li { height:23px; line-height:23px;}
   #gonggao_list li span { color:#999; float:right; margin-top:-23px;}
  #lianxi { padding:0 0 0 20px; line-height:24px; color:#388104}
  #anli {padding:5px 0 0 10px; overflow:hidden; height:260px;}
   #anli li { float:left; text-align:center; line-height:24px;}
   #anli img{ width:130px; height:100px; padding:3px; border:1px solid #ccc; margin-right:5px; background:#fff;}
  #zongzhi{ height:72px; text-align:center; color:#f00; line-height:24px; padding-top:5px;}

/* 布局 - 友情链接 */

#link_wk {background:#fff; padding:0 12px 10px 12px; height:70px; overflow:hidden;}
 #link_wk h5{ display:block; border:1px solid #ccc; width:18px; padding:3px; text-align:center; float:left; height:64px;
 color:#FF8D00; font-size:14px; font-weight:bold;}
 #link { float:left; width:843px; height:64px; border:1px solid #ccc; border-left:none; padding:3px;}
  #link ul li { float:left; width:105px; height:21px; line-height:21px; text-align:center;}
  
  #link ul li a:link,#link ul li a:visited,#link ul li a:active{color:#999;}
  #link ul li a:hover{color:#f60; text-decoration:none; border-bottom:1px dashed #f60;}

/* 布局 - 版权 */

#foot_wk{ background:#fff; clear:both;}
#foot{ border-top:1px solid #ccc; width:876px; margin:auto; line-height:24px; padding:10px 0 ; text-align:center; height:80px;}

/* 布局 - 循环栏目页面 */
.xxxx{ padding:1px;border:1px solid #B8CDE3; margin-bottom:10px;}
.class_list{background:#B8CDE3; width:535px; height:24px;}
 .class_list_title{ float:left; width:460px;}
  .class_list_title a:link,.class_list_title a:visited,.class_list_title a:active{font-size:14px; color:#003770; line-height:24px; padding:0 0 0 15px; font-weight:bold;}
  .class_list_title a:hover{font-size:14px; color:#f60; line-height:24px; padding:0 0 0 15px; font-weight:bold;}
 .class_list_more{ float:right; width:40px; padding:5px 0 0 0}
.class_list_list{ clear:both;}
 .class_list_list ul { padding:4px;}
  .class_list_list ul li { line-height:24px; color:#f60;}
  .class_list_list ul li span{ margin-top:-24px; float:right;}
  .class_list_list a:link,.class_list_list a:visited,.class_list_list a:active{font-size:14px;}
  .class_list_list a:hover{font-size:14px; }

/* 布局 - 终极分页 */

#where { border:1px solid #D4E2E3; background:#EEF3F6; height:24px; line-height:24px; padding: 0 10px;}
#fenye{border:1px solid #D4E2E3; background:#EEF3F6; padding:10px 10px 0 10px;}
 .news_title { height:20px;}
  .news_title a:link,.news_title a:visited,.news_title a:active{ color:#50AC23;font-size:14px; font-weight:bold;}
  .news_title a:hover{ color:#f90;font-size:14px; font-weight:bold;}
  .news_title span { float:right; margin-top:-16px; color:#999;}
 .news_info { text-indent:2em; line-height:20px; color:#666;}
 .news_link { height:20px; line-height:20px; border-bottom:1px dashed #dddddd; margin-bottom:10px;}

.plist a:link{display:inline;border:1px solid #D9D9D9;color:#001A9F;padding:2px 5px;margin:0px 3px;}
.plist a:visited{display:inline;border:1px solid #D9D9D9;color:#001A9F;padding:2px 5px;margin:0px 3px;}
.plist a:hover{display:inline;border:1px solid #8BCCEC;color:#000000;background:#E8F3FD;padding:2px 5px;margin:0px 3px;}
.plist .click{display:inline;border:1px solid #ff831e;color:#000000;background:#ffebd9;padding:2px 5px;margin:0px 3px;}

/* 布局 - 文章阅读页面 */

#article_title,#article_title h2{ font-size:18px; text-align:center; color:#f50; font-weight:bold; height:30px;}
#article_title_dy,#article_title_dy h2{font-size:18px;  color:#f50; font-weight:bold; height:20px;border-bottom:1px dashed #B8CDE3;}
#article_date{ height:24px; line-height:24px;text-align:center; border-top:1px dashed #dddddd;}
#article_info{ text-indent:2em; line-height:20px; padding:5px; border:1px dashed #B8CDE3; background:#F8FBFC; color:#0456A0}
#article_nr { font-size:14px; line-height:200%; color:#222;text-indent:2em; width:538px; overflow:hidden;}
 #article_nr p { padding:5px 0;}
 #article_nr img {width: expression(this.width > 510 ? 510: true); max-width: 510px;}
 #article_nr a:link,#article_nr a:visited,#article_nr a:active{color:#f60; font-size:14px;}
 #article_nr a:hover{color:#50AC23;font-size:14px;}
 #article_nr h1,#article_nr h2,#article_nr h3,#article_nr h4,#article_nr h5 { color:red; padding:5px 0;}
#article_foot { text-align:center;}
#article_next{ line-height:24px;}
#article_link{border:1px solid #B8CDE3; padding:1px;}
 #article_link_title{ background:#B8CDE3; height:24px; font-size:14px; color:#003770; line-height:24px; padding:0 0 0 15px; font-weight:bold;}
 #article_link_list{height:100px; padding:5px; color:#f60;}
  #article_link_list li{ float:left; width:260px; height:20px; line-height:20px;}
  #article_link_list li span { float:right; margin:-20px 10px 0 0;}

/* 布局 - 作品分页页面 */

.zuopin{ border-bottom:1px dashed #ccc; overflow:hidden; height:108px; width:538px; margin-bottom:10px;}
 .zuopin_pic { width:140px; float:left}
  .zuopin_pic img { width:120px; height:90px; padding:3px; background:#fff; border:1px solid #ccc;}
 .zuopin_right { width:390px; float:left;}
  .zuopin_title { height:24px;}
   .zuopin_title a:link,.zuopin_title a:visited,.zuopin_title a:active{color:#50AC23;font-size:14px;font-weight:bold;}
   .zuopin_title a:hover{color:#f60;font-size:14px; font-weight:bold;}
  .zuopin_info { height:20px; color:#666;}
   .zuopin_info span { color:#f60;}
  .zuopin_about { line-height:20px; text-indent:2em; color:#666;}
  .zuopin_link { text-align:right;}
   .zuopin_link a:link,.zuopin_link a:visited,.zuopin_link a:active{color:#f60;font-weight:bold;}
   .zuopin_link a:hover{color:#50AC23; font-weight:bold;}

/* 布局 - 作品展示页面 */

.zuopin_z_title { width:100px; height:26px; line-height:26px; border:1px solid #B6D6DE; text-align:center;
     font-size:14px; font-weight:bold; color:#50AC25; background:#F8FBFC;}
.zuopin_z_nr { line-height:30px; text-indent:1em;}
.zuopin_z_info { line-height:22px; text-indent:2em; padding:5px 0;}
.zuopin_z_pic { font-size:0; color:#EEF3F6; text-align:center; line-height:0; padding:10px 0;}
.zuopin_z_more {font-size:14px; line-height:24px; font-size:14px; color:#222;text-indent:2em;}
 .zuopin_z_more p { padding:5px 0;}
 .zuopin_z_more img { width:0; height:0;}

===========================================

将以上代码复制到DMX或者EDITPLUS等文本编辑器以达到最佳阅读效果。 网页效果见 www.hezewangzhan.com

http://bbs.kesion.com/dispbbs.asp?BoardID=42&ID=53944&replyID=&skin=1

这个链接是新手入门CSS教程。希望本帖对学习CSS的朋友有一些帮助。

再发一个首页的布局。

/* CSS Document */

*{ margin:0; padding:0; border:0;}
body { background:#88BB9A; font-size:12px; font-family:"宋体";}
li{ list-style:none;}
a:link,a:visited,a:active{ color:#000; text-decoration:none; font-size:12px;}
a:hover{ color:red; text-decoration:underline;font-size:12px;}

#jqtjq { width:950px; margin:auto; overflow:hidden; background:#fffeef;}

/* 头部样式 */
#head { background:url(/image/top_flash.jpg) top no-repeat;height:320px; width:950px;}
 #flash { width:950px; height:270px; padding-top:10px;}
 #nav { height:40px; width:950px;}
  #nav ul { padding:17px 0 0 40px;}
  #nav ul li { float:left; width:96px; text-align:center; height:20px; background:url(/image/l-bb_66.gif) no-repeat;}
  #nav a:link,#nav a:visited,#nav a:active {color:#fffeef; font-weight:bold; font-size:14px;}
  #nav a:hover{color:#fff; font-weight:bold; font-size:14px;}

/* 内容总开关 */
#jqtjq_main { width:930px; padding:10px; overflow:hidden;}

 #jqtjq_mian_left { width:720px; float:left;}
 #jqtjq_mian_right { width:200px; padding:0 0 0 10px; float:left;}

/* 内容第一栏 */
#mian_a {width:720px; clear:both; overflow:hidden;}
 #hd_wk{ float:left; width:360px; height:280px; background:#000; background:url(/image/hd_bg.gif)}
  #hd{ width:331px; height:239px; margin:13px 0 0 13px;}
 #news {width:340px; float:left; margin-left:10px; background:url(/image/news_bg.jpg) bottom no-repeat;}
  .news_list{ overflow:hidden; border-bottom:1px dotted #51723A;}
   .news_list ul{ padding:6px 0 0;}
   .news_list ul li { height:21px;}
   .news_list ul li span { float:right; margin-top:-16px; color:#999;}
   .news_list a:link,.news_list a:visited,.news_list a:active{ color:#25341B;font-size:14px;}
   .news_list a:hover{ color:red;font-size:14px;}

/* 通栏广告 */

#tonglan { width:720px; clear:both; height:80px; background:red;}

.gehang { height:10px; width:10px; clear:both; font-size:0px; line-height:0px; background:#00FF00}

/* 名师介绍 */

#mingshi {width:720px; clear:both; overflow:hidden; height:220px;}
 #mingshi_title { width:58px; float:left;}
 #mingshi_nr{ width:321px; margin-left:8px; height:220px; float:left;}
  #mingshi_pic { float:left; width:132px; height:170px;}
   #mingshi_pic img { width:120px; height:162px; padding:3px; border:1px solid #ccc; background:#FFFEEF;}
  #mingshi_name{ float:left; width:185px; height:20px;}
   #mingshi_name h3 { color:#235C33; font-size:16px; font-weight:bold; text-align:center;}
  #mingshi_info { line-height:180%; text-indent:2em; color:#666;}
   #mingshi_info .xxx {font-size:0px; line-height:0px; display:block; width:100px; height:0px; color:#FFFEEF}
   #mingshi_info p { padding:3px 0;}
 #mingshi_zj { height:220px; width:1px; float:left; border-right:1px solid #C9CFA9;}

/* 四个栏目板块 */

#class {width:720px; clear:both; overflow:hidden;}

 #class_left { width:360px; float:left;}
 #class_right { width:359px; float:left;/* border-left:1px dotted #C9CFA9;*/}

#class_title{ padding:6px 0 6px 0;}
 #class_link{ width:359px; border-bottom:1px dotted #C9CFA9; overflow:hidden;}
  #class_list { width:210px; height:180px; float:left;}
  #class_pic { width:140px; float:left;}
   #class_pic li { text-align:center; line-height:21px;}
    #class_pic li img { padding:3px; border:1px solid #ccc;}
   #class_link a:link,#class_link a:visited,#class_link a:active{ color:#25341B;font-size:14px; line-height:22px;}
   #class_link a:hover{ color:red;font-size:14px;line-height:22px;}

/* 在线商城 */

#shop_home { background:url(/image/shop_bo.jpg); clear:both; width:700px; margin:auto; padding:10px;}
 #shop_n{border:1px solid #ccc; background:#fffeef; height:148px;}
  #shop_nn{ margin:4px;border:1px solid #ccc; background:#fffeef; height:128px; padding:5px;}
   #shop_left { width:42px; float:left; height:130px;}
   #shop_right{ width:627px; height:130px; padding-left:8px;float:left;}

/* 右侧样式 */

#gg{ margin-top:8px; height:180px;}
 .gg_name:link,.gg_name:visited,.gg_name:active{ font-size:14px; font-weight:bold; color:#f70;}
 .gg_name:hover { font-size:14px; font-weight:bold; color:#f30;}
  #gg table,#gg td{ width:190px; line-height:180%;}
#user_go{ height:160px;}

#gedi { height:150px;}

#mingjia_gd { height:300px; background:#000;}

#about_home { height:266px; background:url(/image/fq.gif) no-repeat bottom; overflow:hidden;}

/* 友情链接 */
#link{ background:url(/image/link_bg.jpg); height:101px; clear:both;}
 #link_title{ height:101px; background:url(/image/link_left.jpg) left no-repeat; padding:0 0 0 10px; float:left }
  #link_title h2{text-align:center; width:15px; font-size:14px; color:#000; font-weight:bold; line-height:20px; padding-top:10px;}
 #link_list{ width:880px; margin-left:5px; height:81px; background:url(/image/link_right.jpg) right no-repeat;float:left; padding:10px;}
 
/* 版权 */
#copyright { background:url(/image/shop_bo.jpg); height:80px; padding:15px; line-height:180%; text-align:center; clear:both }

第一：命名注意规则，每个人不同的习惯，你可以根据自己的来。

第二：注意条例，将一个区域的CSS按照从外到里，从上到下 这样的顺序来写。

第三：使用缩进 TAB键缩进，比空格好使。Q左边的键。

第四：使用注释。

第五：尽量使用缩写。这样的效果是一致的，但是大大减少了CSS的代码数量和增加了可阅读性。

PS：官方的CSS文件我不愿意看。。。呵呵。

大家可以去看看www.chinaz.com 网站的CSS，那写得真是棒。可以从中学习很多东西。建议去看看。另外新浪等门户的CSS太过复杂，不建议阅读。如果阅读的话使用火狐的某个插件。名字我忘记了，那个很棒~~可以查看。

学学先