网络应用
好几天没有上微软的博客，忽然发现他们已经升级啦，本来就是测试版本嘛。
这次升级之后，速度有了提高，还增加了图文混排和rss功能。都是很实用的功能。前两天忽然想到，其实如果rss聚合器阅读的不仅仅是花边新闻，而是专业内容（好比商业、学术……），那么价值就更大了。
这次升级之后，速度有了提高，还增加了图文混排和rss功能。都是很实用的功能。前两天忽然想到，其实如果rss聚合器阅读的不仅仅是花边新闻，而是专业内容（好比商业、学术……），那么价值就更大了。
coffee
2005-02-06 09:42:48
阅读:1274
评论:0
引用:0
在以前的HTML里，元素的位置只能靠元素的依次排列觉得，而在CSS里你可以更精确的
定位元素。Netscape曾提出过Layer标记，它对于精确布局很有好处，但是并没有被W3C
承认，W3C在CSS提出了类似于Layer标记的功能。
position属性：
position属性用来决定元素的位置类型，详见属性：
属性名称: 'position'
属性值: absolute | relative | static
初始值: static
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
其属性值分别代表：
absolute：屏幕上的绝对位置。
relative：屏幕上的相对位置。
static：固有位置。
direction属性：
direction属性决定BOX的排列方向，详见属性：
属性名称: 'direction'
属性值: ltr| rtl
初始值: ltr
适合对象: 所有元素
是否继承: yes
百分比备注: 被禁止
float和clear属性：
在HTML中图片可以选择飘浮的位置，现在BOX对象通过CSS对于也可以选择飘浮的位置。
改变BOX的float属性，BOX将飘浮在其他元素的左或右方：
属性名称: 'float'
属性值: left| right|none
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
例如：
<STYLE type="text/css"]
IMG { float: left }
BODY, P, IMG { margin: 2em }
</STYLE>
<BODY>
<IMG src=img.gif>
Some sample text that has no other...
</BODY>
相反的，使用clear属性将禁止元素在BOX的左方或右方飘浮：
属性名称: 'clear'
属性值: left| right|both|none
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
绝对位置属性：
绝对位置属性有四个属性：top、right、bottom和left，属性值为长度单位或百分数：
属性名称: 'top'、'right'、'bottom'、'left'
属性值: <length>|<percentage>|auto
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
利用以上属性，用户就可以精确定义元素的位置，如：
[p style="position: relative; margin-right: 10px; left: 10px;"]
I used two red hyphens to serve as a change bar. They
will "float" to the left of the line containing THIS
--
word.
z-index属性：
在CSS中允许元素的重叠显示，这样就有一个显示顺序的问题，z-index属性描述了元素
的前后位置，如果把电脑屏幕看作X-Y平面的话，那么Z轴就是垂直于屏幕的，z-index
使用整数表示元素的前后位置，数值越大，就会显示在相对靠前的位置，并且CSS同意
在z-index中使用负数。
属性名称: 'z-index'
属性值: auto|<integer>
初始值: auto
适合对象: 使用position属性的元素
是否继承: no
百分比备注: 被禁止
width属性：
规定BOX的width属性，可以使BOX的宽度不依靠它所包含的内容的多少: 块元素
是否继承: no
百分比备注:根据父元素的width而定
在CSS中还提供了min-width和max-width属性，使得BOX的宽度在最小宽度和最大宽度之
间。
属性名称: 'min-width'
属性值: <length> | <percentage>
初始值: 0
适合对象: all
是否继承: no
百分比备注:根据父元素的width而定
属性名称: 'max-width'
属性值: <length> | <percentage>
初始值: 100%
适合对象: all
是否继承: no
百分比备注:根据父元素的width而定
height属性：
相同的BOX还有height属性来控制本身的高度：
属性名称: 'height'
属性值: <length> | <percentage> | auto
初始值: auto
适合对象: 块元素
是否继承: no
百分比备注:根据父元素的height而定
在CSS中还提供了min-height和max-height属性，使得BOX的高度在最小高度和最大高度
之间。
属性名称: 'min-height'
属性值: <length> | <percentage>
初始值: 0
适合对象: all
是否继承: no
百分比备注:根据父元素的height而定
属性名称: 'max-height'
属性值: <length> | <percentage>
初始值: 100%
适合对象: all
是否继承: no
百分比备注:根据父元素的height而定
overflow属性：
在规定元素的宽度和高度时，如果元素的面积不足以显示全部内容的话就要用到
overflow属性：
属性名称: 'overflow'
属性值: visible | hidden | scroll | auto
初始值: visible
适合对象: 元素的position属性
是否继承: no
百分比备注: 被禁止
属性值含义如下：
visible：扩大面积以显示所有内容。
hidden：隐藏超出范围的内容。
scroll：在元素的右边显示一个滚动条。
auto：当内容超出元素面积时，显示滚动条。
clip属性：
CSS还提供了一种clip属性，可以把元素区域剪切成各种形状，但目前提供的只有方形
一种：
属性名称: 'clip'
属性值: <shape> | auto
初始值: auto
适合元素: 元素的position属性被设为absolute
是否继承: no
百分比备注: 被禁止
<shape>值为rect(top right bottom left)。
line-height和vertical-align属性：
line-height属性可以规定元素内部的行间距，使用长度单位或百分数：
属性名称: 'line-height'
属性值: normal | <number> | <length> | <percentage>
初始值: normal
适合对象: 所有元素
是否继承: yes
百分比备注:根据元素的字体大小而定
例如下面的例子，虽然表达方式不同，但结果一样：
DIV { line-height: 1.2; font-size: 10pt }
DIV { line-height: 1.2em; font-size: 10pt }
DIV { line-height: 120%; font-size: 10pt }
vertical-align属性决定元素在垂直位置的显示：
属性名称: 'vertical-align'
属性值: baseline | sub | super | top | text-top | middle | bottom |
text-bottom | <percentage> | <length>
初始值: baseline
适合对象: inline elements
适合继承: no
百分比备注: 根据元素的line-height属性而定
属性值含义如下：
baseline：与元素的基线对齐。
middle：与元素中部对齐。
sub：字下沉。
super：字上升。
text-top：文本顶部对齐。
text-bottom：文本底部对齐。
Top：和本行位置最高元素对齐。
Bottom：和本行位置最低元素对齐。
Visibility属性:
该属性用于控制元素的显示或隐藏：
属性名称: 'visibility'
属性值: inherit | visible | hidden
初始值: inherit
适合对象: 所有元素
是否继承: 如果该值为inherit，则继承父元素属性
百分比备注: 被禁止
4、颜色和背景（Color and Background）属性：
这里介绍有关CSS中前景色和背景颜色、图片的设定方法。
color属性：
color属性用于设定元素的前景色：
属性名称: 'color'
属性值: <color>
初始值: 根据用户的初始值而定
适合对象: 所有元素
是否继承: yes
百分比备注: 被禁止
color属性的值可以是十六进制数值、rgb()函数或CSS承认的颜色名称。如：
EM { color: red }
EM { color: rgb(255,0,0) }
背景属性：
background-color属性用于设定背景色，初始值为透明：
属性名称: 'background-color'
属性值: <color> | transparent
初始值: transparent
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
backgroud-image属性用于设定背景的图片：
属性名称: 'background-image'
属性值: <url> | none
初始值: none
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
其中url可以为绝对地址，也可以是相对地址，例如：
BODY { background-image: url(marble.gif) }
P { background-image: none }
以上两个属性利用普通的HTML属性也可以实现，下面的属性是CSS对原有HTML的扩展。
background-repeat属性用来描述背景图片的重复排列方式：
属性名称: 'background-repeat'
属性值: repeat | repeat-x | repeat-y | no-repeat
初始值: repeat
适合对象: 所有元素
是否继承: no
百分比备注: 被禁止
其中属性值的含义为：
repeat：沿X轴和Y轴两个方向重复显示图片。
repeat-x：沿X轴方向重复图片。
repeat-y：沿Y轴方向重复图片。
none：不重复图片。
例如：
BODY
background: red url(pendant.gif);
background-repeat: repeat-y;
}
/*表示沿Y轴重复图片“pendant.gif”，其余部分以红色为背景色*/
background-attachment属性表示在滚动整个文档时，背景图片的显示方式。它的属性
值有两种：fixed和scroll，fixed相当于IE4里的水印效果，也就是说在拖动文档时，
背景相对是静止的，scroll则和文档一起滚动。
background-position属性用来指定背景图片显示的位置：
属性名称: 'background-position'
属性值: [<percentage> | <length> ]{1,2} | [top | center | bottom] || [left |
center | right]
初始值: 0% 0%
适合对象: 容器元素
是否继承: no
百分比备注: refer to the size of the element itself
其中属性值含义为：
“top left”和“left top”表示“0% 0%”。
“top”、“top center”和“center top”表示“50% 0%”。
“right top”和“top right”都表示“100% 0%”。
“left”、“left center”和“center left”表示“0% 50%”。
“center”和“center center”表示“50% 50%”。
“right”、“right center”和“center right”都表示“100% 50%”。
“bottom left”和“left bottom”表示“0% 100%”。
“bottom”、“bottom center”和“center bottom”都表示“50% 100%”
“bottom right”和“right bottom”表示“100% 100%”。
例如：
BODY { background: url(banner.jpeg) right top } /* 100% 0% */
BODY { background: url(banner.jpeg) top center } /* 50% 0% */
BODY { background: url(banner.jpeg) center } /* 50% 50% */
BODY { background: url(banner.jpeg) bottom } /* 50% 100% */
background属性是以上背景属性的快捷方式，属性和顺序如下：
属性名称: 'background'
属性值: <'background-color'> || <'background-image'> ||
<'background-repeat'> || <'background-attachment'> ||
<'background-position'>
适合对象: 所有元素
是否继承: no
百分比备注: 只在background-position中容许使用
coffee
2005-01-18 17:37:45
阅读:1525
评论:1
引用:0
从目前社会通行的角度来看，04年做的网站不能算作成功。不说别的，光是这种手工打造的方式就会被大工业化生产鄙视成手工作坊。hofman说的好像也没有错：人气少、漏洞多、希望高、效率差……。
但是如果我们换一个角度看呢？
2000年的时候，当时我们的校园就是一个荒滩，除了边缘可怜的果园，几乎看不见什么绿色。按照常规思路，应该是大量购买苗木、草坪，短时间把园区绿化起来。这样的做法好处是可以迅速积累人气，前提是有大量的投入。后来终于在绿化上投了一笔钱，具体数额我不知道，但肯定少不了，如今的校园绿化只能算马马虎虎。过几年，卓达的绿化肯定就远远落后于时代啦。其实卓达绿化采用的思路，就是通行网络建设的思路。先是大笔烧钱，如果有钱的话。投入之后呢，就只能勉强维持。几年过去，当年的大笔投入都成了落后的东西。
其实hofman采用的是另外一种思路：先不是烧钱买别人的草木，而是运用耐心和智慧来自己培养弱小的苗木。这样作刚开始效率肯定比较差的，因为培养的过程实际上就是不断犯错误的过程。但是这种做法的潜力是，一旦培养花草的技术成熟，就可以迅速低成本扩展成一个很大的范围――因为核心培养技术是我们自己的。目前网络建设进度可能比hofman预想的要慢，但是它的发展是加速度进行的，一旦突破一个临界点，它就会出现令人瞩目的成长轨迹。而且它的成长将会充满高度的灵活性和扩展性，会紧紧跟随整个环境的进展，会使投入的金钱、时间以及精力都不至于因为市场变化而贬值。
但是如果我们换一个角度看呢？
2000年的时候，当时我们的校园就是一个荒滩，除了边缘可怜的果园，几乎看不见什么绿色。按照常规思路，应该是大量购买苗木、草坪，短时间把园区绿化起来。这样的做法好处是可以迅速积累人气，前提是有大量的投入。后来终于在绿化上投了一笔钱，具体数额我不知道，但肯定少不了，如今的校园绿化只能算马马虎虎。过几年，卓达的绿化肯定就远远落后于时代啦。其实卓达绿化采用的思路，就是通行网络建设的思路。先是大笔烧钱，如果有钱的话。投入之后呢，就只能勉强维持。几年过去，当年的大笔投入都成了落后的东西。
其实hofman采用的是另外一种思路：先不是烧钱买别人的草木，而是运用耐心和智慧来自己培养弱小的苗木。这样作刚开始效率肯定比较差的，因为培养的过程实际上就是不断犯错误的过程。但是这种做法的潜力是，一旦培养花草的技术成熟，就可以迅速低成本扩展成一个很大的范围――因为核心培养技术是我们自己的。目前网络建设进度可能比hofman预想的要慢，但是它的发展是加速度进行的，一旦突破一个临界点，它就会出现令人瞩目的成长轨迹。而且它的成长将会充满高度的灵活性和扩展性，会紧紧跟随整个环境的进展，会使投入的金钱、时间以及精力都不至于因为市场变化而贬值。
coffee
2005-01-04 10:47:55
阅读:1130
评论:0
引用:0
听说微软也搞博客了，我老人家临时学时髦青年也申请了一个。总的感觉是，微软的东西还是不错的，好像是为年轻人交流准备的。加上它跟msn和hotmail整合，所以还是挺有吸引力的。
首先，微软博客选择模板非常直观和方便：
其次，还可以选择布局：
还有，能选择模块显示还是不显示：
独特的是，各个模块可以拖动。以前听hofman说过，现在第一次见到：
最后的结果：相册和文字整合在一个页面。如果你愿意，还可以放更多东西。
首先，微软博客选择模板非常直观和方便：
其次，还可以选择布局：
还有，能选择模块显示还是不显示：
独特的是，各个模块可以拖动。以前听hofman说过，现在第一次见到：
最后的结果：相册和文字整合在一个页面。如果你愿意，还可以放更多东西。
coffee
2005-01-03 16:44:59
阅读:2369
评论:2
引用:0
2004年的最后一天，已经没有时间后悔虚度光阴了。
博客的企业级别应用应该是什么样子呢？
如果是个试图同员工和客户充分沟通的组织，需要博客为他们进行哪些服务呢？
恐怕不能仅仅听从客户的意见了，而应该对他们的需求有一定预见性。
假设自己是企业主管，你会让博客怎样发挥功能？
首先，重要部门主管应该设置博客。当年在一个假洋鬼子手下工作，每个周末写一个总结谈谈遇到的问题。本来以为这是应付公差，后来才意识到，这是一个整理自己思路的好机会。因为平常总是应付日常事务，不经意会减弱反思能力，而博客是个很好的反思工具。
其次，积极员工自愿设立博客。有些人愿意表达，有些人不愿意表述自己的想法，但是他们或许会有更阅读和理解能力。员工博客的优点是能体现出对问题的广泛视角，而缺点是缺少权威性和详细资料。
当然客户是不应该忽视的，但是客户会主动发布信息吗？除非是他们对相应产品忍无可忍。除非是特定的产品用户，好比，教育产品用户、医疗产品、美容产品等等。
难道这就够了吗？表面上好像照顾到面，但是背后的结构呢？怎么在三者之间形成互动呢？自发的？预定的？理论上应该自发，但是启动阶段怎么才能形成互动？挠头……
博客的企业级别应用应该是什么样子呢？
如果是个试图同员工和客户充分沟通的组织，需要博客为他们进行哪些服务呢？
恐怕不能仅仅听从客户的意见了，而应该对他们的需求有一定预见性。
假设自己是企业主管，你会让博客怎样发挥功能？
首先，重要部门主管应该设置博客。当年在一个假洋鬼子手下工作，每个周末写一个总结谈谈遇到的问题。本来以为这是应付公差，后来才意识到，这是一个整理自己思路的好机会。因为平常总是应付日常事务，不经意会减弱反思能力，而博客是个很好的反思工具。
其次，积极员工自愿设立博客。有些人愿意表达，有些人不愿意表述自己的想法，但是他们或许会有更阅读和理解能力。员工博客的优点是能体现出对问题的广泛视角，而缺点是缺少权威性和详细资料。
当然客户是不应该忽视的，但是客户会主动发布信息吗？除非是他们对相应产品忍无可忍。除非是特定的产品用户，好比，教育产品用户、医疗产品、美容产品等等。
难道这就够了吗？表面上好像照顾到面，但是背后的结构呢？怎么在三者之间形成互动呢？自发的？预定的？理论上应该自发，但是启动阶段怎么才能形成互动？挠头……
coffee
2004-12-31 20:35:39
阅读:1081
评论:0
引用:0
这不是我提出来的,而是blogcn说的.其中一个重要证据是:博客中国的文章虽然大多是引用的,但是却没有按照博客的原则引用:评论并且给出链接.博客中国的做法是全文照搬,猛一看好象是他们原创似的,其实只是博客中国为他们剽窃过的作者单独设立一个博客而已.
怎么什么东西到中国来就变样了呢?虽然大家也不会把博客中国怎么样,但这样做实在有点败坏博客在中国的前途.本来博客是很好的原创氛围,就这样被博客中国引导成剽窃习惯,实在让人感到惋惜.最近获奖的著名博客猛小蛇也是靠转载别人的图片发家,中国人这是怎么了?
怎么什么东西到中国来就变样了呢?虽然大家也不会把博客中国怎么样,但这样做实在有点败坏博客在中国的前途.本来博客是很好的原创氛围,就这样被博客中国引导成剽窃习惯,实在让人感到惋惜.最近获奖的著名博客猛小蛇也是靠转载别人的图片发家,中国人这是怎么了?
coffee
2004-12-21 10:08:23
阅读:1225
评论:4
引用:0
很多企业都建立了自己的网站，大多是请人作的，尤其是中小企业。但是我怀疑到底有多少企业意识到了网络的功能，因为我粗略看了看，一般小企业的网站就是：flash封面＋中英文版本切换＋集团介绍＋产品介绍＋客户留言＋联系方式。鬼才知道这样的网站有什么用处，还不如花钱印两盒好看的名片和宣传手册呢，^_^。据说有个骗子就是凭借一盒金名片畅行无阻。
这也不能怪企业，本来人家就不是干“挨踢”的，又不愿意为网站专门聘请一个程序员一个美工，因为毕竟不是每天都有大量更新和网上业务。其实应该怪现在那些“做”网站的，就是市面上常见的建站服务＋空间服务供应商。他们误认为客户建设网站就是为了炫耀，所以堆上吹嘘文字马屁照片和晃眼flash就大功告成。其实很多客户对于网络有什么意义，根本就没有自己的看法。我倒是认为这些所谓的网络应用推广人员误导了客户的应用，回过头来被洗脑的客户提供出简单的要求――这倒是正好，因为反正他们也没有合适的企业信息管理方案。要么是过分简单，简单到实际上没有任何动态内容；要么是足够“复杂”，复杂到企业如果没有专门人员就无法更新。于是通常是建站人员匆匆炮制出几个静态页面，象烫手的山芋一样抛给客户，拿到酬金之后逃之夭夭，彼此都祈祷最好以后不要见面。
于是市场越做越窄。一方面是建站的门槛越来越低，是人就能搞个网页（反面免费的模板一抓一大把），于是单位价格越来越低。相应的另外一方面，市场对这种网站的需求却没有显著增长。因为精明的商人发现，其实这种花哨的新玩意并没有什么用处，只是因为别人都有所以自己才搞一套，反正也没有多少钱嘛，权当是买了一套行头。不过而已，到此为止。为什么建站的挨踢人士要把绞索套到自己脖子上呢？
因为他们误认为中小企业自己就能提出正确的网络应用方案。这是完全错误的！可能一个银行知道自己该怎么建设应对未来十年之内的信息系统，但是一个啤酒厂却不会，而象啤酒厂这样没有明确信息系统要求的企业才是大多数。它们急切需要来自挨踢界的贴身指引，但是IBM们开出的价码对它们来说未免有点象白日抢劫。
所以，就如同你的私人医生（^_^，假设你有）会主动提出你应该拔掉腐烂的槽牙并修补有缺陷的门齿时一样。网络建设者应该主动提醒企业需要什么样子的建设方案，并给出操作的可选择方案以及各方案的成本收益。并且，网络建设者应该跟踪企业的网络发展，并且跟随客户应用重心的转移来调整网络的应用功能。好比一个卖鞋的公司，刚开始需要的是产品及时演示，那么应该建立方便更新的图片系统；随后客户增加，那么应该建设方便一对一沟通的客户信息发布系统或者内部IM；再发展，企业可能需要一个供货材料投标系统和人事聘用管理系统等等……。
总之，网络建设者应该主动促进中小企业的网络应用，一直伴随中小企业的成长，然后从企业的成长中获得自己的成长。直到有一天客户对你说：“再见！我想应该跟IBM商量一下下一步的建设了！”
coffee
2004-12-20 23:41:46
阅读:2109
评论:3
引用:0
我认为最为平易近人的解释是hofman的<a href="http://www.zhuoda.org/blog3/article1530/2245.html"]《浅谈Trackback的用法》。[/url]
比较全面的，可以看无何有之乡的<a href="http://www.donews.net/amaya/archive/2004/07/03/37275.aspx"]《blog trackback功能》。[/url]还有别人的<a href="http://blog.csdn.net/griefforyou/archive/2004/07/10/WhatisTraceBack.aspx"]转载[/url]。
trackback的好处是，你要对自己针对别人的评论深思熟虑才好。blog有助于培养发言人为自己发言承担一切责任的机制，表面上看容易导致个人权利的滥用（木子美？），从长时期来看实际上却是有助于个人权利同个人义务的协调。
coffee
2004-12-17 22:38:44
阅读:1519
评论:3
引用:0
很早就申请了天涯博客，是因为天涯的论坛比较好玩，经常可以在里面见到比较有幽默感的帖子和认认真真的回帖。
但是这些优点却没有延续到天涯博客当中去，天涯博客点击排名前几位，都是靠准色情内容取得关注。
而且天涯博客的功能比较单调，基本没有什么后台管理可言，没有个人留言功能，倒是有相册。
不过天涯论坛积累的人气和参与者素质是绝对不可低估，经常见到大块的原创文章，因为天涯的很多成员本来就是职业写手，或是记者或是编辑。
不过为什么这些有内容的文章还是点击量偏少呢？尤其是认真的评论更少？反倒是什么竹影青瞳之类甚嚣尘上。奇怪。这并没有体现出博客的作用。
模板数量一般，但是大多数人选择比较雅致的，还有人自己做的也不错。
coffee
2004-12-10 20:55:36
阅读:1423
评论:2
引用:0
www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
css不仅仅是用来修饰细节的小装饰品，它的主要功能是控制页面整体布局（layout）的支柱。最近找到一个清晰明白的入门教程，翻译如下：
这个教程是关于怎样创建一个简单的两栏布局：包含一个logo部分(header），一个水平导航条，一个底部说明栏（footer），水平居中于浏览窗口，是个不错的布局。
第一步：创建基本的xhtml结构：
[div id="wrap"]
[div id="header"][/div]
[div id="nav"][/div]
[div id="main"][/div]
[div id="sidebar"][/div]
[div id="footer"][/div]
[/div]
接下来，在基本结构里面塞点东西：
[div id="wrap"]
[div id="header"]<h1>Document Heading</h1>[/div]
[div id="nav"]
<ul>
<li><a href="#"]Option 1[/url]</li>
<li><a href="#"]Option 2[/url]</li>
...
</ul>
[/div]
[div id="main"]
<h2>Column 1</h2>
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit...
[/div]
[div id="sidebar"]
<h3>Column 2</h3>
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit...
<ul>
<li><a href="#"]Link 1[/url]</li>
<li><a href="#"]Link 2[/url]</li>
...
</ul>
[/div]
[div id="footer"]
Footer
[/div]
[/div]
现在，我们已经有了一个完整的、没有经过修饰的XHTML文档，下面可以运用css来控制它的布局了。（注意：如果不是合格的XHTML文档而是传统的表格嵌套，css是无法控制布局的。）
第二步：调整<body>
为了使内容达到浏览器的两端，我们设置<body>属性的margin和padding为0，同时设定页面背景色和字体颜色。
body {
margin:0;
padding:0;
background-color:#A7A09A;
color:#000;
text-align:center;
}
第三步：处理主容器（main container）
现在我们要给内容区域设定宽度并使之水平居中，具体做法是用＃warp设定容器的宽度和margin，同时设定它的背景色。
我们设定内容居中的方法原理是：当一个元素的左右margin都被设定为auto的时候，元素的左右margin会均分剩下空白的部分。（为了说清楚这一部分翻译的不太精确，原文是：when an element’s left and right margins are set to auto, they will share whatever is left when the element’s width has been subtracted from that of its container. ）在这个例子当中，#wrap的宽度会被从浏览器的宽度中减掉。为了避免有些浏览器中窗口窄于#wrap的现象，我们把<body>的最小宽度定义等同为#wrap的宽度。
body {
margin:0;
padding:0;
background-color:#A7A09A;
color:#000;
min-width:750px;
}
div#wrap {
background:#99c;
margin:0 auto;
width:750px;
}
接下来，我们给不同部分设定不同的背景颜色使得它们清晰醒目。
#header {
background-color:#ddd;
}
#nav {
background-color:#c99;
}
#main {
background-color:#9c9;
}
#sidebar {
background-color:#c9c;
}
#footer {
background-color:#cc9;
}
第四步：放置并排的两栏
要想让两栏肩并肩并排着放置，必须要结合运用float和margin，还要设定两栏的宽度。
#main {
background-color:#9c9;
float:left;
width:500px;
}
#sidebar {
background-color:#c9c;
width:247px;
margin-left:500px;
}
#wrap > #sidebar {
width:250px;
}
留神#sidebar暂时设定为247px，是为了应付IE的3px margin bug。过会儿我们会用个IE不识别的子选项给更好的浏览器设定正确宽度。这个样子我们可以把#sidebar放在#main的右边，但是footer却错位了。
第五步：把footer拉下来
footer没有呆在主内容的下面，是因为float属性在起作用。当我们把元素float起来的时候，它就从文档序列中脱离出来了，在xhtml中看起来比实际上的要低。
在这种情况下，#footer根本不认#main而排在了#sidebar的下面。
为了避免这种情况，我们用clear属性来告诉footer不允许它靠近任何元素。
#footer {
background-color:#cc9;
clear:both;
}
第六步：解决背景颜色
现在我们看到右边的栏太短以至于无法延伸到footer，为了看起来效果好一些，我们把#sidebar和#wrap的背景设成一样的。
#sidebar {
background-color:#99c;
width:247px;
margin-left:500px;
}
第七步：让导航栏水平排列
#nav包含了链接列表，怎么才能让它们水平排列呢？
#nav ul{
margin:0;
padding:0;
}
#nav li{
display:inline;
list-style:none;
margin:0;
padding:0;
}
第八步：调整margin
最后，我们调整某些元素的margin和padding让布局看起来疏朗一些。
#header h1 {
padding:5px;
margin:0;
}
#nav {
background-color:#c99;
padding:5px;
}
#main h2, #main h3, #main p {
padding:0 10px;
}
#sidebar ul {
margin-bottom:0;
}
#sidebar h3, #sidebar p {
padding:0 10px;
}
#footer p {
padding:5px;
margin:0;
}
最终效果，请看：
www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/finished.html
coffee
2004-12-03 23:20:12
阅读:2402
评论:8
引用:0