寂寞部屋 » div http://www.bokelife.com 关注互联网，关注生活 Wed, 10 Mar 2010 09:03:21 +0000 en hourly 1 http://wordpress.org/?v=3.0 十四、复杂的列表布局示例 http://www.bokelife.com/post-428-428/ http://www.bokelife.com/post-428-428/#comments Wed, 21 Nov 2007 05:06:40 +0000 Johnny http://www.bokelife.com/?p=428 复杂的列表布局是我最为头痛的。往往在测试时会乱得不堪入目，而且不能兼容IE和FireFox。这个问题困扰了我几个晚上，今天终于搞定了。在IE和FireFox中测试几乎一模一样。
源码下载：

附件:复杂列表演示.zip

先看效果图：这是模仿闪客帝国的作品爬行榜。

image

实现代码：

XML/HTML代码
  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312″ />
  5. <title>步步为营，实战div+css系列教程–</title>
  6. </head>
  7. <style tpye=“text/css”>
  8. <!–
  9. a{color:#349DEF;text-decoration:none;}
  10. a:hover{color:#F1B246;text-decoration: underline}
  11. h2 a {color:#ff0000;}
  12. .t1 h1{color:#ff0000;}
  14. #paihang{width:220px;background-color:#EDF0F3;padding:10px 5px;}
  15. [xmlns] #paihang{height:300px;width:230px;} /*此处运用了css hack技术：对象前加[xmlns]只被非IE浏览器识别*/
  16. .tit_bg{position:relative;left:10px; background-repeat:no-repeat;float:left;}
  17. .tit_txt{float:left;padding-left:20px;font-size:15px;font-weight:bold;color:#5442C0;}
  18. .more{float:right;padding:1px;}
  20. #top10{float:left;margin:0px;padding:10px 5px 0px 5px;background-color:#fff;list-style-type:none;width:220px;}/*对于ul对象，一定要设定宽度*/
  21. #top10 .topimg{float:left;padding-left:2px;margin:0px;}/*此处类前不能加li,否则不正常，涉及到列表与div的关系*/
  22. #top10 h1,#top10 h3{font-size:12px;font-weight:normal;float:left;}
  23. #top10 h2{font-size:12px;}
  24. #top10 li.t1 h1{clear:right;width:126px;border-bottom:1px #33ccff dashed;margin:0px;padding:8px 5px 3px 5px;font-weight:bold;}
  25. #top10 li.t1 h2{float:left;display:block;margin:10px 5px;;font-weight:normal;width:90px;}
  26. #top10 li.t1 h3{float:left;display:block;color:#ff0000;clear:right;margin:10px 0px;padding-left:5px;border-left:2px solid #ff0000;}
  27. #top10 li.t2,#top10 li.t3,#top10 li.t4{float:left;border-top:1px dashed #349DEE;background-image:url(arrow_t1.gif);background-repeat:no-repeat;background-position:0px 65%; margin:0px 0px 0px 5px;line-height:22px;}
  28. #top10 li.t2 h1,#top10 li.t3 h1,#top10 li.t4 h1{float:left;color:#349DEF;clear:left;width:155px;padding-left:25px;margin:0px;}
  29. #top10 li.t2 h3,#top10 li.t3 h3,#top10 li.t4 h3{float:left;color:#349DEF;padding-left:5px;margin:0px 0px 0px 0px ;}
  30. –>
  31. </style>
  32. <body>
  33. <div id=“paihang”>
  35. <div class=“title”>
  36. <span class=“tit_bg”><img src=“tit_bg.gif” /></span>
  37. <span class=“tit_txt”>中国娱乐排行榜</span>
  38. <span class=“more”><img src=“tit_more.gif” alt=“浏览更多信息” longdesc=“#” /></span>
  39. </div>
  40. <div id=“top10″>
  41. <li class=“t1″>
  42. <div class=“topimg”><img src=“t1_img.gif” alt=“孙燕姿” longdesc=“#” /></div>
  43. <h1><a href=“#”>明天我就要嫁给你了</a></h1>
  44. <h2><a href=“http://www.chaojibaby.com”>歌手：超级宝贝</a></h2>
  45. <h3>1267</h3>
  46. </li>
  47. <li class=“t2″>
  48. <h1><a href=“#”>十年</a></h1>
  49. <h3>847</h3>
  50. </li>
  51. <li class=“t3″>
  52. <h1><a href=“#”>兰花草</a></h1>
  53. <h3>634</h3>
  54. </li>
  55. <li class=“t4″>
  56. <h1><a href=“#”>海浪（女生版）</a></h1>
  57. <h3>598</h3>
  58. </li>
  59. <li class=“t4″>
  60. <h1><a href=“#”>亲爱的你在哪里</a></h1>
  61. <h3>548</h3>
  62. </li>
  63. <li class=“t4″>
  64. <h1><a href=“#”>信仰（真情版）</a></h1>
  65. <h3>439</h3>
  66. </li>
  67. <li class=“t4″>
  68. <h1><a href=“#”>红豆8过火</a></h1>
  69. <h3>324</h3>
  70. </li>
  71. <li class=“t4″>
  72. <h1><a href=“#”>相亲相爱–九天</a></h1>
  73. <h3>287</h3>
  74. </li>
  75. <li class=“t4″>
  76. <h1><a href=“#”>爱你一万年</a></h1>
  77. <h3>156</h3>
  78. </li>
  79. <li class=“t4″>
  80. <h1><a href=“#”>亲爱的你在哪里</a></h1>
  81. <h3>67</h3>
  82. </li>
  83. </div>
  84. </div>
  85. </body>
  86. </html>

注意：
1、如果在测试写代码时DW展示出来的比较乱，大多原因是对象的属性没有写全，比如没有宽度高度的设定，没有右浮动等。这在列表布局中尤其重要。
2、此处使用了css hack技术，以解决浏览不兼容问题。如在对象前加顶极选择符[xmlns]，只被非IE浏览器识别。当然前提是html标签已经加上了xmlns属性：
<html xmlns=”http://www.w3.org/1999/xhtml“>
当然还有其它方法来实现，我们放在以后的教程中陆续讲解。
3、#top10 li.t1 h1{}而不是#top10 li .t1 h1{}，中间空一下，表示的是对象的上下级关系。而t1是作为类出现的，li.t1 h1表示类为ti的列表下的h1子对象。
4、几个对象想在同行显示的话，可用span选择符，span选择符也可以重复嵌套。如果并非在同行显示的话，尽量不要用span选择符，这时的div选择符就派上了用场。因为之前我们也说过，这两种选择符默认的显示方式分别为：行间内联和块状显示。

原文地址：http://www.chaojibaby.com/blog/article.asp?id=121

路过这的也许还看过这些：

© Johnny for 寂寞部屋, 2007. | Permalink | No comment | Add to del.icio.us
Post tags: , ,

Feed enhanced by Better Feed from Ozh

]]> http://www.bokelife.com/post-428-428/feed/ 0 十三、css网站元素设计-列表元素的使用 http://www.bokelife.com/post-427-427/ http://www.bokelife.com/post-427-427/#comments Wed, 21 Nov 2007 04:37:18 +0000 Johnny http://www.bokelife.com/?p=427 1、列表形式由于展示形式整齐直观，在网站设计中占有很大的比重。早期的列表都是由表格实现的，在代码上过于繁杂，设计和可读性较差。这一节我们重点探讨无序列表ul及有序列表ol元素的使用。
看XHTML代码很简单：

XML/HTML代码
  1. <ul>
  2. <li>布局概述</li>
  3. <li>页面元素入门</li>
  4. <li>高级技巧</li>
  5. <li>高级技巧</li>
  6. </ul>
  7. <ol>
  8. <li>布局概述</li>
  9. <li>页面元素入门</li>
  10. <li>高级技巧</li>
  11. <li>高级技巧</li>
  12. </ol>

以上对比效果见图左：

image

2、针对ul的项目列表符号有以下几种：

CSS代码
  1. ul{list-style-type:none} /*不显示项目符号*/
  2. ul{list-style-type:disc} /*实心圆点，默认的*/
  3. ul{list-style-type:ncircle} /*空心圆点*/
  4. ul{list-style-type:square} /*实心方块*/

针对ol的项目列表符号有以下几种：none（没有）;decimal（实心圆点，默认的）;circle（空心圆点），square（小方块）；

CSS代码
  1. ol{list-style-type:none} /*不显示项目符号*/
  2. ol{list-style-type:decimal} /*阿拉伯数字*/
  3. ol{list-style-type:lower-roman} /*小写罗马数字*/
  4. ol{list-style-type:upper-roman} /*大写罗马数字*/
  5. ol{list-style-type:lower-alpha} /*小写英文字母*/
  6. ol{list-style-type:upper-alpha} /*大写英文字母*/

3、使用图片自定义项目符号

CSS代码
  1. ul{list-style-image:url(arrow.gif);border:1px #33ccff solid;list-style-position:inside;}

其中：list-style-position:inside;的意义是设置列表项位置位于内部，inside与outside是这一句的属性值，对比效果如上图右侧。
其实用过这种方法的朋友会发现，使用这种方法固然简单，但定位起来比较麻烦，而且在效果上也有很大的局限性，下面我们采用背景图片的方法来实现项目列表样式：
css代码如下：

CSS代码
  1. ul{list-style-type:none;}/*去掉项目符号*/
  2. li{background:url(arrow.gif) no-repeat 0px 3px;
  3. padding-left:20px;}

4、使列表变为段落
在以前的教程中，我们接触了display:block;的属性定义，而display的可用值中除了这个外，还有一个inline;详细见下：

CSS代码
  1. display:block;//将对象显示为块状或叫做盒状，后一个对象换行显示。
  2. display:none;//隐藏，不显示对象；
  3. display:inline;//行间内联样式，对象排列在一行中，后一个对象继续连接此对象显示；
  4. display:inline-block;//对象显示为块状，但能呈现内联样式。
  5. display:list-item;//将对象作为列表项显示；

以下做一对比

XML/HTML代码
  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312″ />
  5. <title>步步为营，实战div+css系列教程</title>
  6. </head>
  7. <style tpye=“text/css”>
  8. <!–
  9. ul{list-style-type:none;display:inline;padding:0px;margin-left:0px;}/*去掉项目符号*/
  10. li{display:inline}
  11. h1{display:inline;font-size:16px;font-weight:normal}
  13. –>
  14. </style>
  15. <body>
  16. <h1>这一节我们重点讲解列表元素的应用：</h1>
  17. <ul>
  18. <li>改变列表项目符号</li>
  19. <li>使列表变为段落</li>
  20. <li>列表的缩进排版</li>
  21. <li>复杂列表的排版</li>
  22. </ul>
  23. <h1>在排版的过程中，应用一些图文混排技术，可以实现更好的效果。</h1>
  24. </body>
  25. </html>

效果如图：

image

把ul对象，li对象,h1对象都设置为内联属性，便形成一段落，再控制好左边距及内边距，就如图右部分所示。
下面我们继续对代码改进，设置其首行缩进：
首行缩进代码：

CSS代码
  1. text-indent:32px;//可以用固定值，
  2. text-indent:50%; //也可以用其它值如：50%，0.5em.还可以用负值。

小结：这一节主要认识了有序列表ol与无序列表ul，并且常用的属性参数。下一节我们将综合这方面内容实现较复杂的列表布局。

原文地址：http://www.chaojibaby.com/blog/article.asp?id=120

路过这的也许还看过这些：

© Johnny for 寂寞部屋, 2007. | Permalink | No comment | Add to del.icio.us
Post tags: , ,

Feed enhanced by Better Feed from Ozh

]]> http://www.bokelife.com/post-427-427/feed/ 0 十二、下拉及多级弹出菜单(超简捷代码) http://www.bokelife.com/post-426-426/ http://www.bokelife.com/post-426-426/#comments Wed, 21 Nov 2007 04:26:54 +0000 Johnny http://www.bokelife.com/?p=426  以下为下拉式多级菜单样式实现：
已测试好，欢迎下载使用，超简捷的代码！

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>下拉多级菜单-css系列教程</title>  
  6. <script type="text/Javascript"><!–//–><![CDATA[//><!--  
  7. startList = function() {  
  8.         if (document.all&&document.getElementById){  
  9.             navRoot = document.getElementById("nav");  
  10.             for (i=0; i<navRoot.childNodes.length;i++){  
  11.                 node =navRoot.childNodes[i];  
  12.                 if(node.nodeName=="LI"){  
  13.                   node.onmouseover=function() {  
  14.                         this.className+="over";  
  15.                         }  
  16.                     node.onmouseout=function() {  
  17.                         this.className=this.className.replace("over","");  
  18.                         }  
  19.                     }  
  20.                 }  
  21.             }  
  22.         }  
  23.         window.onload=startList;      
  24.     //–><!]]></script>  
  25. <style>  
  26. ul { padding:0; margin:0; list-style:none;}   
  27. li { float:left; width:100px;}   
  28. ul li a { display:block; font-size:12px; border:1px solid #ccc; margin-top:2px; margin-left:3px; padding:3px; text-decoration:none; color:#777;}   
  29. ul li a:hover { background-color:#ddd;}   
  30. li ul { display:none; top:20px;}   
  31. li:hover ul,li.over ul { display:block;}   
  32. </style>  
  33.   
  34. </head>  
  35. <body>  
  36.   
  37. <ul id ="nav">  
  38.     <li><a href="#">设计</a>  
  39.         <ul>  
  40.             <li><a href="#">平面设计</a></li>  
  41.             <li><a href="#">网页设计</a></li>  
  42.             <li><a href="#">动画设计</a></li>  
  43.         </ul>  
  44.     </li>  
  45.     <li><a href="#">程序</a>  
  46.         <ul>  
  47.             <li><a href="#">asp程序</a></li>  
  48.             <li><a href="#">php程序</a></li>  
  49.             <li><a href="#">jsp程序</a></li>  
  50.         </ul>  
  51.     </li>  
  52.     <li><a href="#">维护</a>  
  53.         <ul>  
  54.             <li><a href="#">网站编辑</a></li>  
  55.             <li><a href="#">网站推广</a></li>  
  56.             <li><a href="#">网站优化</a></li>  
  57.         </ul>  
  58.     </li>  
  59. </ul>  
  60. </body>  
  61. </html>  

 

原文地址：http://www.chaojibaby.com/blog/article.asp?id=119  

路过这的也许还看过这些：

© Johnny for 寂寞部屋, 2007. | Permalink | No comment | Add to del.icio.us
Post tags: , ,

Feed enhanced by Better Feed from Ozh

]]> http://www.bokelife.com/post-426-426/feed/ 0 步步为营，实战div+css系列教程 http://www.bokelife.com/post-396-396/ http://www.bokelife.com/post-396-396/#comments Wed, 14 Nov 2007 13:48:16 +0000 Johnny http://www.bokelife.com/?p=396 刚转完超级宝贝的十一篇div+css系列教程，里头的图片大部分自己做了处理，

同时收藏这些文章的目的是为了收集后自己学习。所有权属超级宝贝所有……

本站的目录如下：

一、了解XHTML中的常用选择符

二、如何将CSS应用到网页？

三、认识CSS布局的重要标签——div

四、div的常见布局结构——并列与嵌套

五、div的分栏布局——单列居中显示

六、div的分栏布局——两列固定及自适应列宽

七、两列右列宽度自适应与三列中间列宽自适应

八、两列固定宽度居中与高度自适应

九、利用div的定位制作复杂的页面布局

十、css网站元素设计——横向导航制作

十一、css网站元素设计——纵向导航制作

十二、下拉及多级弹出菜单(超简捷代码)

十三、css网站元素设计-列表元素的使用

十四、复杂的列表布局示例

 

以下是引用超级宝贝的目录：

XML/HTML代码
  1. 本人对CSS研究也是只处于摸索阶段，所以想写这样的教程，主要是想理清下学习CSS的思路与流程，以便于下一步更深入地了解，同时以一个初学者的眼光来了解学习。不求大家能从中获益多少，只求更多的网友能给以指点，交流提高。       
  2. 相关目录：       
  3. 一、了解XHTML中的常用选择符  http://www.chaojibaby.com/blog/article.asp?id=105      
  4. 二、如何将CSS应用到网页？  http://www.chaojibaby.com/blog/article.asp?id=106      
  5. 三、认识CSS布局的重要标签——div  http://www.chaojibaby.com/blog/article.asp?id=107      
  6. 四、div的常见布局结构——并列与嵌套  http://www.chaojibaby.com/blog/article.asp?id=108      
  7. 五、div的分栏布局——单列居中显示    http://www.chaojibaby.com/blog/article.asp?id=110      
  8. 六、div的分栏布局——两列固定及自适应列宽   http://www.chaojibaby.com/blog/article.asp?id=111      
  9. 七、两列右列宽度自适应与三列中间列宽自适应   http://www.chaojibaby.com/blog/article.asp?id=112      
  10. 八、两列固定宽度居中与高度自适应   http://www.chaojibaby.com/blog/article.asp?id=113      
  11. 九、利用div的定位制作复杂的页面布局  http://www.chaojibaby.com/blog/article.asp?id=114      
  12. 十、css网站元素设计——横向导航制作 http://www.chaojibaby.com/blog/article.asp?id=115      
  13. 十一、css网站元素设计——纵向导航制作  http://www.chaojibaby.com/blog/article.asp?id=116      
  14. 十二、下拉及多级弹出菜单(超简捷代码) http://www.chaojibaby.com/blog/article.asp?id=119  
  15. 十三、css网站元素设计-列表元素的使用  http://www.chaojibaby.com/blog/article.asp?id=120  
  16. 十四、复杂的列表布局示例   http://www.chaojibaby.com/blog/article.asp?id=121   

路过这的也许还看过这些：

© Johnny for 寂寞部屋, 2007. | Permalink | No comment | Add to del.icio.us
Post tags: , ,

Feed enhanced by Better Feed from Ozh

]]> http://www.bokelife.com/post-396-396/feed/ 0 十一、css网站元素设计——纵向导航制作 http://www.bokelife.com/post-395-395/ http://www.bokelife.com/post-395-395/#comments Wed, 14 Nov 2007 13:39:44 +0000 Johnny http://www.bokelife.com/?p=395 纵向导航多常见于电子商务网站的一侧，便于用户查找各个分类的商品。
先来看一段XHTML代码：

XML/HTML代码
  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312″ />
  5. <title>纵向分类导航-css系列教程-超级宝贝-http://www.chaojibaby.com</title>
  6. <style type = “text/css”>
  7. <!–
  8. #category{
  9. width:100px;
  10. border-color:#ff0000 #ff9900;/*此处边框的设定采用了简写的形式，此处单独设定边框颜色，两个颜色同样是表示上下，与右左。*/
  11. border-style:solid;  /*此处单独设定边框样式*/
  12. border-width:0px 1px 1px;  /*此处单独设定边框宽度，三个值分别表示：上为0px,右左分别是1px ,下为1px.*/
  13. }
  14. #category h1,#category h2{   /*此处把两级标题相同属性写在一起，节约代码*/
  15. margin:0px;
  16. padding:4px;
  17. font-size:12px;
  18. font-weight:bold;
  19. }
  20. #category h1{
  21. border-top:1px solid #c5c6c4; /*把不同的属性单独设定。*/
  22. }
  23. #category h2{
  24. font-weight:normal;  /*前面设定了粗体，此度用正常值覆盖。缺少这一句则按默认值加粗。*/
  25. padding-left:10px;  /*用此值覆盖上面设定的值。*/
  26. }
  27. –>
  28. </style>
  29. </head>
  30. <body>
  31. <div id =“category”>
  32. <h1>设计</h1>
  33. <h2><a href=“#”>平面设计</a></h2>
  34. <h2><a href=“#”>网页设计</a></h2>
  35. <h2><a href=“#”>动画设计</a></h2>
  36. <h1>程序</h1>
  37. <h2><a href=“#”>asp程序</a></h2>
  38. <h2><a href=“#”>php程序</a></h2>
  39. <h2><a href=“#”>jsp程序</a></h2>
  40. <h1>维护</h1>
  41. <h2><a href=“#”>网站编辑</a></h2>
  42. <h2><a href=“#”>网站推广</a></h2>
  43. <h2><a href=“#”>网站优化</a></h2>
  44. </div>
  45. </body>
  46. </html>

效果图：

image

这里我们没有使用ul和li来实现，而使用了一级标题h1与二级标题h2,其实这些h1,h2,h3标签本身就具有用于对文本进行层级划分的作用，而使用div和class来对其标记，显得更为直观。
需要重点提示的就是边框属性的简写形式，有兴趣的朋友可以参考下。

下面我们只需要通过修改CSS就能使其变得更加美观，这就显示出了内容与样式分离的极大优势了。
先看效果图：

image

以下代码分别用div+h1+h2和div+ul+li的方法实现相同的样式。经测试在FireFox中完全一样，但在IE6.0中稍有不同。

XML/HTML代码
  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312″ />
  5. <title>纵向分类导航-css系列教程-超级宝贝-http://www.chaojibaby.com</title>
  6. <style type = “text/css”>
  7. <!–
  8. #category{background-color:#C1433E;    width:120px;border:1px #C8504D solid ;float:left;margin-right:2px;}
  9. #category h1,#category h2{margin:0px;padding:1px 4px;font-size:12px;font-weight:bold;}
  10. #category h1{color:#FFA251;font-size:13px;font-weight:normal; }
  11. #category h2{padding-left:10px;}
  12. #category a{display:block;width:100px;height:22px;background-color:#C8504D;text-align:center;line-height:22px;color:#FFE9A3;text-decoration:none;}
  13. #category a:hover{background-color:#C1433E;color:#FFE9A3;text-decoration:underline;}
  15. #category2{list-style:none;margin:0px;padding:0px;background-color:#c1433e;width:116px;border:1px #C8504D solid ;float:left;}
  16. #category2 li{font-size:13px;color:#ffa251;padding-left:3px;}
  17. #category2 li ul{list-style:none;margin:0px;padding-left:7px;font-weight:bold;padding:0px;}
  18. #category2 li ul li a{display:block;width:100px;height:22px;background-color:#c8504d;text-align:center;line-height:22px;color:#ffe9a3;text-decoration:none;margin:2px 3px;font-size:12px;}
  19. #category2 li ul li a:hover{background-color:#C1433E;color:#FFE9A3;text-decoration:underline;}
  20. –>
  21. </style>
  22. </head>
  23. <body>
  24. <div id =“category”>
  25. <h1>设计</h1>
  26. <h2><a href=“#”>平面设计</a></h2>
  27. <h2><a href=“#”>网页设计</a></h2>
  28. <h2><a href=“#”>动画设计</a></h2>
  29. <h1>程序</h1>
  30. <h2><a href=“#”>asp程序</a></h2>
  31. <h2><a href=“#”>php程序</a></h2>
  32. <h2><a href=“#”>jsp程序</a></h2>
  33. <h1>维护</h1>
  34. <h2><a href=“#”>网站编辑</a></h2>
  35. <h2><a href=“#”>网站推广</a></h2>
  36. <h2><a href=“#”>网站优化</a></h2>
  37. </div>
  38. <ul id =“category2″>
  39. <li>设计
  40. <ul>
  41. <li><a href=“#”>平面设计</a></li>
  42. <li><a href=“#”>网页设计</a></li>
  43. <li><a href=“#”>动画设计</a></li>
  44. </ul>
  45. </li>
  46. <li>程序
  47. <ul>
  48. <li><a href=“#”>asp程序</a></li>
  49. <li><a href=“#”>php程序</a></li>
  50. <li><a href=“#”>jsp程序</a></li>
  51. </ul>
  52. </li>
  53. <li>维护
  54. <ul>
  55. <li><a href=“#”>网站编辑</a></li>
  56. <li><a href=“#”>网站推广</a></li>
  57. <li><a href=“#”>网站优化</a></li>
  58. </ul>
  59. </li>
  60. </ul>
  61. </body>
  62. </html>

提示：第二种方法使用了ul的嵌套，默认的样式左边会留很大的间距，这时我们使用margin:0px;padding:0px;来清除边距，然后再细调。

原文地址：http://www.chaojibaby.com/blog/article.asp?id=116

路过这的也许还看过这些：

© Johnny for 寂寞部屋, 2007. | Permalink | No comment | Add to del.icio.us
Post tags: , ,

Feed enhanced by Better Feed from Ozh

]]> http://www.bokelife.com/post-395-395/feed/ 0 十、css网站元素设计——横向导航制作 http://www.bokelife.com/post-394-394/ http://www.bokelife.com/post-394-394/#comments Wed, 14 Nov 2007 13:34:19 +0000 Johnny http://www.bokelife.com/?p=394 导航在网站中起着举足轻重的作用，常见的导航形式主要有横向导航、纵向导航和下拉式导航等三种形式。
传统的导航是表格式布局，不仅代码量大，后期维护起来也不方便，而且也没有实现表现与内容的分离，显然不符合web2.0的标准。下面我们重点来看css是如何实现横向导航的。
先看代码：

CSS代码
  1. <ul id=“nav”>
  2. <li><a href=“#”>首页</a></li>
  3. <li><a href=“#”>心路</a></li>
  4. <li><a href=“#”>历程</a></li>
  5. <li><a href=“#”>设计</a></li>
  6. <li><a href=“#”>代码</a></li>
  7. <li><a href=“#”>优化</a></li>
  8. </ul>

这里我们引入了一个新的元素ul。ul是CSS中使用相当广泛的一种元素，主要用来描述列表型内容。每一个<ul></ul>相当于一个列表块，块中的每一条列表数据用<li></li>来描述，下图是一个不加样式的ul实现的样式效果：
如图：导航对比

image

显然，ul默认加上了圆点序号，而且自上而下排列。实际上导航可以理解为导航列表，每一个列表数据就可以看做是一个频道,当然也可以用二层嵌套div来实现导航代码结构，但相对于ul来说，div显然过于复杂，而且我们之前也说过，div主要是用来大范围的样式布局。而类似于导航的块状型区域则主要交给ul来处理。
下面我们来看为其实现样式的css代码：

XML/HTML代码
  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html>
  3. <head>
  4. <title></title>
  5. <style type=“text/css”>
  6. <!–
  7. ul{list-style-type:none;}     /*去除列表项前端的项目符号*/
  8. ul li{float:left;}  /*使列表项不再遵循默认的自上而下样式，而类似于div的向左浮动属性，使右侧对象紧贴左侧最终形成横向排列样式*/
  9. ul li a{display:block;/*块状显示，在第三节讲div的时候曾提过，此处的作用就是把a链接对象由一段文本改为块状对象，使其具备div的一些特性，从而实现内外边距，边框背景等属性*/
  10. margin-left:10px;    /*左外边距*/
  11. width:60px;          /*块宽度*/
  12. height:16px;         /*块高度*/
  13. padding-top:4px;     /*上内边距*/
  14. text-align:center;   /*文本距中显示*/
  15. background-color:#cecece;    /*块背景色*/
  16. color:#009900;               /*字体颜色*/
  17. font-size:12px;              /*字体大小*/
  18. text-decoration:none;}       /*字体装饰无下划线*/
  19. ul li a:hover{color:#fff;            /*伪类：指向链接时的字体颜色*/
  20. background-color:#33ccff;    /*伪类：指向链接时的背景色*/
  21. text-decoration:underline;   /*伪类：指向链接时的字体装饰*/
  22. }
  23. –>
  24. </style>
  25. </head>
  27. <body>
  28. <ul id=“nav”>
  29. <li><a href=“#”>首页</a></li>
  30. <li><a href=“#”>心路</a></li>
  31. <li><a href=“#”>历程</a></li>
  32. <li><a href=“#”>设计</a></li>
  33. <li><a href=“#”>代码</a></li>
  34. <li><a href=“#”>优化</a></li>
  35. </ul>
  36. </div>
  37. </body>
  38. </html>

特别说明：
1、以下两句都使用了包含选择符。
ul li{}
ul li a{}
2、用ul实现的横向导航显然用了极少的代码量实现了丰富的效果，这是表格所不及的。而且在后期增删频道更为方便。

下面我们对代码修改以实现如下样式：
如图：导航示例
因为有图片，所以要下载示例文件。

image

代码如下：

XML/HTML代码
  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html>
  3. <head>
  4. <title>横向分类导航-css系列教程-超级宝贝-http://www.chaojibaby.com</title>
  5. <style type=“text/css”>
  6. <!–
  7. body{margin:0px;}
  8. #header{margin:0px auto;width:780px;height:90px;background-color:#000;padding:0px;}
  9. #header img{position:relative;top:20px;left:30px;}  /*相对定位，位置根据前一对象进行偏移*/
  10. #nav{
  11. list-style:none;
  12. position:relative;  /*相对定位，位置根据前一对象进行偏移*/
  13. top:37px;
  14. left:300px;
  15. width:500px;/*此处须设定宽度，否则在IE与Firefox里不一致且不正常*/
  16. }
  17. #nav li{float:left;}
  18. #nav li a{display:block;
  19. margin-left:10px;
  20. width:69px;
  21. height:16px;
  22. padding-top:4px;
  23. text-align:center;
  24. background-image:url(nav.gif);
  25. background-position:0px -22px; /*背景绝对定位，只显示背景图片的下部分*/
  26. color:#009900;
  27. font-size:12px;
  28. letter-spacing :10;
  29. text-decoration:none;}
  30. #nav li a:hover{color:#fff;
  31. background-image:url(nav.gif);
  32. background-position:0px 0px;/*背景绝对定位，只显示背景图片的上部分,此代码不能省略，因为上面曾指定了背景样式，帮在此处覆盖*/
  33. text-decoration:underline;
  34. }
  35. –>
  36. </style>
  37. </head>
  39. <body>
  40. <div id=“header”>
  41. <a href=“http://www.chaojibaby.com”><img src=“css_desiger.gif” alt=“超级宝贝” border=“0″ /></a>
  42. <div id=“nav”>
  43. <li><a href=“#”>首页</a></li>
  44. <li><a href=“#”>心路</a></li>
  45. <li><a href=“#”>历程</a></li>
  46. <li><a href=“#”>设计</a></li>
  47. <li><a href=“#”>代码</a></li>
  48. <li><a href=“#”>优化</a></li>
  49. </div>
  50. </div>
  51. </body>
  52. </html>

特别说明：
此处顺便讲解了如何应用了背景图片的绝对定位属性，把原本两个不同色调的图片合二为一，然后定位显示。从而丰富导航的样式。当然背景属性此处不做重点，我们会在以后的教程中详细讲解。

通过这两个示例的练习，想必大家都能做出漂亮的横向导航了吧。下一节我们将来制作纵向导航

原文地址：http://www.chaojibaby.com/blog/article.asp?id=115

路过这的也许还看过这些：

© Johnny for 寂寞部屋, 2007. | Permalink | No comment | Add to del.icio.us
Post tags: , ,

Feed enhanced by Better Feed from Ozh

]]> http://www.bokelife.com/post-394-394/feed/ 0 九、利用div的定位制作复杂的页面布局 http://www.bokelife.com/post-393-393/ http://www.bokelife.com/post-393-393/#comments Wed, 14 Nov 2007 13:29:11 +0000 Johnny http://www.bokelife.com/?p=393 既然是复杂的布局自然用到较多的div以及并列与嵌套。这就要我们在为它们命名的时候遵从一定的规定，以便于可读性。
下面先来看一张布局图：

image

这是三九健康网一个频道的页面，原本是很长的页面，但为了说明问题，取了个完整布局样式，而省去了中间的内容。
我们可以把它看做是一个居中的页面布局，这样要实现整体居中，就需要一个div作为主要容器，我们把这个div命名为container.
CSS样式为：

CSS代码
  1. #container{margin:0px auto;}

这样就实现了整体居中显示。

我们再来看在这个主容器里面分别都有哪些部分：
#header头部：位于顶端，显示网站LOGO及其它相关元素。
#mainmenu主菜单
#banner头部横幅广告
#menu频道菜单
#primary主内容区
#footer脚部区：显示底部功能链接和版权信息。
这些区域从上至下依次排列形成了纵向布局模式。它们之间是并列的，不需要要指定任何样式便可以实现从上到下的叠放。
而在主内容区，又加入了嵌套,即嵌套了两个div区域，左边为：pri_left,右边为pri_right.这两个如何实现左右分栏的，在前面的第六节教程里有详细的说明。在此再罗嗦下，也就是使用了float浮动属性。
css样式为：

CSS代码
  1. #pri_left,#pri_right{float:left;width:75%;}
  2. #pri_left{width:20%;}

此处代码注意：在属性的书写上我们采用了简化的方式应用了群组标签#pri_left,#pri_right{},在参数的书写上，我们为他们二者都定义了width:75%.节约了代码量，但紧接着在下面的属性中单独为左栏定义了width:20%,此时的左栏宽就会覆盖掉上一句的width:75%.从而实现了二者宽度的单独定义。
下面我们来定义这种样式，为了能够显示区域，我们只为他们加上宽度高度及边框样式。

XML/HTML代码
  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html>
  3. <head>
  4. <title></title>
  5. <style type=“text/css”>
  6. <!–
  7. #container{margin:0px auto;border:1px dashed #d55;width:98%;}
  8. #header{border:1px solid #d55;height:48px;margin-top:0px;}
  9. #mainmenu{border:1px solid #d55;height:36px;margin-top:2px;}
  10. #banner{border:1px solid #d55;height:60px;margin-top:2px;}
  11. #menu{border:1px solid #d55;height:36px;margin-top:2px;}
  12. #primary{border:1px solid #d55;margin-top:2px;}
  13. #pri_left,#pri_right{float:left;width:78%;border:1px solid #d55;margin:0px 2px;height:300px;}
  14. #pri_left{width:20%;}
  15. .kuang1{float:left;border:1px dashed #d55;width:40%;height:100px;}
  16. .kuang2{float:left;border:1px dashed #d55;width:29%;height:100px;}
  17. .kuang3{float:left;border:1px dashed #d55;width:69%;height:48px;}
  18. .kuang4{float:left;border:1px dashed #d55;width:29%;height:48px;}
  19. .kuang5{float:left;border:1px dashed #d55;width:99%;height:50px;}
  20. #footer{border:1px solid #d55;height:48px;margin-top:2px;}
  21. –>
  22. </style>
  23. </head>
  25. <body>
  26. <div id=“container”>
  27. <div id=“header”>头部：位于顶端，显示网站LOGO及其它相关元素。</div>
  28. <div id=“mainmenu”>主菜单</div>
  29. <div id=“banner”>头部横幅广告</div>
  30. <div id=“menu”>频道菜单</div>
  31. <div id=“primary”>
  32. <div id=“pri_left”>div为pri_left</div>
  33. <div id=“pri_right”>
  34. <div id=“pri_right1″ class=“kuang1″>div为pri_right1</div>
  35. <div id=“pri_right2″ class=“kuang2″>div为pri_right2</div>
  36. <div id=“pri_right3″ class=“kuang2″>div为pri_right3</div>
  37. <div id=“pri_right4″ class=“kuang1″>div为pri_right4</div>
  38. <div id=“pri_right5″ class=“kuang2″>div为pri_right5</div>
  39. <div id=“pri_right6″ class=“kuang2″>div为pri_right6</div>
  40. <div id=“pri_right7″ class=“kuang3″>div为pri_right7</div>
  41. <div id=“pri_right8″ class=“kuang4″>div为pri_right8</div>
  42. <div id=“pri_right8″ class=“kuang5″>div为pri_right9</div>
  43. </div>
  44. </div>
  45. <div id=“footer”>脚部区：显示底部功能链接和版权信息。</div>
  46. </div>
  47. </body>
  48. </html>

以上是实现页面样式的代码，代码看起来比较繁杂，但里面有很多可以简化的地方，比如充分利用class（类）来指派参数，能缩减代码量，且增加可读性。当然这不是本节讲解的重点，我们会在未来的教程中详细论述。
代码效果如图

image

细心的朋友会发现我们在pri_right区域里用pri_right1~pri_right9分别指定了9个DIV对象，这里面就是充分利用了浮动的属性，而不必再次嵌套。把它们中的每个对象都设定出固定的宽度与高度，加上向左浮动的属性，就会从左向右排列，到右侧容不下时，就会转入下一行显示，从而实现它们的整齐排列。当然这种方式，关键在于设定的精确的宽高。

可见，div的重要作用就是实现大页面的大布局，并且充分利用其浮动定位及并列嵌套的关系，构造出复杂多样的布局样式来。

原文地址：http://www.chaojibaby.com/blog/article.asp?id=114

路过这的也许还看过这些：

© Johnny for 寂寞部屋, 2007. | Permalink | No comment | Add to del.icio.us
Post tags: , ,

Feed enhanced by Better Feed from Ozh

]]> http://www.bokelife.com/post-393-393/feed/ 0 八、两列固定宽度居中与高度自适应 http://www.bokelife.com/post-392-392/ http://www.bokelife.com/post-392-392/#comments Wed, 14 Nov 2007 13:23:22 +0000 Johnny http://www.bokelife.com/?p=392 要实现两列固定宽度居中的布局，其实很简单，在第四节及第六节教程中已经提到，我们只要把两个固定列丢在一个div对象中去，实现嵌套就可以了，修改后的码如下：

XML/HTML代码
  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312″ />
  5. <style type=“text/css”>
  6. <!–
  7. #layout{margin:0px auto;width:304px;}
  8. #left,#right{float:left;background-color:#eeeeee;border:1px dashed #33ccff;width:150px;height:200px}
  9. –>
  10. </style>
  11. </head>
  12. <body>
  13. <div id=“layout”>
  14. <div id=“left”>我是layout对象下的左栏</div>
  15. <div id=“right”>我是layout对象下的左栏</div>
  16. </div>
  17. </body>
  18. </html>

如下图上所示：

在很多情况下我们讨论对象横向排列的次数比较多，包括宽度的自适应。但有些时候也会用到高度的自适应问题，其实在实现高度自适应的过程中，往往会遇到很多不正常的现象，这与浏览器的解析有关，我们直接看如下css代码：

CSS代码
  1. html,body{margin:0px;height:100%;}
  2. #layout{margin:0px auto;background-color:#cecece;width:304px;height:100%;}

如上图下部分看实现效果!

注意：问题的关键在于第一句代码：

CSS代码
  1. html,body{margin:0px;height:100%;}

我们同时设定了html和body的高度均为100%,这是实现高度自适应的关键。一个对象的高度可以用百分比来显示，但要取决于它的父对象的高度而#layout放在了body中，只有我们对其父对象设置了100%的高度时，子对象的相对高度才生效。
单独为body设置了100%的高度，在IE下可以实现高度自适应，但在Firefox下仍不能实现，所以也为html设置了100%的高度。这是浏览器解析的问题，加上这一句为的就是能让其在两个浏览器下都正常显示。

原文地址：http://www.chaojibaby.com/blog/article.asp?id=113

路过这的也许还看过这些：

© Johnny for 寂寞部屋, 2007. | Permalink | No comment | Add to del.icio.us
Post tags: , ,

Feed enhanced by Better Feed from Ozh

]]> http://www.bokelife.com/post-392-392/feed/ 0 七、两列右列宽度自适应与三列中间列宽自适应 http://www.bokelife.com/post-391-391/ http://www.bokelife.com/post-391-391/#comments Wed, 14 Nov 2007 13:18:30 +0000 Johnny http://www.bokelife.com/?p=391 在css中实现两列右列宽度自适应与三列中间列宽度自适应的布局是相当简单的。下面分别作一解说：

一、两列右列宽度自适应
我们只需要设定左列为固定宽度，右列不设值，并且不浮动即可。代码如下：

CSS代码
  1. #left,rightright{
  2. background-color:#eeeeee;
  3. border:1px solid #33ccff;
  4. height:400px;
  5. }
  6. #left{width:180px;
  7. float:left;
  8. }

注：上面的写法一定要掌握住，利用群组标签把相同属性及参数写在一起，然后把不同的单独写出来。
这样左边将呈现出180px的宽度。而右侧则根据浏览器窗口大小来自动适应。
尝试把左栏宽度改为580px ，看有如何变化。
如图对比：一栏固定与一栏自适应的对比

image

这种布局方式常被应用到博客风格中。

二、三列中间列自适应：
这种样式细心的朋友会发现在第六节教程中已经提到这样的代码：

CSS代码
  1. #left,#right{background-color:#eeeeee;border:1px dashed #33ccff;height:200px}
  2. #left{float:left;width:180px}
  3. #center{border:1px dashed #33ccff;} /*为了查看效果，只加了边框样式，便于观察*/
  4. #right{float:rightright;width:200px;}

单单这样设置了左栏向左浮动，右栏向右浮动，是不够的，因为中间栏没有设定样式，它装根据左栏向左浮动，而在其右侧显示，而没有设定其宽度，所以将占据了所有的右边宽度。而右栏则根据block块状及向右浮动的属性在下一列右侧显示,如图上：

image

这样的布局显然不能满足我们的要求，这里我们就要引入除了浮动之外的另一个重要的属性：position绝对定位。
position:static;        /*默认值，无特殊定位,页面中的每一个对象默认都是这种属性 */
absolute;      /*对象从文档流中拖出，使用top,right,bottom,left等从最近的一个最有定位价值的父对象中绝对定位。 */
relative;      /*对象不可层叠，使用top,right,bottom,left等在正常文档流中偏移位置。 */
注意：某一对象使用了position:absolute;它将从本质上与其它对象中分离出来，它的定位不会影其它对象，也不会被其它对象的浮动定位所影响，可以这样理解，使用了此属性，对象就像一个图层一样浮在了网页之上。

明白了这个，我们再对上面的代码做一改进：

XML/HTML代码
  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=“http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312″ />
  5. <style type=“text/css”>
  6. <!–
  7. #left,#right,#center{background-color:#eeeeee;border:1px dashed #33ccff;height:200px}
  8. #left{width:180px;
  9. position:absolute;top:0px;left:0px;}  /*此处让左栏绝对定位，距父对象上为0px,距父对象左为0px */
  10. #right{width:200px;}
  11. position:absolute;top:0px;right:0px;} /*此处让左栏绝对定位，距父对象上为0px,距父对象右为0px */
  12. #center{margin-left:186px;margin-right:204px;}/*固定了左右栏的位置，我们再来设定此对象距左距右的宽度，从而调整其大小 */
  13. –>
  14. </style>
  15. </head>
  16. <body>
  17. <div id =“left”>我的ID为left</div>
  18. <div id =“center”>我的位置在中间</div>
  19. <div id =“right”>我的ID为right</div>
  20. </body>
  21. </html>

此代码运行效果如图中
那为什么上边没对齐呢？
这个问题与第六节结尾处的问题类似：我们把左栏和右侧都设定了position:absolute;top:0px;而中间部分没有设定，它将按照默认的属性来留10px的高度。这样我们有必要在css里加入一句：

CSS代码
  1. body{margin:0px;}

原文地址：http://www.chaojibaby.com/blog/article.asp?id=112

路过这的也许还看过这些：

© Johnny for 寂寞部屋, 2007. | Permalink | No comment | Add to del.icio.us
Post tags: , ,

Feed enhanced by Better Feed from Ozh

]]> http://www.bokelife.com/post-391-391/feed/ 0 六、div的分栏布局——两列固定及自适应列宽 http://www.bokelife.com/post-390-390/ http://www.bokelife.com/post-390-390/#comments Wed, 14 Nov 2007 10:21:41 +0000 Johnny http://www.bokelife.com/?p=390 上一节教程讲的是单列固定宽度及自适应宽度，这一节我们讲的是两列的固定宽度与其中一列自适应宽度，这也是最常用的布局结构。
一、两列固定宽度：
两列固定宽度自然要用到两个div.如下XHTML代码：

XML/HTML代码
  1. <div id=“left”>我的ID是left</div>
  2. <div id=“right”>我的ID是right</div>

下面我们来为它设定统一的大小及其它样式：

CSS代码
  1. #left,#right
  2. {width:240px,
  3. height:180px;
  4. background-color:#cecece;
  5. border:1px dashed #33ccff;
  6. }

以上的css代码用到我们第一节讲到的群组选择符#left,#right，使它们二者都具备后面的样式。
由于div里没有加入内容，为了能看出它的效果，在属性里加入了宽为1像素，颜色为#33ccff的实线框。以后的讲解我们仍将彩此方法来显示其它结构效果。
看下效果：

image

图中并没有达到我们的两列的效果，其实前面第三节也有提到，它将会按照block（块状结构）来显示在下一列。要真正的实现左右排列，就要加入新的属性——float（浮动属性）。
float浮动属性是div+css布局中的一个非常重要的属性。大部分的div布局都是通过float的控制来实现的。具体参数如下：
float:none用于设置是否浮动。left对象向左浮动。right对象向右浮动。

在此为了实现它们的分列显示，就要加入浮动属性改良为：

CSS代码
  1. #left,#right
  2. {width:240px,
  3. height:180px;
  4. background-color:#cecece;
  5. border:1px dashed #33ccff;
  6. }
  7. #left{float:left;}
  8. #right{float:left;}

加入了以上代码，就表示#left向左浮动。而#right也向左浮动，它就会紧贴着#left并列显示。也如上图所示。

根据上面的讲解，我们来逐步实现下面的效果：

1、如果按下面的浮动修改会变成什么？

CSS代码
  1. #left{float:left}
  2. #right{float:right}
  4. #left{float:right}
  5. #right{float:left}
  7. #left{float:right}
  8. #right{float:right}

image

看其中的三个小图,之所以把几个上下列显示的块对象变成了左右显示的分列效果，完全依赖于float的浮动属性。从页实现多种样式的组合方法。

二、两列自适应列宽
这个样式实现起来比较简单，之前在第五节教程中也提到要实现自适应列宽就是变固定的数值为百分比。与其唯一的区别在于加了浮动的属性。代码如下：

CSS代码
  1. #left,#right{
  2. float:left,
  3. height:200px;
  4. background-color:#f6f6f6;
  5. border:1px solid #ff9900;
  6. }
  7. #left{width:20%}
  8. #right{width:80%}

提示：把共同的样式及参数利用前面提到的群组选择符结合在一起节省了代码量。再把不同的单独列出来。
我们来看一下效果：

image

为什么没有实现向左浮动呢，问题是排在一行的宽度不能容下我们的20%+80%=100%的宽度，原因很简单：
我们设置的边框线为1px,这样，边框要占去4个像素。

还有我们的页面设置没有重新设，它会按默认的body对像与边界各有2个外边距,这样左右又占去了20个像素。如果不想要这个外边距，应当在css里加入以下代码：

CSS代码
  1. body{margin:0px}

这样就设定了外边距为0px.

而在实际应用中，我们一般为设置二者和小于100%的作法，即把right的宽度设为75%左右。然后我们看它的效果。如图对比。这样就实现了二列自适应。随浏览器宽度而改变。

原文地址：http://www.chaojibaby.com/blog/article.asp?id=111

路过这的也许还看过这些：

© Johnny for 寂寞部屋, 2007. | Permalink | No comment | Add to del.icio.us
Post tags: , ,

Feed enhanced by Better Feed from Ozh

]]> http://www.bokelife.com/post-390-390/feed/ 0 五、div的分栏布局——单列居中显示 http://www.bokelife.com/post-389-389/ http://www.bokelife.com/post-389-389/#comments Wed, 14 Nov 2007 07:58:23 +0000 Johnny http://www.bokelife.com/?p=389 上一节我们也提到了div的左右分栏布局，但没有实现真正意义上的分栏。这一节，我们就来结合css样式实现分栏。
在讲解分栏之前，有必要对单一列的布局做一个了解。
如代码：

XML/HTML代码
  1. <html>
  2. <head>
  3. <title></title>
  4. <style type=“text/css”>
  5. #layout{
  6. background-color:#eeeeee;
  7. border:1px solid #33ccff;
  8. width:240px;
  9. height:150px;
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <div id =“layout”>单一列的固定宽度</div>
  15. </body>
  16. </html>

在css中我们分别实现了id为layout的div的背景色，边框的线粗、线样式、线颜色，以及div的宽和高。
看如图效果：

上图中实现的是固定的宽和高，如果想实现自适应宽度，我们可以用百分数来控制。即把其中的width值改为width:N%，这样就会根据浏览器当前宽度自动调整。

设定了div的总宽度，但它会按默认的方式居左显示。那么怎么实现它的固定列宽和自适应列宽都能够居中显示呢？这就用到它的外边距属性：
margin:0px auto;
margin属性表示对象的外边距，分别为：上边距、右边距、下边距、左边距（即按照顺时针顺序）。
当书写一个参数时，表示四个边距均为此参数。
当只书写两个参数时，第一个参数表示：上下边距，第二个参数表示左右边距。
当书写三个参数时，第一个表示上边距，第二个表示左右边距，第三个表示下边距。
margin属性除了支持数值外，还支持auto值，表示让浏览器自动判断边距。
这样margin:0px auto;就表示上下边距均为0px,左右边距根据浏览器自动判断一致，从而实现了居中效果。

试一试在上面代码中加入此句后，为：

XML/HTML代码
  1. <html>
  2. <head>
  3. <title></title>
  4. <style type=“text/css”>
  5. #layout{
  6. margin:0px auto;
  7. background-color:#eeeeee;
  8. border:1px solid #33ccff;
  9. width:240px;
  10. height:150px;
  11. }
  12. </style>
  13. </head>
  14. <body>
  15. <div id =“layout”>单一列的固定宽度</div>
  16. </body>
  17. </html>

预览效果图为：图

注意：以上代码在FireFox中测试正常，但在IE6中测试以上代码，一定要在顶部加入以下声明，用以定义XHTML文档类型。否则不能呈现居中样式,当然这个问题在IE7中已经不会再出现了。代码如下：

XML/HTML代码
  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

小知识：一个标准的XHTML必须以doctype标签作为开始。doctype用于定义文档类型。文档类型分为三种：分别为Transitional类型,Strict类型,Frameset类型。
Transitional是一种过渡类型，使用过渡类型的XHTML网页，浏览器对它的解析比较宽松。允许使用HTML4.01中的标签，但必须符合XHTML语法。
Strict是一种严格类型。浏览器对此类型的XHTML的解析相对严格。不允许使用任何表现样式的标识和属性，如在元素中直接使用背景色bgcolor属性。
代码如下：

XML/HTML代码
  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Strict//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-Strict.dtd”>

Frameset框架型网页，如果网页使用了框架结构，有必要在文档中声明。代码如下：

XML/HTML代码
  1. <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Frameset//EN” ”http://www.w3.org/TR/xhtml1/DTD/xhtml1-Frameset.dtd”>

原文地址：http://www.chaojibaby.com/blog/article.asp?id=110

路过这的也许还看过这些：

© Johnny for 寂寞部屋, 2007. | Permalink | No comment | Add to del.icio.us
Post tags: , ,

Feed enhanced by Better Feed from Ozh

]]> http://www.bokelife.com/post-389-389/feed/ 0 四、div的常见布局结构——并列与嵌套 http://www.bokelife.com/post-387-387/ http://www.bokelife.com/post-387-387/#comments Wed, 14 Nov 2007 07:40:31 +0000 Johnny http://www.bokelife.com/?p=387 上一节教程我们已经提到：div是XHTML中专门用于布局设计的容器对象。下面我们就来接触最常见的并列与嵌套。
看代码：

XML/HTML代码
  1. <div id=“header”>头部</div>
  2. <div id=“center”>中间部分</div>
  3. <div id=“footer”>底部</div>

在此我们为每一个div对象加了一个id名称，以便于css能够区别对待。
以上代码实现了头部、中间部分与底部的并列。但在大多情况下，中间部分又分为左栏与右栏部分。
这时候我们就要在中间部分嵌套进去一个左栏和一个右栏，如下代码：

XML/HTML代码
  1. <div id=“header”>头部</div>
  2. <div id=“center”>
  3. <div id=“left”></div>
  4. <div id=“right”></div>
  5. </div>
  6. <div id=“footer”>底部</div>

而在大多数情况下，我们还会为头部加上标题区与导航区。理论上也是嵌上去的，如代码：

XML/HTML代码
  1. <div id=“header”>
  2. <div id=“title”>标题区</div>
  3. <div id=“nav”>导航</div>
  4. </div>

但要注意的是：虽然是可以嵌套上去的，也可以多级嵌套，但这样势必会占用浏览器较多的资源来解析这种布局，有些时候还会出现解析错误。从实用性上来说，XHTML为我们提供了多种标签，如
h1,strong,span,p,ul,li,img,div,body……，它们每一个标签都有各自实用的元素，在合适的地方使用合乎元素意义的标签是很有必要的。这样不仅增加了可读性与可伸缩性，而且也符合“物有所值”的原则——div主要用于大块布局的调整。想一想，杀死焉用牛刀？
因此上面的代码可以改良为：

XML/HTML代码
  1. <div id=“header”>
  2. <h1>标题区</h1>
  3. <ul>导航</ul>
  4. </div>
  5. <div id=“center”>
  6. <div id=“left”></div>
  7. <div id=“right”></div>
  8. </div>
  9. <div id=“footer”>底部</div>

来看一下代码在DW编辑器与IE浏览器中的对比：

补充说明：
从图中找不到中部，是因为XHTML中没有放置内容，且没有为他们设置css样式,所以其内部的左右栏也没有可显示的。
头部标题区与导航区由于使用了XHTML中的h1与ul标签，它们则按照其默认的样式显示。
而底部应用的是div标签，它在没有css样式的情况下也将无任何样式的显示。

原文地址：http://www.chaojibaby.com/blog/article.asp?id=108

路过这的也许还看过这些：

© Johnny for 寂寞部屋, 2007. | Permalink | No comment | Add to del.icio.us
Post tags: , ,

Feed enhanced by Better Feed from Ozh

]]> http://www.bokelife.com/post-387-387/feed/ 0 三、认识CSS布局的重要标签——div http://www.bokelife.com/post-386-386/ http://www.bokelife.com/post-386-386/#comments Wed, 14 Nov 2007 07:35:49 +0000 Johnny http://www.bokelife.com/?p=386 刚开始的时候已经讲过，对于理解CSS，大可从理解div标签开始。其实布局最核心的标签就是div,也是下一步我们接触最多的一个。
1、div的意义所在:
div是一个容器，在使用时以<div></div>形式存在。
在XHTML中，每一个标签都可以称作是容器，能够放置内容。但div是XHTML中专门用于布局设计的容器对象。
在传统的表格布局中，完全依赖于表格对象table,在页面中绘制多个单元格，在表格中放置内容，达到排版目的。
而以div对象为核心的页面布局中，只需要用DIV和css便可以实现布局，因此习惯上对css布局称为div+css布局。

2、div只是一个区域标识，如果实用了div，但没有应用div的css样式的话，就等于只看到div的内容，而没有任何样式改观。这一点与使用表格布局有一点不同，如在实现左右分栏的时候，表格可以看到分栏效果，但没有应用css的div 只作为一个区域标识，没有改观。看如下代码实现的效果对比：

XML/HTML代码
  1. <table width=“100%” border=“1″> <!–此table加载自身默认的样式  –>
  2. <tr>
  3. <td>寂寞部屋，寻找一片属于我的避风港……</td>
  4. <td>寂寞部屋，寻找一片属于我的避风港……</td>
  5. </tr>
  6. </table>
  7. <div>寂寞部屋，寻找一片属于我的避风港……</div> <!–*此div未加任何样式 –>
  8. <div>寂寞部屋，寻找一片属于我的避风港……</div>
  9. </body>

table显示了左右分栏，且边框按其默认的边框粗为1的样式展现。
div没有应用css样式，两行也不会分栏显示，也看不出有任何效果。正如上文所言，div 只是一个区域标识，划定了一个区域，而样式的责任交给了css 来处理。

那么怎么才能显示出分列的效果呢？
细心的朋友会发现div容器内的内容没有变化，但在DW编辑器里看出div默认的是整行显示，另一个div则排在下方，而且每一个div都是100%宽度。用W3C官方的说法，div是一个块对象(block对象)，在XHTML中，几乎所有的对象都是默认两种类型：
block 块对象：块对象指的是当前对象显示为一个块，默认为整行显示，下一对象在下一行显示。
in-line 行间对象(内联对象)：此类型与前者相反，它允许下一对象在与它本身的一行中显示。

正是由于div的内容没有效果出现，实现样式需要借助于css,才实现了内容与样式的分离，这样的分离，使得div的最终效果是由css来编写的。css可以实现左右分栏，可以实现上下分栏，而表格则没有这么大的灵活性。css与div内容的无关性，决定了div在设计上有极大的伸缩性，而不拘泥于单元格固定的模式束缚。
因此，实现css的布局，首先在XHTML中将内容用div标记出来，然后再用css来编写样式。

原文地址：http://www.chaojibaby.com/blog/article.asp?id=107

路过这的也许还看过这些：

© Johnny for 寂寞部屋, 2007. | Permalink | No comment | Add to del.icio.us
Post tags: , ,

Feed enhanced by Better Feed from Ozh

]]> http://www.bokelife.com/post-386-386/feed/ 0 二、如何将CSS应用到网页？ http://www.bokelife.com/post-385-385/ http://www.bokelife.com/post-385-385/#comments Wed, 14 Nov 2007 07:07:32 +0000 Johnny http://www.bokelife.com/?p=385 css编码允许我们以多种方式应用到我们所设计的XHTML页面之中，主要有以下三种方式，应用时应根据设计要求确定。
1、行间样式表
行间样式表是将CSS样式编码应用到XHTML标签之中，格式如下：

XML/HTML代码
  1. <p style="font-size:15px;color:#33ccff;font-weight:normal;line-height:22px;">  
  2. [...文本内容...]   
  3. </p>  

行间样式是使用style=""来完成样式设置的，把标签所支持的属性丢到双引号之中，每一属性中间用分号隔开，结局处分号可以省略。
根据web2.0要求的“表现与内容分离”的标准，显然这种方式是不妥当的，它仅仅利用了CSS对元素的精确控制，没有实现样式与内容的分离，所以我们在应用中当完全杜绝此种方式。但然在调试CSS时还是可以临时使用的。

2、内部样式表
内部样式与行间样式都是将CSS样式写在页面之中，但不同的是，内部样式表方式把样式表统一放置在一个固定页部<head></head>标签内。如：

XML/HTML代码
  1. <html>  
  2. <head>  
  3. <title>页面标题</title>  
  4.   
  5. <style type="text/css">  
  6. body{}   
  7. a:{}   
  8. a:hover{}   
  9. td{}   
  10. p{}   
  11. #content{}   
  12. .text{}   
  13. </style>  
  14.   
  15. </head>  
  16. <body>  
  17. </body>  
  18. </html>  

以上代码中的<style></style>标签内放置样式表，注意应当丢在<head></head>之中。此代码只能被当前页执行，不能跨页执行，因而也达到到重复利用CSS的目的，所以也不是我们所提倡的方式。下面就重点讲外部样式表的应用。

3、外部样式表
外部样式表是CSS应用最好的一种形式，把CSS样式代码集中放置在一个单独的CSS文件之中，由页面直接调用，可以实现多个页面的调用，实现了代码最大化重用及网站文件的最优化配置，是我们重点推荐的方式。调用方式如下：

XML/HTML代码
  1. <html>  
  2. <head>  
  3. <title>页面标题</title>  
  4.   
  5. <link rel="stylesheet" rev="stylesheet" href="style.css" type="text/css" />  
  6.   
  7. </head>  
  8. <body>  
  9. </body>  
  10. </html>  

代码中使用link标签将名为style.css的css样式文件丢在<head></head>标签之中，便使用了外部CSS样式的调用。而href=""的作用则指明了CSS文件的路径。

外部调用CSS主要为了实现网站内容与样式的分离，有利于网站文件管理与样式管理，同时也增强了代码的可读性。在以后的探讨中，我们将深入了解如何组织CSS文件。
声明：为了便于讲解，以后的代码，会适当采用第二种内部样式表的方式，以便于对代码的修改来对比实现的效果。

 

原文地址：http://www.chaojibaby.com/blog/article.asp?id=106  

路过这的也许还看过这些：

© Johnny for 寂寞部屋, 2007. | Permalink | No comment | Add to del.icio.us
Post tags: , ,

Feed enhanced by Better Feed from Ozh

]]> http://www.bokelife.com/post-385-385/feed/ 0 一、了解XHTML中的常用选择符 http://www.bokelife.com/post-384-384/ http://www.bokelife.com/post-384-384/#comments Wed, 14 Nov 2007 06:58:43 +0000 Johnny http://www.bokelife.com/?p=384 在了解XHTML中的常用选择符之前，我们先来温习下XHTML基本常识。
XHTML可以看做是一种由HTML向XML的过渡时期的网页结构语言，用于替代HTML，帮助开发适应新的标准以便转向XML。
XHTML在语法上比HTML要求更为严格，因此在开始编写XHTML时，一定要严格符合XHTML的语法规则。新的语法规则主要表现在以下几个方面：
1、属性名称必须小写
如：<span class="list">
class是一个属性名，不能使用CLASS或Class形式。
2、属性值必须用双引号
如：<div id ="content">
不能写作<div id = content>的形式。
3、属性不能简写
HTML中的表单属性<input checked>及<option selected>
在XHTML中正确写法为<input checked="checked"/>及<option selected="selected"/>
4、必须使用结束标签
成对使用的标签如：<div>……</div>及<p>……</p>，
单体标签必须使用正斜线作为结束，如：
<img scr=""/>及<br/>

XHTML中的常用选择符：
1、类型选择符：是以网页中已有的标签类型作为选择符，如:
body{}
div{}
span{}
2、群组选择符：除了对单个XHTML对象进行样式指定外，也可以对一组对象样式指定：
h1,h2,h3,p,span{font-weight:700;font-size:15px;color:#33ccff;}
使用逗号对选择符分隔，使得里面的h1,h2,h3,p,span都具有相同的样式，益于减少代码量,改善CSS代码结构。
3、包含选择符：主要使用于指定某个对象中的子对象样式。中间使用空格隔开。如：
XHTML代码如下：
<p>这是一段落标记，在这里的<span>span内文本<span>实现加粗样式</p>
CSS代码如下：
p span{font-weight:bold;}
表示仅对P对象下的span子对象实现加粗样式。
4、id及class选择符：是CSS提供给用户自定义标签名称的选择符模式。有利于CSS的扩展性与可读性。
如：
<img id="pic_left"></img>与<img id="pic_right"></img>是两个不同的元素。
注意：在同一个页面中，一个id名称必须唯一。
对应CSS如下：
#pic_left{}
#pic_right{}
用不同的id来区分不同的对象，从而实现不同的样式。
而class的好处在于为不同的对象指派相同的样式,从而实现了代码的重复使用性，缩减了代码量。
<p class="title"></p>
<h4 class="title"></h4>
把类为title的属性同时应用到P标签和h4标签下，实现某个属性的共用。

5、组合选择符：对于所有的CSS选择符，均可以组合使用：
h1 .title{}
表示对h1标签下的所有class为title的标签。
#content h2{}
表示对id为content的标签下的h2标签。
h3#content h4{}
表示id为content的h3标签下的h4标签。其实此处完全可以表示成这样：#content h4{},因为已经把此h3标示成了id为content,而id又是唯一的。

6、伪类及伪对象:由CSS自动自持，不能自定义，必须要按标准格式进行。
a:hover{}
a:visited{}

7、通配符的使用
*{color:25px}

 

原文地址：http://www.chaojibaby.com/blog/article.asp?id=105

路过这的也许还看过这些：

© Johnny for 寂寞部屋, 2007. | Permalink | No comment | Add to del.icio.us
Post tags: , ,

Feed enhanced by Better Feed from Ozh

]]> http://www.bokelife.com/post-384-384/feed/ 0 DIV+CSS布局积累 http://www.bokelife.com/post-381-381/ http://www.bokelife.com/post-381-381/#comments Wed, 14 Nov 2007 05:21:43 +0000 Johnny http://www.bokelife.com/?p=381

近来有点兴趣在学css+DIV，刚好看到这个文章，贴下来有空学学……

页头：header
登录条：loginbar
标志：logo
侧栏：sidebar
广告：banner
导航：nav
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
滚动：scroll
页面主体：main
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
热点：hot
新闻：news
下载：download
注册：regsiter
状态：status
按钮：btn
投票：vote
合作伙伴：partner
友情链接：friendlink
页脚：footer
版权：copyright
提交：submit
文本框：textbox
统计：count

以上结构可以组合使用，例如：左列标题lefttitle；底部导航footernav 书写原则是： 1.一律小写； 2.尽量用英文； 3.不加中杠和下划线； 4.尽量不缩写，除非一看就明白的单词。

11.17 网易的CSS写法
/* 全局CSS定义 */
body { text-align: center; font-family:"宋体", arial;margin:0; padding:0; background: #FFF; font-size:12px; color:#000;}
div,form,img,ul,ol,li,dl,dt,dd {margin: 0; padding: 0; border: 0;}
h1,h2,h3,h4,h5,h6 { margin:0; padding:0;}
table,td,tr,th{font-size:12px;}

/* 链接颜色 */
a:link {color: #1f3a87; text-decoration:none;}
a:visited {color: #83006f;text-decoration:none;}
a:hover {color: #bc2931; text-decoration:underline;}
a:active {color: #bc2931;}
/* 颜色属性 [定义规则，小写c加颜色名称] */
.cRed,a.cRed:link,a.cRed:visited{ color:Red; }
.cBlue,a.cBlue:link,a.cBlue:visited{color:#1f3a87;}
.cDRed,a.cDRed:link,a.cDRed:visited{ color:#bc2931;}
.cGray,a.cGray:link,a.cGray:visited{ color: #4F544D;}
.cDGray,a.cDGray:link,a.cDGray:visited{ color: #666;}
.cWhite,a.cWhite:link,a.cWhite:visited{ color:#fff;}
.cBlack,a.cBlack:link,a.cBlack:visited{color:#000;}
a.cBlack:hover{color:#bc2931;}
.cYellow,a.cYellow:link,a.cYellow:visited{color:#ff0;}
.cGreen,a.cGreen:link,a.cGreen:visited{color:#008000;}
/* 字体属性 [定义规则，小写f加属性名称] */
.fB {font-weight: bold;}
.fI {font-style: italic;}

/* 字体大小*/
.f12px{ font-size:12px;}
.f14px{ font-size:14px;}

/* 其他属性 */
.left{ float: left;}
.right{ float: right;}
.clear{ clear: both; font-size:1px; width:1px; visibility: hidden; }
.hidden {display: none;}
.unLine ,.unLine a{text-decoration: none;}
.noBorder{border:none;        }

页面上所有图片自动缩放的代码

<script language="JavaScript">
var imgObj;
for(i = 0; i < document.all.length; i++)
{
if(document.all(i).tagName.toLowerCase()=="img")
{
 imgObj = document.all(i)  //建议只判断高度或者宽度其中一个，那样可以自动按比例缩放
 if (imgObj.height>500)  //判断图片的高度，如果大于500，则设置为500，值可以自己修改
 {
  imgObj.height=500
 }
 if (imgObj.width>700)  //判断图片的宽度，如果大于700，则设置为700，值可以自己修改
 {
  imgObj.width=700
 }
}
}

</script>

滚动条的颜色定义

scrollbar-face-color: #E0D5BE;<!–//滚动条页面颜色设定–>
scrollbar-track-color: #EBE4D3;<!–//滚动条底版颜色设定–>
scrollbar-highlight-color: #ffffff;<!–//滚动条斜面和左面颜色设定–>
scrollbar-shadow-color: #ffffff;<!–//滚动条下斜面和右面颜色设定–>
scrollbar-3dlight-color: #ffffff;<!–//滚动条上边和左边的边沿颜色设定–>
scrollbar-dark-shadow-color: #ffffff;<!–//滚动条下边和右边的边沿颜色设定–>
scrollbar-arrow-color: #978C71;<!–//滚动条两端箭头颜色设定–>  

给图片加边框
在CSS文件中对img定义边界（border），例如我在CSS中定义了：

img.framed {
padding: 6px;
border: 1px solid #CCC;
background-color: #FFF; }

那么在HTML文件中，针对嵌入的图片定义class="framed"就会有相应的边框效果。

<img src="……" class="framed" >

在FF下一个自适应高度的简单做法

加上
height: 100%;
overflow: auto;

自动换行的简单做法

       table-layout: fixed;
       WORD-BREAK: break-all;
       WORD-WRAP: break-word;

怎样用CSS把层做成半透明？

用下面的样式表定义你的层
.alpha { filter: Alpha(Opacity=50, FinishOpacity=50, Style=0, StartX=0, StartY=0, FinishX=100, FinishY=100｝

解释：
Opacity=开始的不透明度(100的话就不透明了)
FinishOpacity=结束的不透明度(100的话就不透明了)
Style=样式，从0开始，1.2.3….有均匀透明啊，放射形状透明啊…
StartX=开始透明的X坐标，基本上为图片、层的左上角（0）
StartY= 开始透明的Y坐标，基本上也为图片、层的左上角（0）
FinishX=结束透明的X坐标，基本上也图片、层的右下（图片、层的宽度）
FinishY=结束透明的Y坐标，基本上也为图片、层的右下角（图片、层的高度

再谈一下关于清除浮动(闭合浮动元素)最简单的方法
最简单的清除浮动(闭合浮动元素的方法是在父级容器内,浮动对象下面再插入一个额外的DIV标签，来清除浮动（clear）,浏览器兼容性好，没有HACKS，缺点是要增加一个无语义的标签,但在有的布局下,可使这个只起到清除作用的DIV,具有语义化.
先看代码

<div class="wrap">
   <div id="sideright">
     <p>……</p>
   </div>
   <div id="sideleft">
   <p>……</p>
   </div>
   <div id="foot">
     <address>
     http://www.forest53.com
     </address>
   </div>
 </div>

其中WRAP是父级容器,sideright和sideleft是左、右部分的内容，foot里放了内容，在左、右内容的下面，并在父级容器里面，起到了清除浮动DIV的作用

有什么能控制滚动条大小的吗？

<div style="overflow:auto;width:200px; height:150px; zoom:0.5;">
<div style="width:2000px; height:1500px; zoom:2;">
有什么能控制滚动条大小的吗
</div>
</div>

同时调用几个地方的外部CSS

main.css

@import url(font.css);
@import url(nav.css);
@import url(form.css);
@import url(footer.css);
@import url(ad.css);

各浏览器padding、margin的差异
margin和padding总是有可能要用到，而产生的问题如何解决呢？由于浏览器解释容器宽度的方法不同：
IE 6.0 Firefox Opera等是
真实宽度=width+padding+border+margin
IE5.X
真实宽度=width-padding-border-margin

解决的方法是

div.content {
width:400px; //这个是错误的width，所有浏览器都读到了
voice-family: ""}""; //IE5.X/win忽略了""}""后的内容
voice-family:inherit;
width:300px; //包括IE6/win在内的部分浏览器读到这句，新的数值(300px)覆盖掉了旧的
}
html>body .content { //html>body是CSS2的写法
width:300px; //支持CSS2该写法的浏览器(非IE5)有幸读到了这一句
}

div.content {
width:300px !important; //这个是正确的width，大部分支持!important标记的浏览器使用这里的数值
width(空格)/**/:400px; //IE6/win不解析这句，所以IE6/win仍然认为width的值是300px；而IE5.X/win读到这句，新的数值(400px)覆盖掉了旧的，因为!important标记对他们不起作用
}
html>body .content { //html>body是CSS2的写法
width:300px; //支持CSS2该写法的浏览器有幸读到了这一句
}

附上：[url=http://www.w3cn.org/article/tips/2006/120.html]HACK总表[/url]

关于W3C检验时候的DIV元素封闭
所有的标记都必须要有一个相应的结束标记
以前在HTML中，你可以打开许多标签，例如<p>和<li>而不一定写对应的</p>和</li>来关闭它们。但在XHTML中这是不合法的。XHTML要求有严谨的结构，所有标签必须关闭。如果是单独不成对的标签，在标签最后加一个"/"来关闭它。例如:

<br /><img height="80" alt="网页设计师" src="../images/logo_w3cn_200x80.gif" width="200" />

成对的标签应有打开标签和关闭标签,例如：
<table><tr><td> </td></tr></table

没有成对关闭标签的元素 都要加 /

如：
<base>
<br>
<hr>
<img>
<input>
<link>
<meta>
<nobr>

请问如何设置img标签图片自动适应高度？
想请教一下，倘若我设定了img的宽度一定值，我想保持纵横比不变，高度自动适应，该如何设置CSS，能否实现？
<style type="text/css">
img {
max-width: 200px;
width:expression(this.width > 200 ? "200px" : (this.width+"px"));
}
</style>
<img src="http://gg.blueidea.com/2006/gongyi/banner.jpg"/>

10个你未必知道的CSS技巧

本文作者是：Trenton Moss。
发表网站是：http://www.webcredible.co.uk/。

本翻译并未得到作者或网站授权。一切权利都归原作者及原网站所有。
如果你得到原作者或原发表网站的授权，可以自由使用本翻译。

1.CSS字体属性简写规则

一般用CSS设定字体属性是这样做的：
font-weight:bold;
font-style:italic;
font-varient:small-caps;
font-size:1em;
line-height:1.5em;
font-family:verdana,sans-serif;

但也可以把它们全部写到一行上去：

font: bold italic small-caps 1em/1.5em verdana,sans-serif;

真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight, font-style, 以及 font-varient ，他们会使用缺省值，这点要记上。

2. 同时使用两个类

一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。事实上，你可以这样：
<p class="text side">…</p>

同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。

补充：对于一个ID，不能这样写<p id="text side">…</p>也不能这样写

3. CSS border的缺省值

通常可以设定边界的颜色，宽度和风格，如：
border: 3px solid #000

这位把边界显示成3像素宽，黑色，实线。但实际上这里只需要指定风格即可。

如果只指定了风格，其他属性就会使用缺省值。一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。如果这个值正好合适的话，就不用设那么多了。

4. CSS用于文档打印

许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。

也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：
<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" /> <link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />

第1行就是显示，第2行是打印，注意其中的media属性。

但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。要想了解更多，可以看“打印差异”这一篇。

5. 图片替换技巧

一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。但如果你想用一些特殊字体时，就只能用图片了。

比如你想整个卖东西的图标，你就用了这个图片：

<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>

这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的：
<h1>Buy widgets</h1>
但这样就没有特殊字体了。要想达到同样效果，可以这样设计CSS：

h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }

注意把image height换成真的图片的高度。这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。但这对于关闭图片的人来说，可能全部看不到了，这点要注意。

6. CSS box模型的另一种调整技巧

这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。比如：

#box { width: 100px; border: 5px; padding: 20px }

这样调用它：
<div id="box">…</div>

这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。但在IE5这样的浏览器上，它的全宽仍是100点。可以用以前人发明的Box调整方法来处理这种差异。

但用CSS也可以达到同样的目的，让它们显示效果一致。

#box { width: 150px } #box div { border: 5px; padding: 20px }

这样调用：
<div id="box"><div>…</div></div>

这样，不管什么浏览器，宽度都是150点了。

7. 块元素居中对齐

如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：
#content { width: 700px; margin: 0 auto }

你会使用 <div id="content"> 来围上所有元素。这很简单，但不够好，IE6之前版本会显示不出这种效果。改CSS如下：

body { text-align: center } #content { text-align: left; width: 700px; margin: 0 auto }

这会把网页内容都居中，所以在Content中又加入了
text-align: left 。

8. 用CSS来处理垂直对齐

垂直对齐用表格可以很方便地实现，设定表格单元 vertical-align: middle 就可以了。但对CSS来说这没用。如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。

CSS方法是什么呢？对了，把这些文字的行高设为 2em：line-height: 2em ，这就可以了。

9. CSS在容器内定位

CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。比如对这个容器：
#container { position: relative }

这样容器内所有的元素都会相对定位，可以这样用：
<div id="container"><div id="navigation">…</div></div>
如果想定位到距左30点，距上5点，可以这样：

#navigation { position: absolute; left: 30px; top: 5px }

当然，你还可以这样：

margin: 5px 0 0 30px

注意4个数字的顺序是：上、右、下、左。当然，有时候定位的方法而不是边距的方法更好些。

10. 直通到屏幕底部的背景色

在垂直方向是进行控制是CSS所不能的。如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方便的，但如果只用这样的CSS：

#navigation { background: blue; width: 150px }

较短的导航条是不会直通到底部的，半路内容结束时它就结束了。该怎么办呢？

不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和设定的背景色一样。
body { background: url(blue-image.gif) 0 0 repeat-y }

此时不能用em做单位，因为那样的话，一旦读者改变了字体大小，这个花招就会露馅，只能使用px。

本文作者是：Trenton Moss。
发表网站是：http://www.webcredible.co.uk/。

本翻译并未得到作者或网站授权。一切权利都归原作者及原网站所有。
如果你得到原作者或原发表网站的授权，可以自由使用本翻译。

常用CSS缩写语法总结

使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩写的主要规则如下：

颜色
16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：

#000000可以缩写为#000;#336699可以缩写为#369;

盒尺寸
通常有下面四种书写方法:

property:value1; 表示所有边都是一个值value1；
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2
property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3
property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left
方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：
margin:1em 0 2em 0.5em;

边框(border)
边框的属性如下：

border-width:1px;
border-style:solid;
border-color:#000;
可以缩写为一句：border:1px solid #000;

语法是border:width style color;

背景(Backgrounds)
背景的属性如下：

background-color:#f00;
background-image:url(/oblog/background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
可以缩写为一句：background:#f00 url(/oblog/background.gif) no-repeat fixed 0 0;
语法是background:color image repeat attachment position;
你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：
color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%

字体(fonts)

字体的属性如下：

字体的属性如下：

font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;
可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。

列表(lists)

取消默认的圆点和序号可以这样写list-style:none;,

list的属性如下:

list-style-type:square;
list-style-position:inside;
list-style-image:url(/oblog/image.gif);
可以缩写为一句：list-style:square inside url(/oblog/image.gif);

路过这的也许还看过这些：

© Johnny for 寂寞部屋, 2007. | Permalink | No comment | Add to del.icio.us
Post tags: ,

Feed enhanced by Better Feed from Ozh

]]> http://www.bokelife.com/post-381-381/feed/ 0