<![CDATA[网页制作CSS-iawsky]]> http://iaw2001200.blog.163.com zh-CN Sun, 10 May 2009 12:45:25 +0800 Sun, 10 May 2009 12:45:25 +0800 http://blogs.law.harvard.edu/tech/rss 120 <![CDATA[网页制作CSS-iawsky]]> http://iaw2001200.blog.163.com/style/common/user_default.gif http://iaw2001200.blog.163.com <![CDATA[CSS教程:链接A标签样式控制vlink,alink,link和a:link]]> http://iaw2001200.blog.163.com/blog/static/9723150220093662527326

CSS教程:链接A标签样式控制vlink,alink,link和a:link

一组专门的预定义的类称为伪类，主要用来处理超链接的状态。超链接文字的状态可以通过伪类选择符＋样式规则来控制。伪类选择符包括：

总: a          表示所有状态下的连接 如 .mycls a{color:red}

① a:link：未访问链接 ,如 .mycls a:link {color:blue}

② a:visited：已访问链接 ,如 .mycls a:visited{color:blue}

③ a:active：激活时（链接获得焦点时）链接的颜色 ,如 .mycls a:active{color:blue}

④ a:hover：鼠标移到链接上时 ,如 .mycls a:hover {color:blue}

一般a:hover和a:visited链接的状态（颜色、下划线等）应该是相同的。

前三者分别对应body元素的link、vlink、alink这三个属性。

四个“状态”的先后过程是：a:link ->a:hover ->a:active ->a:visited。另外，a:active不能设置有无下划线（总是有的）。

举例：伪类的常见状态值

<style type = “text/css”>

<!--

a {font-size:16px}

a:link {color: blue; text-decoration:none;} //未访问：蓝色、无下划线

a:active:{color: red; } //激活：红色

a:visited {color:purple;text-decoration:none;} //已访问：purple、无下划线

a:hover {color: red; text-decoration:underline;} //鼠标移近：红色、下划线

-->

</style>

]]> http://iaw2001200.blog.163.com/blog/static/9723150220093662527326 0 http://iaw2001200.blog.163.com/blog/static/9723150220093662527326 Mon, 6 Apr 2009 18:25:27 +0800 2009-04-06T18:25:27+08:00 <![CDATA[CSS教程:9招让你的CSS文件"减肥"]]> http://iaw2001200.blog.163.com/blog/static/97231502200921514315550

同样的CSS样式功能,有的人写出来的就非常长.而有的人写出来的就比较简单.最近读了很多人写的不同CSS样式,发现自己很多时候写的还不够规范简洁.现在整理出来,也可以供大家学习参考:

1.1：颜色 16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：#ffffff可以缩写为#fff;#33dd66可以缩写为#3d6;

1.2 盒尺寸 盒模型的缩写刚开始比较难记，可以用顺时针来帮助记忆.

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

margin:上右下左.如：margin:5px 7px 4px 10px;

margin:(上右下左) 如：margin:5px;

margin:(上下)（左右） 如：margin:5px 8px;

margin:上（左右）下 如：margin:5px 8px 10px;

1.3 边框 语法是border:width style color; 如：border:1px solid #000;

1.4 背景 语法是background:color image repeat attachment position;

例如：background:#d00 url(background.gif) no-repeat fixed 0 0

1.5 字体 类似：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;

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

如：最简单font:12px “SimSun”.

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

语法list-style:square inside url(image.gif)；

1.7 0是不需要任何单位的，因为任何单位的0都一样.例如,margin:0

1.8 css属性的最后一项”;”号可以省略

1.9 把多余的空格和换行删掉。

最后提示:主要还是要学习他人优点,总结自己不足.然后养成一个好的编码习惯.希望你继续支持网站制作教程网.

原文地址:http://www.web2bar.cn/Article/3513.aspx

]]> http://iaw2001200.blog.163.com/blog/static/97231502200921514315550 0 http://iaw2001200.blog.163.com/blog/static/97231502200921514315550 Sun, 15 Mar 2009 13:43:15 +0800 2009-03-15T13:43:15+08:00 <![CDATA[如何用css实现圆角_CSS实现圆角解决方案]]> http://iaw2001200.blog.163.com/blog/static/97231502200921194757354

如何用css实现圆角_CSS实现圆角解决方案

导言：

本文探讨的是圆角框的终极解决方案，其核心关键词是“圆滑、完美、兼容、重用性、语义”，这些技术都是收集目前网络上最流行的做法。纵观种种方法，各有其优势，请针对不同的环境分别使用。

圆角框，因为其样式比直角框漂亮，所以成为设计师心中偏爱的设计元素。现在的web标准下大量的网页、博客都采用圆角框设计，成为一道亮丽的风景线。

然而，就是这个圆角，却成为了网页前端人员心中永远抹之不去的阴影，对它，可以说是又痛又爱。爱的是它的漂亮，痛的是要让它兼容通行于各种不同的浏览器却成为一个永远的神话。

让我们来回顾一下目前网络流行的都有哪些解决方案。

第一种：无图片纯css圆角框

收录理由：兼容性强，不用图形

如何用css实现圆角_CSS实现圆角解决方案 - iaw2001200 - 网页制作CSS-iawsky

图一

特点：

  1. 不用任何图形，使用很多个div容器模拟出圆角效果。
  2. 兼容性：通杀所有浏览器

缺点：

  1. 构造这个圆角需要加入太多的无语义的标签，结构比较冗余。
  2. 重用性不强：如果一个页面有多个圆角，并且要实现不同的半径大小，则其灵活性不够。
  3. 边框颜色虽然可以调节，但会对页面中的结构产生致命的影响，适用于色彩单一并且一个页面中圆角应用不多的页面。
  4. 不容易实现圆弧内有渐变色的图形背景。

  5. 圆角框不够圆滑，有锯齿现象，适合于背景色和当前色色差不大并且圆弧较小的网页。

实现原理：

用很多1像素高的div容器，利用背景色和边框色来模拟出圆角框的轮廓线。

实例演示： http://www.cssplay.co.uk/boxes/snazzy.html

第二种：无图片纯css圆角框，用特殊字符（&bull）

收录理由：圆滑，不用图形

如何用css实现圆角_CSS实现圆角解决方案 - iaw2001200 - 网页制作CSS-iawsky

图二

特点：

  1. 不用任何图形，使用特殊字符?（圆点）模拟出圆角。
  2. 兼容性：通杀所有浏览器
  3. 圆角平滑

缺点：

  1. 构造这个圆角一样需要加入无语义的标签，结构冗余，同第一种一样。
  2. 重用性不强：如果一个页面有多个圆角，并且要实现不同的半径大小，需要调整四个角图片的定位，并且字符大小对其有影响，灵活性不够。
  3. 颜色虽可调节，但要求里面的背景色和字符的颜色相同，不能做成边框线条。适用于色彩单一并且一个页面中圆角不是太多的页面。
  4. 一样不容易实现圆弧内有渐变色的图形背景。

实现原理：

用特殊字符（&bull），利用定位，截取四分之一圆模拟出圆角框的一个角图片。

实例演示：http://www.cssplay.co.uk/boxes/curves.html

第三种：图片圆角框

收录理由：兼容性强，可以表现很复杂的圆角效果。

如何用css实现圆角_CSS实现圆角解决方案 - iaw2001200 - 网页制作CSS-iawsky

图三

特点：

  1. 使用四个圆角图形（或一个圆图片）。
  2. 兼容性：通杀所有浏览器。
  3. 这是最常用的圆角框做法。
  4. 因为采用图片来表现，所以其圆角是超级平滑，无任何锯齿现象。
  5. 表现丰富，适用于各种对图片表现要求较高的圆角框。

缺点：

  1. 构造这个圆角也需要加入四个标签来装四张角图片，结构也有冗余。
  2. 重用性不强：如果一个页面有多个圆角，并且要实现不同的半径大小，则要重新制作一套圆角图片。
  3. 如果对结构的冗余没有特别的需求，这就是超级圆滑圆角框的解决方案了。

    实现原理：

利用九宫格原理，在一个容器的四个角加入绝对定位（或相对定位）的四张圆角图片。

实例演示：http://www.cssplay.co.uk/boxes/three_cornered.html

第四种：利用VML绘制圆角（ie only）

收录理由：无图片，平滑，可加阴影边框

如何用css实现圆角_CSS实现圆角解决方案 - iaw2001200 - 网页制作CSS-iawsky

图四

特点：

  1. 不用任何图形。
  2. 兼容性：只能在IE中使用
  3. 圆角半径随意调整
  4. 重用性强：多个圆角任意调用。
  5. 圆角颜色随意设置。
  6. 结构无冗余。
  7. 圆角平滑无锯齿。

缺点：

  1. 除了兼容性 有问题外，其它方面的表现都不错。
  2. 不能在圆弧中表现丰富的有渐变的图片，因为圆弧外框是透明的。

实现原理：使用IE专用的VML来画出圆角。

<v:roundrect

id="roundbox"

class="circle"

strokecolor="red"

strokeweight="2px"

arcsize="0.08">

</ v:roundrect >

注意加入引用空间：

<html xmlns:v xmlns="http://www.w3.org/1999/xhtml">

这是兼容的用法，

xmlns:v一不能少，否则。。。

样式表中加入这一句话：

v":*{behavior:url(#default#VML);display:inline-block;}

Arcsize为半径

Strokeweight为边框线宽度

Strokecolor为边框线的颜色

实例演示：（请在IE系列浏览器下查看本实例)

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns:v xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>VML画平滑圆角框</title>

<style>

v\:*{behavior:url(#default#VML);display:inline-block;}

body{ background-color:#99FFFF;font-size:12px;}

.circle{

height:130px;

width:300px;

padding-top:8px;

margin:0px auto;

z-index:2;

margin-left:340px;

}

h1{border-bottom:2px red solid;font-size:12px;margin:4px;text-indent:1em;height:20px;}

div{font-size:12px;padding:10px;}

</style>

</head>

<body>

<v:roundrect id="roundbox" class="circle" strokecolor="red" strokeweight="2px" arcsize="0.08">

<h1>VML画平滑圆角</h1>

<div class="t1">

使用IE专用的VML来画平滑圆角框，还可以画出阴影效果。就其图形表现来说，是非常完美的。

</div>

<v:shadow on="t" color="#777" opacity="52428f" offset="1.5pt,1.5pt"/>

</v:roundrect>

</body>

</html>

第五种：利用私有属性绘制圆角（FF3 only）

收录理由：平滑无锯齿

如何用css实现圆角_CSS实现圆角解决方案 - iaw2001200 - 网页制作CSS-iawsky

图五

特点：

  1. 不用任何图形。

  2. 兼容性：只能在FF3中使用，其它浏览器不受支持。

  3. 圆角半径随意调整

  4. 重用性强：多个圆角任意调用，只需要样式表设置就可以。

  5. 圆角颜色随意设置。

  6. 结构无冗余。

  7. 圆角平滑无锯齿。

缺点：

  1. 除了兼容性 有问题外，其它方面的表现都不错，这种方式应该是最完美的方式，可惜目前只有FF3能支持这个属性，以后CSS3后会支持这个属性，不过这不知道要等到多少年以后。

  2. 同第五种圆角一样，在处理圆弧内的图片背景时显得有些有心无力。

实现原理：

使用FF3专用的私有属性来画出圆角。

只用两种属性就能体现圆滑的圆角框

-moz-border-radius:10px;/*圆角半径*/

Border:5px red solid;/*边框大小*/

实例演示：（请在FF3浏览器下观看，其它浏览器不支持）

代码如下:

<!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>FF3下的圆角框</title>

<style type="text/css">

body{background:#CCCCCC;}

.round{

-moz-border-radius:20px;/*半径*/

border:4px solid #333;/*边框宽度*/

margin:50px auto;width:30%;height:150px;font-size:12px;

}

h1{border-bottom:4px #333 solid;font-size:12px;width:100%;padding:5px 0;text-indent:1em;}

.context{font-size:12px;padding:10px;}

</style>

</head>

<body>

<div class="round">

<h1>FF3私有属性画的圆角框</h1>

<div class="context">

<p>FF3下的圆角框两个属性就可以解决:</p>

<p>-moz-border-radius：半径</p>

<p>border：边框 </p>

</div>

</div>

</body>

</html>  

第六种：无图片脚本圆角框（js半完美解决方案）

这种方案目前应该是比较完美的方案了。

如何用css实现圆角_CSS实现圆角解决方案 - iaw2001200 - 网页制作CSS-iawsky

图六

特点：

  1. 不用任何图形。

  2. 兼容性：通杀所有浏览器

  3. 圆角半径随意调整

  4. 重用性强：多个圆角任意调用。

  5. 颜色随意设置，并且可以使用复杂的图片做为背景，表现丰富。

  6. 结构无冗余，只需要在容器上定义一个class或ID就可以将这个div变成圆角。

  7. 圆角平滑。

缺点：

  1. 客户端禁用JS时就无圆角，不过在目前情势下，这种情况应该不会成为太大的问题。

实例演示：http://www.curvycorners.net/examples.php（有三个演示例子）

结语：

目前的css因为不能为一个容器中定义多张背景图片，造成了为了这种圆角效果而加入冗余标签。听说CSS3会引入这一属性，可能到哪时，就是圆角框统一的时候了。另外也听说在CSS3中有意向加入像FF3私有属性（-moz-border-radius）的方法，这也可以完美地解决这个问题。但在目前的情势下，可能也只有用上面的这些方法来过渡了，强烈期待CSS3的到来。

总而言之：要实现绝对的完美圆角框在目前的形势下基本上是不可能的，所以取名为“半完美解决方案”。

]]> http://iaw2001200.blog.163.com/blog/static/97231502200921194757354 0 http://iaw2001200.blog.163.com/blog/static/97231502200921194757354 Wed, 11 Mar 2009 21:47:57 +0800 2009-03-11T21:47:57+08:00 <![CDATA[CSS教程:不同浏览器中inline-block的显示问题(超祥细版)]]> http://iaw2001200.blog.163.com/blog/static/97231502200926103331930

CSS教程:不同浏览器中inline-block的显示问题(超祥细版)

本文内容提要: 在CSS+DIV网页布局时,多块内容向左浮动并排中.其中一块内容比较多而破坏整个网页布局的问题.inline-block，挺难琢磨的声明上承诺了很多，其实提供了很少。

先来看一看下面的PSD文件.相信很多网页制作者都已经看过这种布局.而我拿到类似这样的

CSS教程:不同浏览器中inline-block的显示问题(超祥细版) - iaw2001200 - 网页制作CSS-iawsky

就哭了。

一般说来，这种类型的布局是小菜一桩。固定宽度，固定高度，向左浮动就解决了。但是，这个设计中内容的多少是可变的，这就意味着如果这些块中的一些内容比其他的多，就会破坏这个布局。

CSS教程:不同浏览器中inline-block的显示问题(超祥细版) - iaw2001200 - 网页制作CSS-iawsky

因为第一个展示项比其他项高，第五个项目就相对第一个浮动，而不是位于它下面了。基本上我们想要一个弹性表格的布局，但是适当的，语义标记。

我们以一个无序列表开始这个简单的页面，并把 display 设置为 inline-block:

<ul> <li> <h4>This is awesome</h4> <img src="/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75"/> </li>...<ul>

>

效果在 Firefox 3， Safari 3 和 opera 中看起来没问题：

CSS教程:不同浏览器中inline-block的显示问题(超祥细版) - iaw2001200 - 网页制作CSS-iawsky

显然，在垂直排列上有些错误。嗯，也不算错误吧，这是正确的表现，只不过不是我们想要的效果。

这是因为每个

  • 元素的基线是和其父元素
      的基线对齐排列的。你要问啥是基线？一图顶千言那：

      CSS教程:不同浏览器中inline-block的显示问题(超祥细版) - iaw2001200 - 网页制作CSS-iawsky

      基线就是横贯上面文本的黑线。尽量说的简单点。inline 或者 inline-block 元素默认的 vertical-align 值 就是基线。也就是说元素基线要和她父元素的基线对齐。下面有一个示例：

      CSS教程:不同浏览器中inline-block的显示问题(超祥细版) - iaw2001200 - 网页制作CSS-iawsky

      就如所看到的，每个基线都是和文本 ‘This is the baseline.’ 的基线对齐的。文本虽然不在

    • 内部，但是文本节点的父元素
        就指出了父元素的基线所在。

        总之，修正方法是很简单的： vertical-align: top，这样就能得到一个看起来不错阿网格：

        CSS教程:不同浏览器中inline-block的显示问题(超祥细版) - iaw2001200 - 网页制作CSS-iawsky

        但是在 Firefox 2, IE 6 和 7 中，依然无效：

        CSS教程:不同浏览器中inline-block的显示问题(超祥细版) - iaw2001200 - 网页制作CSS-iawsky

        从 Firefox 2 入手。

        Firefox 2 不支持 inline-block，但是它支持 Mozilla 特有的显示属性 ‘-moz-inline-stack’，这个属性和 inline-block 比较像。把它加在 display: inline-block 之前，FF2 会忽略 inline-block 而保留 -moz-inline-stack，因为它不认识 inline-block。支持 inline-block 的浏览器会使用 inline-block 而忽略之前的显示属性。

        li { width: 200px; min-height: 250px; border: 1px solid #000; display: -moz-inline-stack; display: inline-block; vertical-align: top; margin: 5px;}

        不幸的是，有点小bug：

        CSS教程:不同浏览器中inline-block的显示问题(超祥细版) - iaw2001200 - 网页制作CSS-iawsky

        坦白地说，我不知道什么导致了这个 bug。但是有个快速的修正方法。把

      • 中所有的东西用

        包含起来。

        <li> <div> <h4>This is awesome</h4> <img src="/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75"/> </div></li>

        貌似

      • 中的内容被’重置’并且正确显示了。

        CSS教程:不同浏览器中inline-block的显示问题(超祥细版) - iaw2001200 - 网页制作CSS-iawsky

        现在，转到 IE 7 上来。IE 7 也不支持 inline-block，但是我们可以欺骗它以使

      • 好像是 inline-block 的。怎么做呢？hasLayout，IE 的一个带来乐趣的神奇属性。你无法在一个元素上用 hasLayout: true; 显示地设置 hasLayout，或通过其他类似的简单方法，但是可以用其他类似 zoom:1 的声明来激发它。

        技术上来说，hasLayout 意味着，一个 hasLayout 设为 true 的元素负责渲染它自己及其子元素(把它和 min-height 和 width 联合起来，就得到了和 display:block 非常相似的效果)。这有点像神奇的精灵粉，把它洒在渲染问题上，问题就消失了。

        当我们给

      • 加上 zoom:1 和 *display:inline(区分 IE6 和 IE7 的星号 hack) 之后，在 IE7 中它们就可以像 inline-block 一样显示了：

        li { width: 200px; min-height: 250px; border: 1px solid #000; display: -moz-inline-stack; display: inline-block; vertical-align: top; margin: 5px; zoom: 1; *display: inline; }

        CSS教程:不同浏览器中inline-block的显示问题(超祥细版) - iaw2001200 - 网页制作CSS-iawsky

        哇！差不多了，只剩 IE 6 了：

        CSS教程:不同浏览器中inline-block的显示问题(超祥细版) - iaw2001200 - 网页制作CSS-iawsky

        IE6 不支持 min-height，但是多亏它对 height 属性的不正确处理，我们可以用它来代替。把 _height(IE6 下划线 hack) 设为 250px 使所有的

      • 元素高度为 250px，并且如果它们的内容大于 250px，他们会扩大来适应。其他所有的浏览器会忽略 _height。

        现在为止，对所有的浏览器都有效了，这是最终的 CSS 和 HTML：

        >

        <li> <div> <h4>This is awesome</h4> <img src="/3623/3279671785_d1f2e665b6_s.jpg" alt="lobster" width="75" height="75"/> </div></li>

        本文所提出的问题,相信有过网页布局经验的朋友都碰到过.希望本文对你有些帮助.

      • 怎样制作网页,就上网站制作教程网:http://www.web2bar.cn/Article/3484.aspx

    • ]]>     http://iaw2001200.blog.163.com/blog/static/97231502200926103331930 0 http://iaw2001200.blog.163.com/blog/static/97231502200926103331930 Fri, 6 Mar 2009 22:33:31 +0800 2009-03-06T22:33:31+08:00     <![CDATA[CSS学习者,你处在什么等级?]]> http://iaw2001200.blog.163.com/blog/static/9723150220092411226614

           CSS(层叠样式表),可能看过网站制作教程网基础教程的人都知道大概是什么回事.本文来测一下,你学习CSS现在处于怎么一个阶段或者说处在一个什么等级.

           本文总共将CSS学习者从低到高分为六个等级.快来看看你是在哪个等级.

    　　第0级：CSS？什么CSS,是不是CS啊.那游戏我玩过呀.是个多人游戏呀

    　　CSS? Isn't that a multiplayer game?

    　　有些人因为在找CS:S（Counter Strike: Source）这款游戏的资讯而进到#CSS网站。不必担心这些人，他们不可能制作太多网页，所以对网络也不会造成多大伤害。

    　　第1级：CSS我知道啊.也用.我偶尔用它来移除连结的底线

    　　CSS Yeah, I use it to remove underlines on links sometimes

    　　和第0级的人不同，这些人学过HTML，也制作过几个简单的网站。他们只有在无法使用HTML制作出某些效果时，才会使用CSS，例如移除连结的底线或者设定行高。这些人的网站通常规模不大也没什么访客，所以他们也不会对网络造成太大伤害。

    　　第2级：不，我不喜欢div元素；表格好用多了！

    　　No, I don't like divs; tables are much easier to work with

    　　他们听过使用div元素来设计网页这件事，也花了些时间学习CSS。不过他们很快就放弃了，觉得CSS太难而且支持度不佳，还是宁可用表格排版。

    注意！他们是危险人物！他们在这个领域已经待了一段时间，许多都是网站部门的主管。和他们接触是很重要的，提倡网络标准的人应该多多开导他们，这对网络的意义非同小可。

    　　第3级：是啊，听说它挺好的，不过我没用它因为……

    　　Yes I've heard it's good, but I can’t use it because of…

    　　这些人虽然知道CSS的优点，不过总是基于某些原因而无法使用它，例如他们可能有第2级的上司，或者他们必须考虑到Netscape 4的使用者。

    　　旧版的浏览器虽然不支持CSS，不过使用者还是可以看见完整的内容。而基于亲和力（accessibility）和易用性（usability）的好 处，CSS可以为网站带来更多访客。把这些优点告诉第3级的开发人员，即使他们不是决策者，或许多少能对第2级的上司发挥点影响力吧。

    　　第4级：CSS？喔！没错，我用div元素来排版

    　　CSS? Oh! Yes, I use divs for all my layouts

    　　在页面中使用过多的div元素反而是这群人的问题，他们会用#toprightredline或是#r5_c7（表示第5列第7栏）这样的方式设定div元 素的id。即使可以通过XHTML 1.1的验证，这种排版方式却无法发挥CSS的优势。荧幕朗读软体（screen readers，视障者使用的浏览器）很难解译这些网页，旧版浏览器也会有同样的问题，网页的内容无法完整显示。而不良的class与id命名方式，也对 于版面的修改造成极大不便。

    虽然第4级的人制作的网站仍然很糟，不过由于他们很容易接受新的观念，因此对网络造成的伤害较小。许多所见即所得（WYSIWYG）的编辑器制作出充满div元素的原始码，可能也是误导这群人的原因。幸好这些编辑器已经逐渐改良了，希望这会有助于第4级的人继续往上提升。

    　　第5级：我用CSS来设计，这比表格好多了，因为……

    　　I use CSS for design, it's better than tables because of…

    　　第5级的人知道CSS的优点并乐于使用，虽然有时会遇到些问题，但并不严重。他们也能运用长期的CSS工作经验，与人辩论为什么要将网页的结构与设计分开。我猜这篇文章大部分的读者是这一级的CSS开发人员，我想我自己也是。不过这还不是最好的……

    　　第6级：哪个版本的CSS？是的，我知道啊。你有读过我的书关于……

    　　What version of CSS? Yes, I do. Did you read my book about…

    　　第6级的人致力于改良CSS，并且写了许多很棒的文章介绍它的新用法。其中有些人将W3C关于CSS的说明文件全部读完了，并且知道哪些功能在哪个版本的浏 览器才有支持。他们是CSS初学者的典范，并且运用他们的影响力使网络更加进步。其中有许多人组成了Web Standards Project，如果你在他们的网站上面发现任何错误，那一定是有理由的，向他们请教之后你必能获得满意的解答。

              不管你处于哪个等级.只要认识学习.但一定要认清楚.CSS网页布局与表现的分离是一定有好处的.

               http://www.web2bar.cn/Article/3462.aspx

    ]]>     http://iaw2001200.blog.163.com/blog/static/9723150220092411226614 0 http://iaw2001200.blog.163.com/blog/static/9723150220092411226614 Wed, 4 Mar 2009 23:02:26 +0800 2009-03-04T23:02:26+08:00     <![CDATA[也来谈谈CSS模块化思想]]> http://iaw2001200.blog.163.com/blog/static/97231502200924105943273

    实想重提下那个话题，一直都在忙这忙那的没时间。好不容易到一个周末了，原定安排是去D2的但是因为时间安排不过来，所以能抽空写写。早前的讨论不了了之，其实这一点都不是Twinsen的风格。

    名字，你看名字多重要，我不太清楚。我写书的话我的书被人改变名称去误导别人我是不喜欢的。这是我一直说的作为一个技术人员应当遵守的准则——互联网创作共享协议。我不能抄一个刚入门的小朋友Idea（因为他们思维没被禁锢），然后换一套名称和说法说是自己的。sorry，我做不到。

    不过其实这片文章只是Twinsen的一个想法了，可以说比较的疯狂。另外顺带一提的是这里的是Twinsen的站点，并不是腾讯的站点。这里的东西并不是代表腾讯的观点和角度。

    引用森林群的谈话内容：

    技术人员的争论就是技术人员争论，谈锤子政治和外交。要叼冲我来，我是非常乐意被叼的。是啊，我很犯贱；你叼我就是塞钱进我的袋子里面。正如我常说的那句话：“SB之所以继续为SB是因为他压根就从来没有意识到自己是一个SB。”粗俗？但是原话是心理学家弗洛伊德说的哦：“人总是先有自我认知才会再有自我超脱的。”我现在就是到了自我认知的瓶颈了，所以要创造这样的环境逼迫我自我认知。

    另外说到网格的内容，为什么我反对这个思想的流传？首先声明的我不是反对关于设计的网格化，我是反对重构的网格化。这里应该特指是 YUI方式 的类名绑定式的网格化。大家可以看看下面的一段代码：

    <div id="yui-main">

    <div class="yui-b">

    <div class="yui-g">

    <div class="yui-u first"></div>

    <div class="yui-u"></div>

    </div>

    </div>

    </div>

    大家可以很清晰的看到这里的yui-u，或者yui-g他的名称是并无意义的。还有与表现相关的first。不知道大家都看过的《网站重构》一书当时配同的PPT里面的一句话——“把页面中的外观标记去除以后，重新设计现有的站点和内容将变得非常节省人力 (同时便宜得多)。如果想改变站点的输出，你只需要改动一下样式表就行了，而完全不必改动页面本身。”像上面的那段代码不能达到结构、表现、行为三者分离，如果强行改变会出现下面的一些问题：

    1. 改变表现的时候必须动到html，一次美观上面的修改要动到三条工作线，极大的人力资源耗费。
    2. 会出现排在第五个的叫做“first”的框
    3. 会出现实际为240宽的叫做“180宽”的框
    4. 会出现实际为三列的叫做“四列”的布局
    5. 会出现实际为红色的叫做“blue”的字

    这些也就是相当于现在很多人流行的“left_box”和“right_box”，快速改版以后变成了在左边的“right_box”。这不就是相当于歪曲事实的真理么？但其实最重要的是第一点，这样的工作方式和我们以往的table布局工作方式有差别么？你提个改个样式需求，全公司（设计、页面、开发、功能测试、CE数据监测）都跟着你去跑，这是很不智的。

    写到这里回看下，顺带改了改标题变成《这将是一场革命》系列的第二篇关于CSS的文章算了。上面说完不对的，下面给大家看看一个我最近刚接手的一个新版项目代码段：

    HTML片断：

    <div id="index_news" class="mode">

    <h3 class="title">公益新闻</h3>

    <div class="content">

    <ul>

    <li><a href="#">新闻标题，新闻标题，新闻标题，新闻标题</a></li>

    <li><a href="#">新闻标题，新闻标题，新闻标题，新闻标题</a></li>

    <li><a href="#">新闻标题，新闻标题，新闻标题，新闻标题</a></li>

    <li><a href="#">新闻标题，新闻标题，新闻标题，新闻标题</a></li>

    <li><a href="#">新闻标题，新闻标题，新闻标题，新闻标题</a></li>

    <li><a href="#">新闻标题，新闻标题，新闻标题，新闻标题</a></li>

    <li><a href="#">新闻标题，新闻标题，新闻标题，新闻标题</a></li>

    <li><a href="#">新闻标题，新闻标题，新闻标题，新闻标题</a></li>

    </ul>

    </div>

    <a class="more" href="#">更多</a> </div>

    CSS片断：

     .mode{

    position:relative;

    float:left;

    font-size:12px;

    }

    .mode h3.title,

    .mode h4.title{

    color:#234C00;

    padding:5px 10px;

    font-size:14px;

    }

    .mode .more{

    top:5px;

    right:10px;

    font-size:12px;

    color:#4282ab;

    position:absolute;

    }

    .mode .content{

    clear:both;

    }

    .mode .content:after {

    content:"";

    display:block;

    height:0;

    line-height:0;

    clear:both;

    visibility:hidden;

    }

    #index_news.mode,

    #index_bbs.mode,

    #index_area.mode{

    background:url(small_gray_grid.png) repeat-y -400px bottom;

    width:200px;

    margin:5px 0 5px 5px;

    }

    #index_news.mode h3.title,

    #index_bbs.mode h3.title{

    background:url(small_gray_grid.png) no-repeat -200px top;

    }

    #index_news.mode .content,

    #index_bbs.mode .content,

    #index_area.mode .content{

    background:url(small_gray_grid.png) no-repeat -600px bottom;

    display:table;

    }

    大家可以看到模块化思想的优势在于哪：

    1. 可以半自动化的取用当前已有的模块来节省代码开发时间以及精力。
    2. 可以高度自由化的适应任何产品经理、任何老板的不同变态需求。
    3. 任何关于表现上面的修改不需要动用到开发人员，不需要功能测试。
    4. CE数据监测绑定到id，不需要重新调整接口。
    5. 每个人担任单个模块的快速迭代开发。

    另外就代码而言。标题就是标题，内容就是内容；总不会那种歪曲事实、自己打自己嘴巴的状态。

    引用内容：

    我有个怪癖。我很喜欢在面试的时候我总是要先考面试人XHTML。就好像以前师傅招收学徒一样，能力和慧根属其次，人品首当其冲。

    我以为，XHTML好比一个人的本质，CSS好比人的处事方式和态度，JS好比人做事的行为以及作风。三者的分离再加上些周边的SEO、人机交互也就是我们所说的网站重构，也就是一个很不错的人。之前总是有一部分人认为CSS就是网站的最主要的元素，其实自然而然的也就代表了一种人生观。的确，一个人没有好的处事方式和态度很难在现在的社会很好的存活；但是这个处事的方式和态度位置过于偏重了，就成了一个善于欺骗、做事不择手段的人。

    这个是一直想说的，有了CSS你可以将左右顺序变成右左顺序，他就是一个网页中的魔术师。你总不能把他乱用，去成了一个善于欺骗、做事不择手段的人。

    转自:如何制作网页教程站:http://www.web2bar.cn/Article/3471.aspx

    ]]>     http://iaw2001200.blog.163.com/blog/static/97231502200924105943273 0 http://iaw2001200.blog.163.com/blog/static/97231502200924105943273 Wed, 4 Mar 2009 22:59:43 +0800 2009-03-04T22:59:43+08:00     <![CDATA[2009年3月3日]]> http://iaw2001200.blog.163.com/blog/static/972315022009238584354

    CSS盒模型

    本节的内容非常重要，因为盒模型是CSS布局的核心内容。从前面章节中，读者学习了布局网页基本方法，只需利用p元素和列表元素，即可完成页面大部分的布局工作。但是前面学习的知识更注重实践操作，读者并不理解布局的原理，常常在布局页面的过程中遇到无法理解的问题，需要一步步重复地“试错”才能完善布局代码的编写。学习本章的盒模型的知识以后，读者将拥有较完善的布局观，基本可做到在代码编写前就“胸有成竹”。

     11.3.1  什么是CSS盒模型

    XHTML中大部分的元素（特别是块状元素）都可以看做一个盒子，而网页的元素的定位实际就是这些大大小小的盒子在页面中的定位。这些盒子在页面中是“流动”的，当某个块状元素被CSS设置了浮动属性，这个盒子就会“流”到上一行。网页布局即关注这些盒子在页面中如何摆放、如何嵌套的问题，而这么多盒子摆在一起，最需要关注的是盒子尺寸计算、是否流动等要素。

    为什么要把XHTML元素作为盒模型来研究呢？因为XHTML元素的特性和一个盒子非常相似，如图11.18所示。

    2009年3月3日 - iaw2001200 - 网页制作CSS-iawsky

    图11.18  盒模型示意图

    大多数XHTML元素的结构都类似于图11.18所示，除了包含的内容（文本或图片）外，还有内边距、边框和外边距一层层的包裹。读者在布局网页和定位XHTML元素时要充分地考虑到这些要素，才可以更自如地摆弄这些盒子。

    外边距属性即CSS的margin属性，CSS中可拆分为margin-top（顶部外边距）、margin-bottom（底部外边距）、margin-left（左边外边距）和margin-right（右边外边距）。CSS的边框属性（border）和内边距属性（padding）同样可拆分为4边。在Web标准中，CSS的width属性即为盒子所包含内容的宽度，而整个盒子的实际宽度即为：

    盒子宽度=padding-left+border-left+margin-left+width+padding-right+border- right+margin-right

    相应地，CSS的height属性即为盒子所包含内容的高度，而整个盒子的实际高度即为：

    盒子高度=margin-top+border-top+padding-top+height+padding-bottom+border -bottom+margin-bottom

     11.3.2  外边距的控制

    在CSS中，margin属性可以统一设置，也可以上下左右分开设置。在D:\web\目录下创建网页文件（XHTML1.0），命名为box_margin.htm，编写box_margin.htm文件代码如代码11.17所示。

    代码11.17  外边距设置：box_margin.htm

    <!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=gb2312" />

    <title>外边距设置</title>

    <style type="text/css">

    *{margin: 0px;}

    #all{width:400px;

         height:300px;

         margin:0px auto;  

         background-color:#ccc;}

    #a,#b,#c,#d,#e{width:150px;

                   height:50px;

                   text-align:center;

                   line-height:50px;

                   background-color:#fff;}

    #a{margin-left:5px;

       margin-bottom:20px;}

    #b{margin-left:5px;  

       margin-right:5px;  

       margin-top:6px;

       float:left;}

    #c{margin-bottom:5px;}

    #e{margin-left:5px;

       margin-top:15px;}

    </style>

    </head>

    <body>

    <p id="all">

       <p id="a">a盒子</p>

       <p id="b">b盒子</p>

       <p id="c">c盒子</p>

       <p id="d">d盒子</p>

       <p id="e">e盒子</p>

    </p>

    </body>

    </html>

    为了更方便看到p的表现，笔者给外部p设置了浅灰色背景色，并给内部p设置了白色背景色。在浏览器地址栏输入http://localhost/box_margin.htm，浏览效果如图11.19所示。这个示例非常典型，特别是b盒子、c盒子和d盒子之间的关系，笔者作关系图如图11.20所示。

    2009年3月3日 - iaw2001200 - 网页制作CSS-iawsky    2009年3月3日 - iaw2001200 - 网页制作CSS-iawsky

                 图11.19  外边距设置                          图11.20  外边距关系图

    由于b盒子设置了向左浮动，所以紧随其后的c盒子自然“流”上来，和b盒子并列同一行，如图11.20所示，b盒子的高度为：

    height+margin-top=56（像素）

    而c盒子的高度为：

    height+margin-bottom=55（像素）

    可见，在这一行中c盒子下面留有1像素的空隙，正是d盒子利用这1像素的空间“流”上来，所以b盒子、c盒子和d盒子存在于同一行。

    —  说明：读者可以尝试把b盒子的顶部边距设置为5像素，这时b盒子和c盒子高度一致。d盒子无法“流”上来，d盒子将自动换行，位于b盒子下面。

     11.3.3  边框的样式设置

    边框（border）作为盒模型的组成部分之一，其样式非常受重视。边框的CSS样式设置不但影响到盒子的尺寸，还影响到盒子的外观。边框（border）属性的值有3种，边框尺寸（像素）、边框类型和边框颜色（十六进制）。在D:\web\目录下创建网页文件（XHTML1.0），命名为box_border.htm，编写box_border.htm文件代码如代码11.18所示。

    代码11.18  边框样式设置：box_border.htm

    <!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=gb2312" />

    <title>边框样式设置</title>

    <style type="text/css">

    * {margin: 0px;}

    #all{width:400px;

         height:270px;

         margin:0px auto;  

         background-color:#ccc;}

    #a,#b,#c,#d,#e,#f,#g{width:160px;

                   height:50px;

                   text-align:center;

                   line-height:50px;

                   background-color:#eee;}

    #a{width:380px;

       margin:5px;

       border:1px solid #333;}

    #b{border:20px solid #333;

       float:left;}

    #c{margin-left:5px;

       border:20px groove #f00;}

    #d{margin-left:5px;

       border:2px dashed #000;

       float:left;}

    #e{margin-left:5px;

       border:2px dotted #000;

       float:left;}

    #f{margin:5px;

       border-left:2px solid #fff;

       border-top:2px solid #fff;

       border-right:2px solid #333;

       border-bottom:2px solid #333;

       float:left;}

    #g{margin-top:5px;

       border-top:2px groove #333;}

    </style>

    </head>

    <body>

    <p id="all">

       <p id="a">a盒子</p>

       <p id="b">b盒子（solid类型）</p>

       <p id="c">c盒子（groove类型）</p>

       <p id="d">d盒子（dashed类型）</p>

       <p id="e">e盒子（dotted类型）</p>

       <p id="f">f盒子</p>

       <p id="g">g盒子</p>

    </p>

    </body>

    </html>

    为了更方便看到p的表现，笔者给外部p设置了#ccc背景色，并给内部p设置了#eee背景色。在浏览器地址栏输入http://localhost/box_border.htm，浏览效果如图11.21所示。

    2009年3月3日 - iaw2001200 - 网页制作CSS-iawsky

    图11.21  边框样式设置

    这个例子使XHTML对象看起来更像个盒子了，只是边框只是盒子包装中的一层，最外层的包装是不可见的外边距。边框的宽度计算非常重要，如果读者定位元素要充分考虑边框宽度，如图11.21所示，边框的常用设置方法为：

    border:宽度类型 颜色;

    这是4条边框统一的设置方法，如果要分开设置4条边框，将border改为border-top（顶部边框）、border-bottom（底部边框）、border-left（左边框）和border-right（右边框）。而修改“类型”可以修改成不同样子的边框线条，常用的为solid（实线）、dashed（虚线）、dotted（点状线）、groove（立体线）、double（双线）、outset（浮雕线）等，读者可以一一尝试。

     11.3.4  内边距的设置

    内边距（padding）类似于HTML中表格单元格的填充属性，即盒子边框和内容之间的距离。内边距（padding）和外边距（margin）很相似，都是不可见的盒子组成部分，只不过内边距（padding）和外边距（margin）之间夹着边框。在D:\web\目录下创建网页文件（XHTML1.0），命名为box_padding.htm，编写box_padding.htm文件代码如代码11.19所示。

    代码11.19  内边距的设置：box_padding.htm

    <!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=gb2312" />

    <title>内边距的设置</title>

    <style type="text/css">

    * {margin: 0px;}

    #all{width:360px;

         height:300px;

         margin:0px auto;  

         padding:25px;

         background-color:#ccc;}

    #a,#b,#c,#d,#e,#f,#g{width:160px;

                     height:50px;

                   border:1px solid #000;

                   background-color:#eee;}

    p{width:80px;

      height:30px;

      padding-top:15px;

      background-color:#cc9;}

    #a{padding-left:50px;}

    #b{padding-top:50px;}

    #c{padding-right:50px;}

    #d{padding-bottom:50px;}

    </style>

    </head>

    <body>

    <p id="all">

       <p id="a">

          <p>a盒子</p>

       </p>

       <p id="b">

          <p>b盒子</p>

       </p>

       <p id="c">

          <p>c盒子</p>

       </p>

       <p id="d">

          <p>d盒子</p>

       </p>

    </p>

    </body>

    </html>

    为了更方便看到p的表现，笔者给外部p设置了#ccc背景色，并给内部p设置了#eee背景色，而p元素设置了#cc9背景色。在浏览器地址栏输入http://localhost/box_padding.htm，浏览效果如图11.22所示。

    2009年3月3日 - iaw2001200 - 网页制作CSS-iawsky

    图11.22  内边距的设置

     11.3.5  盒模型兼容问题

    微软的IE 6.0以后的版本在浏览器内嵌了两种表现模式：标准模式和兼容模式。在标准模式中，浏览器根据W3C所定的规范来显示页面；而在兼容模式中，页面将以IE 5.0，甚至IE 4.0的显示页面的方式来表现，使以前的网页也能正常显示。这两种模式最大的问题就是盒模式的兼容问题，但是，IE在兼容模式下运行的盒模式依然在最新版本的IE 7.0保留着，一旦页面使用兼容模式浏览，IE 7.0将变成跟IE 5.0一样不兼容Web标准。

    不仅IE浏览器，其他浏览器都有类似的多种解析模式，如Opera浏览器、FireFox浏览器等。使用浏览器不同的模式通过不同的DTD（文档类型声明）来实现，在早期的HTML页面制作中，html声明部分直接使用的：

    <html></html>

    这样的页面在浏览器中浏览时会使用兼容模式，如果HTML页面使用以下DTD声明。

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    或：

    <!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">

    前者代表HTML 4.0的严格类型的文档类型声明，后者代表XHTML的文档类型声明，这2种DTD将使浏览器使用标准模式。

    —  说明：虽然IE 6.0和IE 7.0浏览器对Web标准没有实现完全兼容，但相对于以前的版本，IE标准化程度提高了很多。所以读者制作标准页面，应使用XHTML的DTD。

    如何制作网页教程网:http://www.web2bar.cn/Article/3464.aspx

    ]]>     http://iaw2001200.blog.163.com/blog/static/972315022009238584354 0 http://iaw2001200.blog.163.com/blog/static/972315022009238584354 Tue, 3 Mar 2009 20:58:04 +0800 2009-03-03T20:58:04+08:00     <![CDATA[CSS缩写属性介绍]]> http://iaw2001200.blog.163.com/blog/static/97231502200901584534775 　网页制作教程:CSS缩写属性介绍

            经常写CSS的网页制作者,对CSS的缩写一定不会陌生.相对于刚学习CSS的新手来说.要记住这么多缩写的语法并不容易.本文把CSS中可以缩写的一些属性列出来.并列出他们缩写时的语法.希望能对刚入门的朋友有点帮助.

    　　Background(背景)：背景附件、背景颜色、背景图像、背景位置、背景重复

    　　Border(边框)：边框颜色、边框风格、边框宽度

    　　border-bottom(底部边框)：底部边框颜色、底部边框样式、底部边框宽度

    　　border-left(左侧边框)：左侧边框颜色、左侧边框样式、左侧边框宽度

    　　border-right(右侧边框)：右侧边框颜色、右侧边框样式、右侧边框宽度

    　　border-top(顶部边框)：顶部边框颜色、顶部边框样式、顶部边框宽度

    　　cue(声音提示)：前提示、后提示

    　　font(字体)：字体、字号、字体样式、字体粗细、字体变体、线高度、字体大小调整、字体拉伸

    　　list-style(列表样式)：列表样式图像、列表样式位置、列表样式类型

    　　margin(空白)：顶部空白、右侧空白、底部空白、左侧空白

    　　outline(大纲)：大纲颜色、大纲样式、大纲宽度

    　　padding(间隙)：顶部间隙、右侧间隙、底部间隙、左侧间隙

    　　pause(暂停)：后暂停、前暂停

            本文你不可以拿来背下来,只是用到时不知道什么意思.可以有个对照.到后来写多了自然就不用看这些了.

    ]]>     http://iaw2001200.blog.163.com/blog/static/97231502200901584534775 0 http://iaw2001200.blog.163.com/blog/static/97231502200901584534775 Thu, 15 Jan 2009 20:45:34 +0800 2009-01-15T20:45:34+08:00     <![CDATA[CSS教程:display:inline-block属性]]> http://iaw2001200.blog.163.com/blog/static/97231502200811149361067         在使用 CSS 实现表现的时候，会经常接触到 display:inline-block 这一属性，大都会对这一属性感觉很模糊。


    　　display:inline-block


    　　将对象呈递为内联对象，但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在同一行内，允许空格。

    　　但对于这个属性不是所有浏览器都识别。
    　　支持的浏览器有：Opera、Safari。

    　　但很遗憾，最流行的 IE 和 Firefox 却不支持这个属性.不过 Firefox 下却有私有属性 -moz-inline-box 和inline-block 形似，为什么是“形似”而不是“神似”呢？这是因为使用 -moz-inline-box 会带来很多意想不到的后遗症，比如使用这一属性后，text-align 有时候就会有问题，还得改用 Firefox 的私有属性 -moz-box-align 来解决。

    　　建议：最好不要使用 Firefox 私有属性 -moz-inline-box。

    　　或许有朋友会对上面所说的 IE 也不支持 display:inline-block 属性，表示疑问或者反对。说：“我在 IE 中对 a 或者 span 等内联元素使用 display:inline-block 一直是有效的”。

    　　其实不然，在IE中对内联元素使用 display:inline-block，IE 是不识别的，但使用 display:inline-block 在 IE 下会触发 layout，从而使内联元素拥有了display:inline-block 属性的表像。从上面的这个分析，也不难理解为什么 IE 下，对块元素设置 display:inline-block 属性无法实现 inline-block 的效果。这时块元素仅仅是被 display:inline-block 触发了 layout，而它本就是行布局，所以触发后，块元素依然还是行布局，而不会如 Opera 中块元素呈递为内联对象。

    　　延伸一个问题：IE下块元素如何实现 display:inline-block 的效果？

    　　有两种方法：

    　　1、先使用 display:inline-block 属性触发块元素，然后再定义 display:inline，让块元素呈递为内联对象（两个display 要先后放在两个 CSS 声明中才有效果，这是 IE 的一个经典 bug ，如果先定义了 display:inline-block，然后再将 display 设回 inline 或 block，layout 不会消失）。代码如下（…为省略的其他属性内容）：
    div {display:inline-block;...}div {display:inline;}


    　　2、直接让块元素设置为内联对象呈递（设置属性 display:inline），然后触发块元素的 layout（如：zoom:1 等）。代码如下：

    div {display:inline; zoom:1;...}

    原文转自:http://www.web2bar.cn/Article/3107.aspx

    ]]>     http://iaw2001200.blog.163.com/blog/static/97231502200811149361067 0 http://iaw2001200.blog.163.com/blog/static/97231502200811149361067 Sun, 14 Dec 2008 21:36:10 +0800 2008-12-14T21:36:10+08:00     <![CDATA[网页制作教程之样式表CSS优先权规则]]> http://iaw2001200.blog.163.com/blog/static/972315022008111493431802

    网页制作教程之样式表CSS优先权规则

    发现很多朋友对 CSS 的优先权不甚了解,故此将这片文章发上来和大家分享

    优先权其实会涉及到很多继承的问题。

    本文概括的讲述了优先权的相关知识。

    在实际开发中，需要注意经验的总结与记忆。

    只有理解与形象的东西，才能更好的吸收与应用。

    规则很简单。需要说明的一点，如果你的样式表管理需要深层判断 CSS 的优先权，更应反思自己的 CSS 代码，是否合理？是否优化？

    CSS2.1 中规定了关于 CSS 规则 Specificity（特异性）的计算方式，用一个四位的数字串（注：CSS2 中是用三位）来表示，最后以 Specificity 的高低判断 CSS 的优先权。

    Specificity 具体的计算规则：

    1.元素的 style 样式属性，加 1,0,0,0。

    2.每个 ID 选择符（#id），加 0,1,0,0。

    3.每个 class 选择符（.class）、每个属性选择符（例 [attr=”"] ）、每个伪类（例 :hover），加 0,0,1,0。

    4.每个元素或伪元素（例 :firstchild）等，加 0,0,0,1。

    5.其他选择符（例 全局选择符 *，子选择符 >），加 0,0,0,0。

    最后逐位相加数字串，得到最终的 Specificity 值，按照从左到右的顺序逐位比较。除了 Specificity 还有一些其他规则：

    6.!important 声明的规则高于一切，如果 !important 声明冲突，则比较优先权。

    7.如果优先权一样，则按源码中“后来者居上”的原则。

    8.由继承而得到的样式属性不参与 specificity 的计算，低于一切其他规则（例 全局选择符 * ）。

    范例分析：

    h1 {color: red;}

    /* 只有一个普通元素加成，结果是 0,0,0,1 */

    body h1 {color: green;}

    /* 两个普通元素加成，结果是 0,0,0,2 */

    /*0,0,0,1 小于 0,0,0,2 ，后者胜出*/

    h2.grape {color: purple;}

    /* 一个普通元素、一个class选择符加成，结果是 0,0,1,1*/

    h2 {color: silver;}

    /*一个普通元素，结果是 0,0,0,1 */

    /*0,0,1,1 大于 0,0,0,1 ，前者胜出*/

    html > body table tr[id=”totals”] td ul > li {color: maroon;}

    /* 7个普通元素、一个属性选择符、两个其他选择符（子选择符 >），结果是0,0,1,7 */

    li#answer {color: navy;}

    /* 一个ID选择符，一个普通选择符，结果是0,1,0,1 */

    /*0,0,1,7 小于 0,1,0,1，后者胜出*/

    源子：怿飞的《详解 CSS 的优先权》非常的精彩。

    个人认为 CSS 优先权是比较重要的概念，尤其在维护庞大的 CSS 样式时，就显得尤为重要了，

     

    ]]>     http://iaw2001200.blog.163.com/blog/static/972315022008111493431802 0 http://iaw2001200.blog.163.com/blog/static/972315022008111493431802 Sun, 14 Dec 2008 21:34:31 +0800 2008-12-14T21:34:31+08:00     <![CDATA[制作网页中CSS不被解释的问题]]> http://iaw2001200.blog.163.com/blog/static/97231502200811712819492

    CSS 文件默认是 ANSI 编码，而我们网页一般用UTF-8格式。也许大多情况会没有问题.但当你的CSS文件中有中文解释时就会出现这个CSS文件无法被解释.也就是我们通常看到的CSS失效.不过在IE7下已经修正这个错误,但现在用IE6的人还是比较多,怎么才能解决这个问题呢?

    　　方法一：把 CSS、JS 和网页文件都统一保存为 UTF-8 格式。

    　　方法二：去掉 CSS、JS 中的中文注释，或者改为英文。

    　　上文为IE6因为编码问题无法正确解析CSS文件

    　　有时候我们发现我们写的html页面引用外部css文件的时候在IE7和FF中能够很好的被解析，即能正常显示，可在IE6中却完全没有被解析，即 css文件里的样式根本没应用到我们的html页面，这是怎么回事？开始我把css文件里头的所有样式都复制粘贴到html页面中的<style></style>中，这样做以后，IE6、IE7、FF都能正常显示了，这也就说明外部的css文件应该是存在什么问题了，为什么在IE6中出现这问题，而在IE7和FF中却没有？网上google了下，发现是IE6中对页面的编码有严格的要求，我查看了下，朋友发过来的css文件用的编码是GB2312的，而html文件用的是utf-8的，原来问题就出在这里了，我把css文件内容的编码用ed改成utf- 8，再次测试的时候，一切恢复正常了，还有就是我发现朋友的css文件里面用中文注释.所以在这里建议大家,不要在CSS文件中用中文注释.很容易出现一些奇怪的问题!

    原文地址:http://www.web2bar.cn/Article/3071.aspx

    ]]>     http://iaw2001200.blog.163.com/blog/static/97231502200811712819492 0 http://iaw2001200.blog.163.com/blog/static/97231502200811712819492 Sun, 7 Dec 2008 13:28:19 +0800 2008-12-07T13:28:19+08:00     <![CDATA[在制作网页中,如何写各浏览器都支持的CSS Hack]]> http://iaw2001200.blog.163.com/blog/static/9723150220081171264549

    在制作网页中,如何写各浏览器都支持的CSS Hack

    区别IE6与FF：
           background:orange;*background:blue;


    区别IE6与IE7：
           background:green !important;background:blue;


    区别IE7与FF：
           background:orange; *background:green;


    区别FF，IE7，IE6：
           background:orange;*background:green !important;*background:blue;


    注：IE都能识别*;标准浏览器(如FF)不能识别*；
    IE6能识别*，但不能识别 !important,
    IE7能识别*，也能识别!important;
    FF不能识别*，但能识别!important;


     IE6 IE7 FF
    * √ √ ×
    !important × √ √


    另外再补充一个，下划线"_",
    IE6支持下划线，IE7和firefox均不支持下划线。

    于是大家还可以这样来区分IE6，IE7，firefox
    : background:orange;*background:green;_background:blue;

    提示：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。相信很多编写CSS有一段时间的朋友还是没有注意到这个技巧.希望对大家有所帮助!

    原文来自网站制作教程网,详细地址:http://www.web2bar.cn/Article/3072.aspx

    ]]>     http://iaw2001200.blog.163.com/blog/static/9723150220081171264549 2 http://iaw2001200.blog.163.com/blog/static/9723150220081171264549 Sun, 7 Dec 2008 13:26:04 +0800 2008-12-07T13:26:04+08:00     <![CDATA[网页布局中CSS的Class灵活应用]]> http://iaw2001200.blog.163.com/blog/static/9723150220081117198800

    相信学过CSS的朋友都知道CLASS这个东西,不知道你平时制作网页时是怎么应用的,我是这样来做DIV布局代码的．不知道说的清楚不清楚，凑和看吧

    我把class分为２种，布局class，风格class，布局class是骨架，风格class是衣服

    举个例子：

    比如布局中的左栏

    首先它的属性有：是左栏，宽度，背景颜色，字体颜色等

    １．首先会定义一个class,比如:.layout,主要用来控制页面整个的大小

    .layout{width:98%;margin:0 auto;text-align:left;}

    ２．然后会定义3个基本布局Class(l,m,r)

    .l{float:left}

    .m{width:auto}

    .r{float:right}

    我把２栏布局也归类于３栏布局，因为３栏布局中，左右栏的宽度分别为０的时候，３栏就变成了２栏．

    我们写基本布局代码的时候，最好还是写成３栏格式．

    ３．对应布局Class，定义需要的风格Class，比如宽度，高度，背景颜色等等这些都属于风格元素

    .class_l{background:#ff0;margin-right: -150px;width:150px;}

    .class_m{background:#f00;margin:0 140px 0 150px;}

    .class_r{background:#00f;margin-left: -140px;width:140px;}

    布局class只有一套，风格class可以定义很多.比如，要中栏里面在做一个小的２栏布局就可以再定义一个风格class

    .mid_l{background:#ff0;margin-right: -100px;width:100px;}

    .mid_m{background:#f00;margin:0 0 0 100px;}

    4.将布局class和风格class结合起来，在代码这样引用

    将２个class都引用，中间用空格隔开,前面的是布局class,后面的是风格class,后面还可以继续空格引用，如果需要再特殊定义，你可以给这个div取一个id来定义.

    其他的一些常用的风格class也可以写成通用的，比如隐含可以定义为

    .hide{display:none}

    这样的话,在有用到的地方直接class="xxx hide"来引用，是不是非常方便．大家也可以把自己的好经验写下来分享

    原文来自网站制作教程网,详细地址:http://www.web2bar.cn/Article/3048.aspx

    ]]>     http://iaw2001200.blog.163.com/blog/static/9723150220081117198800 0 http://iaw2001200.blog.163.com/blog/static/9723150220081117198800 Mon, 1 Dec 2008 19:19:08 +0800 2008-12-01T19:19:08+08:00     <![CDATA[表单中按钮,文本框,选择框等常用的十几个CSS样式]]> http://iaw2001200.blog.163.com/blog/static/972315022008111716547

    网上逛着,发现这个博文,感觉比较实用,转来和大家分享.

    一、按钮样式

    .buttoncss {

    font-family: "tahoma", "宋体"; /*[url]www.web2bar.cn[/url]*/

    font-size:9pt; color: #003399;

    border: 1px #003399 solid;

    color:#006699;

    border-bottom: #93bee2 1px solid;

    border-left: #93bee2 1px solid;

    border-right: #93bee2 1px solid;

    border-top: #93bee2 1px solid;

    background-image:url(../images/bluebuttonbg.gif);

    background-color: #e8f4ff;

    cursor: hand;

    font-style: normal ;

    width:60px;

    height:22px;

    }

    2、蓝色按钮 /*[url]www.web2bar.cn[/url]*/

    .bluebuttoncss {

    font-family: "tahoma", "宋体";

    font-size: 9pt; color: #003366;

    border: 0px #93bee2 solid;

    border-bottom: #93bee2 1px solid;

    border-left: #93bee2 1px solid;

    border-right: #93bee2 1px solid;

    border-top: #93bee2 1px solid;*/

    background-image:url(../images/blue_button_bg.gif);

    background-color: #ffffff;

    cursor: hand;

    font-style: normal ;

    }

    3、红色按钮 /*[url]www.web2bar.cn[/url]*/

    .redbuttoncss {

    font-family: "tahoma", "宋体";

    font-size: 9pt; color: #0066cc;

    border: 1px #93bee2 solid;

    border-bottom: #93bee2 1px solid;

    border-left: #93bee2 1px solid;

    border-right: #93bee2 1px solid;

    border-top: #93bee2 1px solid;

    background-image:url(../images/redbuttonbg.gif);

    background-color: #ffffff;

    cursor: hand;

    font-style: normal ;

    }

    4、选择按钮 /*[url]www.web2bar.cn[/url]*/

    .selectbuttoncss{

    font-family: "tahoma", "宋体";

    font-size: 9pt; color: #0066cc;

    border: 1px #93bee2 solid;

    border-bottom: #93bee2 1px solid;

    border-left: #93bee2 1px solid;

    border-right: #93bee2 1px solid;

    border-top: #93bee2 1px solid;

    background-image:url(../images/blue_button_bg.gif);

    background-color: #ffffff;

    cursor: hand;

    font-style: normal ;

    }

    5、绿色按钮 /*[url]www.web2bar.cn[/url]*/

    font-family: "tahoma", "宋体";

    font-size: 9pt; color: #0066cc;

    border: 1px #93bee2 solid;

    border-bottom: #93bee2 1px solid;

    border-left: #93bee2 1px solid;

    border-right: #93bee2 1px solid;

    border-top: #93bee2 1px solid;

    background-image:url(../images/greenbuttonbg.gif);

    background-color: #ffffff;

    cursor: hand;

    font-style: normal ;

    }

    6、图像按钮

    .imagebutton{

    cursor: hand; /*改变鼠标形状

    }

    7、页面正文

    body {

    scrollbar-face-color: #ededf3;

    scrollbar-highlight-color: #ffffff;

    scrollbar-shadow-color: #93949f;

    scrollbar-3dlight-color: #ededf3;

    scrollbar-arrow-color: #082468;

    scrollbar-track-color: #f7f7f9;

    scrollbar-darkshadow-color: #ededf3;

    font-size: 9pt; /*[url]www.www.web2bar.cn[/url]*/

    color: #003366;

    overflow:auto;

    }

    td { font-size: 12px }

    th {

    font-size: 12px;

    }

    8、下拉选择框

    select{

    border-right: #000000 1px solid;

    border-top: #ffffff 1px solid;

    font-size: 12px;

    border-left: #ffffff 1px solid;

    color:#003366;

    border-bottom: #000000 1px solid;

    background-color: #f4f4f4;

    }

    9、线条文本编辑框

    .editbox{

    background: #ffffff;

    border: 1px solid #b7b7b7;

    color: #003366;

    cursor: text;

    font-family: "arial";

    font-size: 9pt;

    height: 18px;

    padding: 1px;

    }

    10、多行文本框

    .multieditbox{

    background: #f8f8f8;

    border-bottom: #b7b7b7 1px solid;

    border-left: #b7b7b7 1px solid;

    border-right: #b7b7b7 1px solid;

    border-top: #b7b7b7 1px solid;

    color: #000000;

    cursor: text;

    font-family: "arial";

    font-size: 9pt;

    padding: 1px;

    }

    11、阴影风格的表单

    .shadow {

    position:absolute;

    z-index:1000;

    top:0px;

    left:0px;

    background:gray;

    background-color:#ffcc00;

    filter : progidximagetransform.microsoft.dropshadow(color=#ff404040,offx=2,offy=2,positives=true);

    }

    12、只显一条横线的输入框

    .logintxt{

    border-right: #ffffff 0px solid;

    border-top: #ffffff 0px solid;

    font-size: 9pt;

    border-left: #ffffff 0px solid;

    border-bottom: #c0c0c0 1px solid;

    background-color: #ffffff

    }

    13、没有边框的输入框

    .noneinput{

    text-align:center;

    width:99%;height:99%;

    border-top-style: none;

    border-right-style: none;

    border-left-style: none;

    background-color: #f6f6f6;

    border-bottom-style: none;

    ]]>     http://iaw2001200.blog.163.com/blog/static/972315022008111716547 0 http://iaw2001200.blog.163.com/blog/static/972315022008111716547 Mon, 1 Dec 2008 19:16:54 +0800 2008-12-01T19:16:54+08:00     <![CDATA[CSS实现文章段落首行缩进]]> http://iaw2001200.blog.163.com/blog/static/97231502200810591816506

    在文章排版时,段落首行都要缩进二个字符.通常我们使用空格来实现,今天给大家介绍CSS实现这个效果(text-indent)

    　　text-indent可以使得容器内首行缩进一定单位。

    　　在这里我们需要了解一种长度单位em。em是相对长度单位。相对于当前对象内文本的字体尺寸。

    　　我们中文段落一般每段前空两个汉字。实际上，就是首行缩进了2em。

    先来看看一个实子,大家就明白了

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>网站制作教程 - www.web2bar.cn </title>

    <style type="text/css">

    p{text-indent: 2em; /*em是相对单位，2em即现在一个字大小的两倍*/}

    </style>

    </head>

    <body>

    <p>段落前面空两个字的距离，不要再使用空格了。应该使用首行缩进text-indent。长度单位em。相对于当前对象内文本的字体尺寸。我们首行缩进了2em。2em即现在一个字大小的两倍。我在网站制作教程 - www.web2bar.cn 学到了好多新的知识</p>

    </body>

    </html>

    　　顺带说下text-indent属性隐藏文字的问题

    　　链接用图片做背景，text-indent:-9999px; 隐藏文字，此效果在 IE 中是正常的，但在 Firefox 里，鼠标点击该链接时，虚线框却会包住被缩进的文字，结果显示为虚线框 N 长。

    　　因为平时是用overflow:hidden; 属性的，所以一直也没有注意到这个问题的存在，但当你需要使用 JS 来实现某种交互时，强烈建议不要使用 overflow:hidden; 属性，因为会给你带来很多意想不到的麻烦。

    　　虚线框，其实就是 CSS 中的 outline 属性，这也说明 IE 和 Firefox 对于 outline 和 border 的解析范围并不一致：IE 认为虚线框就是border的边缘，而 Firefox 则认为虚线框应该是文字范围

    更多网页制作教程,请继续访问网站制作教程网

    ]]>     http://iaw2001200.blog.163.com/blog/static/97231502200810591816506 0 http://iaw2001200.blog.163.com/blog/static/97231502200810591816506 Wed, 5 Nov 2008 21:18:16 +0800 2008-11-05T21:18:16+08:00     <![CDATA[CSS文字强制换行(兼容IE与FF)]]> http://iaw2001200.blog.163.com/blog/static/97231502200810591726785

    问:word-wrap与word-break有什么不同?兼容 IE 和 FF 的换行 CSS 推荐样式该怎么写呢?请看本篇文章

    　　最好的方式是

            word-wrap:break-word; overflow:hidden;

    　　而不是

    　　word-wrap:break-word; word-break:break-all;

    　　也不是

    　　word-wrap:break-word; overflow:auto;

    　　这种最好的方式，在 IE 下没有任何问题，在 FF 下，长串英文会被遮住超出的内容。

    　　技术总结：

    　　word-wrap是控制换行的。

    　　使用break-word时，是将强制换行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。

    　　break-word是控制是否断词的。

    　　normal是默认情况，英文单词不被拆开。

    　　break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。

    　　keep-all，是指Chinese, Japanese, and Korean不断词。即只用此时，不用word-wrap，中文就不会换行了。（英文语句正常。）

    　　IE下：

    　　使用word-wrap:break-word;所有的都正常。

    　　FireFox下：

    　　如这2个都不用的话，中文不会出任何问题。英文语句也不会出问题。但是，长串英文会出问题。

    　　为了解决长串英文，一般用word-wrap:break-word;word-break:break-all;。但是，此方式会导致，普通的英文语句中的单词会被断开（IE下也是）。

    　　用：overflow:auto; IE下，长串会自动折行。FireFox下，长串会被遮盖。

    　　所以，我们用word-wrap:break-word;overflow:hidden;

    欢迎继续访问网站制作教程网

    ]]>     http://iaw2001200.blog.163.com/blog/static/97231502200810591726785 1 http://iaw2001200.blog.163.com/blog/static/97231502200810591726785 Wed, 5 Nov 2008 21:17:26 +0800 2008-11-05T21:17:26+08:00     <![CDATA[网页制作之DIV垂直中]]> http://iaw2001200.blog.163.com/blog/static/972315022008102113259924

    网页制作教程:网页制作之DIV垂直中

    DIV排版已经越来越受欢迎,DIV怎么才能实现垂直居中呢?请看如下例子:

    <!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>CSS布局技巧：未知高度div 垂直居中的问题- www.web2bar.cn </title>

    <style type="text/css">

    html,body

    {

      height: 100%;

      padding:0;

      margin:0;

    }

    body

    {

      min-height: 200px;

      text-align: center;

      min-width: 402px

    }

    .FirstDIV

    {

      margin-top: -100px; /* SecondDIV高度的一半  */

      float: left;

      width: 100%;

      height: 50%;

    }

    .SecondDIV

    {

      clear: both;

      border: silver 1px solid;

      background: #666;

      margin-left: auto;

      overflow: auto;

      width: 400px;

      margin-right: auto;

      height: 200px;

      text-align: left

    }

    </style>

    </head>

    <body>

    <div class="FirstDIV"></div>

    <div class="SecondDIV">

        <p>这是居中的内容,http://www.web2bar.cn/ </p>

        <p>body{ background-color:#FFF5F0}<br>

            div{ position:absolute; top:50%; left:50%; margin:-100px 0 0 -200px;

                width:400px; height:200px; border:1px #CCCC00 solid; font-family:Arial,

                Helvetica, sans-serif; color:#666666 } </p>

    </div>

    </body>

    </html>

    希望对大家有点启发作用,欢迎继续访问网站制作教程网

    ]]>     http://iaw2001200.blog.163.com/blog/static/972315022008102113259924 0 http://iaw2001200.blog.163.com/blog/static/972315022008102113259924 Sun, 2 Nov 2008 11:32:59 +0800 2008-11-02T11:32:59+08:00     <![CDATA[介绍CSS3的新特性]]> http://iaw2001200.blog.163.com/blog/static/97231502200892710351626 是一篇介绍CSS3新特性的文章,对CSS关注的话,可以参考一下

    边框：(Borders)

    border-color:控制边框颜色，并且有了更大的灵活性，可以产生渐变效果

    border-image:控制边框图象

    border-corner-image:控制边框边角的图象

    border-radius:能产生类似圆角矩形的效果

    背景(Backgrounds)

    background-origin:决定了背景在盒模型中的初始位置，提供了3个值，border, padding和content

    border:控制背景起始于左上角的边框

    padding:控制背景起始于左上角的留白

    content:控制背景起始于左上角的内容

    background-clip:决定边框是否覆盖住背景（默认是不覆盖），提供了两个值，border和padding

    border:会覆盖住背景

    padding:不会覆盖背景

    background-size:可以指定背景大小，以象素或百分比显示。当指定为百分比时，大小会由所在区域的宽度、高度，以及background-origin的位置决定

    multiple backgrounds:多重背景图象，可以把不同背景图象只放到一个块元素里。

    文字效果：(Text effects)

    text-shadow:文字投影，可能是因为MAC OSX的Safari浏览器开始支持投影才特意增加的。

    text -overflow:当文字溢出时，用"..."提示。包括ellipsis、clip、ellipsis-word、inherit，前两个CSS2就有了，目前还是部分支持，但有趣的是IE6居然也支持。ellipsis-word可以省略掉最后一个单词，对中文意义不大，inherit可以继承父级元素。

    颜色：(Color)

    HSL colors:除了支持RGB眼色外，还支持HSL（色相、饱和度、亮度）。以前一般都是作图的时候用HSL色谱，但这样一来会包括更多的颜色。H用度表示，S和L用百分比表示，比如hsl(0,100%, 50%)
    HSLA colors:加了个不透明度(Apacity)，用0到1之间的数来表示，比如hsla(0,100%,50%,0.2)
    opacity:直接控制不透明度，用0到1之间的数来表示
    RGBA colors:和HSLA colors类似，加了个不透明度

    用户界面(User-interface)

    resize:可以由用户自己调整div的大小，有horizontal（水平）vertical（垂直）或者both（同时），或者同时调整。如果再加上max-width或min-width的话还可以防止破坏布局

    选择器：(Selectors)

    Attribute selectors:在属性中可以加入通配符，包括^,$,*

    [att^=val]:表示开始字符是val的att属性

    [att$=val]:表示结束字符是val的att属性

    [att*=val]:表示包含至少有一个val的att属性

    其它模块：(Other modules)

    media queries:感觉叫媒体选择比较合适，可以为网页中不同的对象设置不同的浏览设备。比如可以为某一块分别设置屏幕浏览样式和手机浏览样式，以前则只能设置整个网页。

    multi-column layout:多列布局，让文字以多列显示，包括column-width、column-count、column-gap三个值

    column-width:指定每列宽度
    column-count:指定列数
    column-gap:指定每列之间的间距
    column-rule-color:控制列间的颜色
    column-rule-style:控制列间的样式
    column-rule-width:控制列间的宽度
    column-space-distribution:平均分配列间距

    ]]>     http://iaw2001200.blog.163.com/blog/static/97231502200892710351626 0 http://iaw2001200.blog.163.com/blog/static/97231502200892710351626 Mon, 27 Oct 2008 22:03:51 +0800 2008-10-27T22:03:51+08:00     <![CDATA[Dreamweaver的CSS文件失效]]> http://iaw2001200.blog.163.com/blog/static/97231502200892710233361

    网页制作教程:Dreamweaver的CSS文件失效

    今天做了一个页面，在本地计算机上浏览好好的，但是传到服务器上却发现其中一个css样式表的类却失效了。开始以为是编码的错误，转换了一下却没发现变化，调整了格式还是不行。到底怎么回事呢？

        仔细检查这个类，发现这个类是以数字开头的，名称为“14pxBtn”。难道是数字开头的错误？修改成“Btn14px”以后，上传浏览，发现完全正常啦！难道要求这么严格吗？

        仔细查看了一下，发现最新版本的Dreamweaver生成新页面之后，在网页最上方是一段代码，如下："http://www.w3.org/TR/html4/loose.dtd">

        去掉这段就没问题啦，哈哈，看样子还真是要严格按照规范编码呀

    ]]>     http://iaw2001200.blog.163.com/blog/static/97231502200892710233361 0 http://iaw2001200.blog.163.com/blog/static/97231502200892710233361 Mon, 27 Oct 2008 22:02:33 +0800 2008-10-27T22:02:33+08:00     <![CDATA[十九对色彩搭配方案]]> http://iaw2001200.blog.163.com/blog/static/97231502200892523443204

    网页制作要做的好看,色彩搭配十分重要,以下是收集的19对不错的色彩搭配方案,可供大家参考.

    #F0FBEB #9BDF70

    #EFF7FF #96C2F1

    #FFFFFF #92B0DD

    #EEFAFF #BBE1F1

    #FAFCFD #CCEFF5

    #E8F5FE #A9C9E2

    #FFFFF7 #FFCC00

    #F2FDDB #ADCD3C

    #FFFFDD #E3E197

    #F7F7F7 #D3D3D3

    #FFF5FA #F8B3D0

    #F3FAFF #BFD1EB

    #FFF9ED #FFDD99

    #F7F7FF #CACAFF

    #EEF3F7 #A5B6C8

    #F1F7F9 #CEE3E9

    #F4F9FF #CAE3FF

    #ECF8FF #C9D9EE

    #F2FAFF #5C9CC0

    欢迎继续访问网站制作教程网.

    ]]>     http://iaw2001200.blog.163.com/blog/static/97231502200892523443204 0 http://iaw2001200.blog.163.com/blog/static/97231502200892523443204 Sat, 25 Oct 2008 14:34:43 +0800 2008-10-25T14:34:43+08:00