牧童：

CSS常用网站布局实例

Tue, 15 Jul 2008 13:21:50 +0800

几个使用DIV标签布局时候用的常用布局

1、自由伸展的三栏式版面,div布局，非绝对定位，IE,FireFox都OK.

HTML代码

<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>" xml:lang="zh-CN" lang="zh-CN">
<head>
<title>自由伸展的三栏式版面</title>
<meta name="Big John" content="August 24, 2002" />
<meta http-equiv="content-Type" content="text/html; charset=GB2312" /> 
<meta name="mssmarttagspreventparsing" content="true" />
<meta name="keywords" content="demo,test,big john,big,john,positioniseverything,css,html,what else do you want from me!?" />
<meta name="description" content="A demo of 3 fluid, full height columns, including header and footer, all with different BGs. " />
<meta name="distribution" content="global" />
<meta name="resource-type" content="document" />
<meta name="robots" content="all" />
<meta http-equiv="imagetoolbar" content="no" />
<meta http-equiv="pragma" content="no-cache" />

html {margin: 0; padding: 0;}

body {margin: 0; padding: 0; font-family: "Palatino Linotype", Georgia, "Times New Roman", Times, serif; 
  font-size: small; background: #ee8 repeat-y url(images/browncol.gif);}
/*** Image is 180px wide, and 20px high ***/

pre {margin: 0; font-family: verdana, sans-serif; font-size: .9em;}

a {color: #000;}

.alignright {margin-top: 0; text-align: right;}

.small {font-size: .9em;}

.return {position: absolute; top: 0; right: 0; text-align: right; padding: .5em;}

/*******************************************************************************
                       Positioning rules
*******************************************************************************/
h1, h2 {
font-size: 22px;
margin: 0;
color: #040;
background-color: #c83;    /*** The header and footer have backgrounds, to cover the 2-tone body BG  ***/
border-top: 4px solid #000;
border-bottom: 5px solid #000;
padding: 3px 0 3px 1em;
}

h2 {background-color: #638; color: #fff;}

div#leftbox {      /*** No side padding or borders, to avoid the IE5.x box model problem ***/
position: absolute;
left: 10px;
width: 150px;
color: #ee8;
padding-top: 10px;
}

#middlebox {
margin: 0 34% 0 170px;
border-left: 3px solid #000;
border-right: 3px solid #000;
padding: 10px;
background-color: #dda;     /*** This div has a background to cover the 2-tone body BG ***/
}

div#rightbox {    /*** No side padding or borders, to avoid the IE5.x box model problem ***/
position: absolute;
right: 25px;     /*** IE5/mac will show a horizontal scrollbar 
		if this is less than 16px, or other units are used
		<a href="http://www.l-c-n.com/IE5tests/right_pos/" target="_blank" rel="external">http://www.l-c-n.com/IE5tests/right_pos/</a> ***/           
width: 30%;
color: #820;
padding-top: 10px;
}

-->
</style>
</head>

<body>

<h1>
自由伸展的三栏式版面（Three Column Stretch）（页首）
</h1>

<div id="leftbox">
<pre>
<strong>#leftbox</strong> {
position: absolute;
left: 10px;
width: 180px(150px?);
}
</pre>

<p>
<strong>这个栏段</strong>的背景是利用 body 卷标设定的图片，以垂直方向重复贴上所产生的。图片的宽度和中间栏段的左边界(margin)相等，高度为20px，这样可以减少图片重复的次数，加快演算上色的速度。
<p>
</p>
这一栏的内容(#leftbox)以绝对位置(absolutely positioned)的方式放在左边的区域。另外因为底层背景图片的尺寸限制，需要给定一个以像素作单位的“宽度(width)”值。
</p>
<p>
<a href="#"><strong>测试用连结</strong></a>
</p>
</div>

<div id="rightbox">    
<pre>
<strong>#rightbox</strong> {
position: absolute;
right: 2%;
width: 30%;
}

</pre>
<p>
<strong>这个栏段</strong>也能显示“body”的背景，但是因为“body”的背景
图片只在垂直方向重复，而且仅与中间栏段的左边界同宽，所以这边显示的是“body”的背景颜色(background-color)。 
这个栏段的“宽度(width)”和右边界的区域是用百分比作单位，你想用其它单位也可以。
</p>
<p>
如果页面比 640px 还窄，中间和右边栏段使用的“pre”卷标会导致内容重叠。
</p>
<p>
<a href="#"><strong>测试用连结</strong></a>
</p>

</div>

<pre>
<strong>#middlebox</strong> { 
margin: 0 34% 0 170px;
border-left: 2px solid #000;
border-right: 2px solid #000;
padding: 0 10px 10px;
background-color: #6b9;
}
</pre>
<p>
<strong>中间栏段</strong>有设定背景色，以便跟右边栏段作区分。
这个栏段也需要补白(padding)和边框(border)，不过因为没有设定“宽度(width)”属性，并不会触发 IE5.x 的区块模块(box model)问题。
</p>
<p>
这个栏段也必须是最长的栏段，并且用你支持的最大分辨率(resolution)浏览时，仍要能够延伸到检视区(viewport)底端下方，否则“body”的背景就会在页尾(footer)下方出现。
</p>

<p>
<strong>这整个范例</strong>没有在任何栏段里宣告“高度(height)”属性，这是为了避掉一些浏览器表现“高度(height)”属性的独特方式。
因为这些条件的限制，这个版面非常适合那些总是有很长的中间栏段的网页，像是 weblogs。
</p>
<p>
页首、页尾和中间栏段是“固定的(static)”（或说“相对的(relative)”），而这三者一起定义了网页的尺寸。你可以帮页首和页尾指定“高度(height)”。
</p>
<p>
在原始文件里，以绝对位置表示的 div#rightbox 放置在 div#leftbox 之后，
因此这些 div 的“top”属性可以忽略。
这会让它们待在它们该在的垂直方向起点，也就是说它们是固定的（直接连在固定的页首下）。
所以如果页首因为额外的内容扩大，三个栏段都会往下调整，这样不是很棒吗？
</p>
<p>
<strong>Mozilla 中</strong>，因为垂直方向的舍入误差(rounding error)，在某些分辨率里，页尾下方可能有 1px 的空隙，
<a href="mozshift.html">这个范例</a>描述得更详细。
</p>
<p>

<strong>Nav4 中</strong>没办法使用像“div#leftbox”这类语法，所以请用“#leftbox”来代替。我的写法只是为了要明确地表示。
</p>
<p>
<strong>致谢：</strong>再次感谢<a href="../../../www.l-c-n.com/default.htm">Philippe Wittenbergh</a>
，因为他的帮忙，让这个范例更为完善。<strong>更感谢</strong> 
<a href="../../../www.mark.ac/help/default.htm">Mark Howells</a>
，因为他提供了最初的 body 背景点子。 
</p>
<p  class="small alignright">
<a href="../../../users.rraz.net/mc_on_the_rocks/default.htm"
 title=" My mountain bike site "><strong>Big John</strong></a>

<a href="mailto:johnthebig66@yahoo.com" title="If you've found something new and
interesting to say about any CSS subject, please contact me. I want to know! ">e-mail</a> 
©positioniseverything<br />
最后更新日期： September 6, 2002<br />
Created August 24, 2002
</p>
<p class="small alignright">
<a href="../../../ccca.nctu.edu.tw/~hlb/trans/pie/thr.col.stretch.html" title="">繁体中文翻译：</a><strong>yyhuang</strong>

简体中文转换:<br />
<a href="../../../www.onestab.net/default.htm"><strong>onestab</strong></a>

<p>
<strong>以下是填满栏段用的</strong><br /><br />
Why don't cannibals eat clowns?<br />
Answer: They taste funny.<br /><br />
What is the difference between a lousy golfer and a lousy skydiver?<br />

Answer: A lousy golfer goes WHAP! "Oh crap!". A lousy skydiver goes "Oh crap!" WHAP!<br /><br />
Did you hear about the geneticist that tried to cross a potato and a chicken?<br />
He wanted to produce a chicken that would definitely NOT cross the road, but instead, 
got a bunch of potatoes that sat around pecking eachother's eyes out.<br /><br />
How many Psychiatrists does it take to change a light bulb?<br />
Answer: Only one, but the bulb has to really <em>want</em> to change.<br /><br />
Why did the egg cross the road?<br />
Answer: It had an inclination.
</p>

</div>

<h2>
自由伸展的三栏式版面（Three Column Stretch）（页尾）
</h2>

</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

2、纯CSS制作的新闻网站中的文章列表

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

3、CSS左右两列自适应高

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">

</style>
</head>
<body>
<div class="da_div">
  <div class="top_540">
    <div class="t540_text">fdsfjdsklfds</div>
  </div>
  <div class="top_200">
    <div class="t200_text">fdfdsfdsfdsfds<br />
      fdsfdsfds<br />
      fdsfds<br />
      fdsfdsfds<br />
      fdsfdsf<br />
      <br />
      Fds<br />
      <br />  fdsfdsfds<br />
      fdsfds<br />
      fdsfdsfds<br />
      fdsfdsf<br />
      <br />
      Fds<br />
      <br />  fdsfdsfds<br />
      fdsfds<br />
      fdsfdsfds<br />
      fdsfdsf<br />
      <br />
      Fds<br />
      <br />  fdsfdsfds<br />
      fdsfds<br />
      fdsfdsfds<br />
      fdsfdsf<br />
      <br />
      Fds<br />
      <br />  fdsfdsfds<br />
      fdsfds<br />
      fdsfdsfds<br />
      fdsfdsf<br />
      <br />
      Fds<br />
      <br />
      fds</div>
  </div>
</div>
<div class="da_div_xia">
  <div class="top_540"> </div>
  <div class="top_200"> </div>
</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

单行一列
以下是引用片段：

引用内容

body { margin: 0px; padding: 0px; text-align: center; }
#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }

两行一列
以下是引用片段：

引用内容

body { margin: 0px; padding: 0px; text-align: center;}
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px;}
#content-end {margin-left:auto; margin-right:auto; width: 400px; width: 370px;}

三行一列
以下是引用片段：

引用内容

body { margin: 0px; padding: 0px; text-align: center; }
#content-top { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
#content-mid { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }

单行两列
以下是引用片段：

引用内容

#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }
#bodycenter #dv1 {float: left;width: 280px;}
#bodycenter #dv2 {float: right;width: 410px;}

两行两列
以下是引用片段：

引用内容

#header{ width: 700px; margin-right: auto;margin-left: auto; overflow: auto;}
#bodycenter { width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }
#bodycenter #dv1 { float: left; width: 280px;}
#bodycenter #dv2 { float: right;width: 410px;}

三行两列
以下是引用片段：

引用内容

#header{ width: 700px;margin-right: auto; margin-left: auto; }
#bodycenter {width: 700px; margin-right: auto; margin-left: auto; }
#bodycenter #dv1 { float: left;width: 280px;}
#bodycenter #dv2 { float: right; width: 410px;}
#footer{ width: 700px; margin-right: auto; margin-left: auto; overflow: auto; }

单行三列
绝对定位
以下是引用片段：

引用内容

#left { position: absolute; top: 0px; left: 0px; width: 120px; }
#middle {margin: 20px 190px 20px 190px; }
#right {position: absolute;top: 0px; right: 0px; width: 120px;}

float定位一
xhtml:
以下是引用片段：

引用内容

<div id="warp">
<div id="column">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
<div class="clear"></div>
</div>
<div id="column3">这里是第三列</div>
<div class="clear"></div>
</div>

CSS:
以下是引用片段：

引用内容

#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}

float定位二
xhtml:
以下是引用片段：

引用内容

<div id="center" class="column">
<h1>This is the main content.</h1>
</div>
<div id="left" class="column">
<h2>This is the left sidebar.</h2>
</div>
<div id="right" class="column">
<h2>This is the right sidebar.</h2>
</div>

CSS:
以下是引用片段：
body {margin: 0;padding-left: 200px;padding-right: 190px;min-width: 240px;}
.column {position: relative;float: left;}
#center {width: 100%;}
#left {width: 180px; right: 240px;margin-left: -100%;}
#right {width: 130px;margin-right: -100%;}

两行三列
xhtml:
以下是引用片段：

引用内容

<div id="header">这里是顶行</div>
<div id="warp">
<div id="column">
<div id="column1">这里是第一列</div>
<div id="column2">这里是第二列</div>
<div class="clear"></div>
</div>
<div id="column3">这里是第三列</div>
<div class="clear"></div>
</div>

CSS:
以下是引用片段：

引用内容

#header{width:100%; height:auto;}
#wrap{ width:100%; height:auto;}
#column{ float:left; width:60%;}
#column1{ float:left; width:30%;}
#column2{ float:right; width:30%;}
#column3{ float:right; width:40%;}
.clear{ clear:both;}

三行三列
xhtml:
以下是引用片段：

引用内容

CSS:
以下是引用片段：

引用内容

PS:这里列出的是常用的例子，而非研究之用，对一每个盒子，都没有设置margin,padding,boeder等属性！

CSS布局自适应高度解决方法

Wed, 14 May 2008 15:35:00 +0800

原作者:Alex Robinson
原文标题:Equal Height Columns

这是一个比较典型的三行二列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，按一般的做法，大多采用背景图填充、加JS脚本的方法使列的高度相同，本文要介绍的是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。

先看代码：

引用内容

#wrap{
overflow: hidden;
}

#sideleft, #sideright{
padding-bottom: 32767px;
margin-bottom: -32767px;
}

实现原理：

块元素必须包含在一个容器里。

应用overflow: hidden 到容器里的元素。

应用 padding-bottom（足够大的值）到列的块元素。

应用margin-bottom（足够大的值）到列的块元素。

padding-bottom将列拉长变的一样高，而负的margin-bottom又使其回到底部开始的位置，同时，溢出部分隐藏掉了。

兼容各浏览器

IE Mac 5

得到高度正确，所以要过滤掉上面的代码。

引用内容

/*\*/
#sideleft, #sideright{
padding-bottom: 32767px;
margin-bottom: -32767px;
}
/**/

Opera

1. Opera7.0-7.2不能正确清除溢出部分，所以要加：

引用内容

/* easy clearing */
#wrap:after
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrap
{
display: inline-block;
}
/*\*/
#wrap
{
display: block;
}
/* end easy clearing */
/*\*/

2. Opera8处理overflow: hidden有个BUG,还得加上以下代码：

引用内容

/*\*/
#sideleft, #sideright
{
padding-bottom: 32767px !important;
margin-bottom: -32767px !important;
}
@media all and (min-width: 0px) {
#sideleft, #sideright
{
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
#sideleft:before, #sideright:before
{
content: '[DO NOT LEAVE IT IS NOT REAL]';
display: block;
background: inherit;
padding-top: 32767px !important;
margin-bottom: -32767px !important;
height: 0;
}
}
/**/

3.Opera9的B2在修正8的bug.

测试环境：IE5.01、IE5.5、IE6.0、Firefox1.5、Opera8.5、Netscape 7.2通过。

最终效果:

运行代码框

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Equal height(DIV+CSS布局中自适应高度的解决方法)</title>
<style type="text/css">
body{
	padding: 0;
	margin: 0;
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	line-height: 140%;
	text-align: center;
	background:#E7DFD3;
}
#wrap{
	width: 750px;
	margin: 0 auto;
	overflow: hidden;
}
#header{
	background: #E8E8E8;
}
#sideleft{
	width: 580px;
	float: left;	
	background: #FFF;
	text-align: left;
}
#sideright{
	width: 170px;
	float: left;
	background: #F0F0F0;
	text-align: left;
}
/* easy clearing */
#wrap:after
	{
	content: '[DO NOT LEAVE IT IS NOT REAL]'; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}
#wrap
	{
	display: inline-block;
	}
/*\*/
#wrap
	{
	display: block;
	}
/* end easy clearing */
/*\*/
#sideleft, #sideright
	{
	padding-bottom: 32767px !important;
	margin-bottom: -32767px !important; 
	}
@media all and (min-width: 0px) {
#sideleft, #sideright
	{
	padding-bottom: 0 !important;
	margin-bottom: 0 !important; 
	}
#sideleft:before, #sideright:before
	{
	content: '[DO NOT LEAVE IT IS NOT REAL]';
	display: block;
	background: inherit;
	padding-top: 32767px !important;
	margin-bottom: -32767px !important;
	height: 0;
	}
}
/**/
#footer{
	background: #E8E8E8;
	width: 100%;
	float: left;
}
h1,h2,address,p{
	margin: 0;
	padding: .8em;
}
h1,h2{font-size: 20px;}
</style>
</head>
<body>
<div id="wrap">
  <div id="header">
    <h1>Head</h1>
  </div>
  <div id="sideleft">
  <h2>sideleft</h2>
    <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>
    <p> 像素是计算机屏幕上的不可缩放的点，而一个
      h3 就是一个字大小的方块。由于字体大小的变化， h3
      代表用户喜欢的文字大小的相对单位。 </p>
    <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>
    <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>
    <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>
    <p> 像素是计算机屏幕上的不可缩放的点，而一个
      h3 就是一个字大小的方块。由于字体大小的变化， h3
      代表用户喜欢的文字大小的相对单位。 </p>
    <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>
    <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>
   
  </div>
  <div id="sideright">
  <h2>sideright</h2>
    <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>
    <p> 像素是计算机屏幕上的不可缩放的点，而一个
      h3 就是一个字大小的方块。由于字体大小的变化， h3
      代表用户喜欢的文字大小的相对单位。 </p>
    <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>
    <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>
  </div>
  <div id="footer">
    <address>
    Footer
    </address>
	<p>制作：<a href="<a href="http://www.forest53.com" target="_blank" rel="external">http://www.forest53.com</a>">forestgan</a></p>
  </div>
</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

关于链接和留言

Wed, 14 May 2008 09:23:18 +0800

留言本打算一直关闭下去了~~每次一开上面就是广告一堆~~~我自己也嫌删除麻烦~~~要给我留言的就直接在这个后面留言吧

想我个交换链接的请在这后面留言
交换链接事情请先填写上本站链接
名称：牧童"Blog
地址：http://www.mt53.com
logo：http://www.mt53.com/blog/logo.gif

自己的站点

Thu, 10 Apr 2008 11:47:08 +0800

好久没发做的东西了刚好这几天弄好了一个就发上来大家看看吧~~
顺便在给我点意见~~
没意见我不知道那里不好啊~~~~

第一次完全全部用DIV+CSS布局嘿嘿写得我要死
不过好像兼容不是很好~~~~嘿嘿
不过只要是IE7.0以上的核心看起来是没问题的

现在还只弄好了一个首页嘿嘿预览地址

这是管理样式预览地址

用CSS控制图片自适应大小

Thu, 27 Mar 2008 10:16:19 +0800

图片自动适应大小是一个非常常用的功能，在进行制作的时候为了防止图片撑开容器而对图片的尺寸进行必要的控制
代码：

引用内容

.img {
max-width:600px;
width:600px;
width:expression(document.body.clientWidth>600?"600px":"auto");
overflow:hidden;
}

◎ max-width:600px; 在IE7、FF等其他非IE浏览器下最大宽度为600px。但在IE6中无效。
　◎ width:600px; 在所有浏览器中图片的大小为600px;
　◎ 当图片大小大于600px，自动缩小为600px。在IE6中有效。
　◎ overflow:hidden; 超出的部分隐藏，避免控制图片大小失败而引起的撑开变形。

仿flash图片展示效果

Fri, 07 Mar 2008 12:32:55 +0800

蓝色上看到的感觉蛮有用的嘿嘿先当下来以备以后只用

HTML代码

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿flash图片展示效果</title>
<style>
.showBox{ position:relative; height:138px; margin-top:100px;}
.showBox img{ position:absolute; border:0; width:150px; background:#000; cursor:pointer;}
</style>
<script type="text/javascript">
var Container_div;
var Imgs;
var div_left;
var maxZoom = 1.6;
var timer;
function $(id){return typeof(id) == "string"?document.getElementById(id):id;}
function getEvent(){
	var e = window.event || getEvent.caller.arguments[0];
	if(document.all){
		e.target = e.srcElement;
		e.pageX = e.clientX + document.documentElement.scrollLeft;
		e.pageY = e.clientY + document.documentElement.scrollTop;
	}
	return e;
}
function getLeft(element){
	var left = 0;
	while(element.offsetParent){
		left += element.offsetLeft;
		element = element.offsetParent;
	}
	return left;
}
function getURL(url){
	if(url)location.href = url;
}
function init(){
	Container_div = $("Container");
	Imgs = Container_div.getElementsByTagName("img");
	div_left = getLeft(Container_div);
	for(var i = 0; i < Imgs.length; i++){
		var image = Imgs[i];
		image.i = i;
		image.w = image.width;
		image.h = image.height;
		image.l = i - 1 >= 0 ? Imgs[i - 1].l + Imgs[i - 1].w + 20 : 230;
		image.t = 0;
		image.style.left = image.l + "px";
		image.onclick = function(){getURL(this.getAttribute("longdesc"))};
		image.onmousemove = MouseOver;
		image.onmouseout = MouseOut;
	}
}
function MouseOver(){
	if(timer)clearTimeout(timer);
	/*控制鼠标所指图片的位置和大小*/
	var e = getEvent();
	var zoom = ((e.pageX - this.l - div_left > this.w / 2 ? this.l + this.w - e.pageX + div_left : e.pageX - div_left - this.l) * 2 / this.w) * (maxZoom - 1) + 1;
	var tmpWidth = this.w * zoom;
	var tmpHeight = this.h * zoom;
	var tmpLeft = this.l - (tmpWidth - this.w) / 2;
	var tmpTop = this.t - (tmpHeight - this.h) * 0.8;
	this.style.width = tmpWidth + "px";
	this.style.left = tmpLeft + "px";
	this.style.top = tmpTop + "px";
	
	/*控制周围图片的位置*/
	var index = this.i;
	var imageIdx = Imgs[index];
	var zIndex = Imgs.length;
	var space = 100;
	for(var i = 0; i < Imgs.length; i++){
		var image = Imgs[i];
		i <= index ? zIndex++ : zIndex--;
		image.style.zIndex = zIndex;
		if(i != index){
			var offset = imageIdx.l + imageIdx.w + div_left - e.pageX;
			var ambit = image.w * 0.4;
			if(i < index){
				if(i == index - 1 && offset > ambit){
					image.style.left = image.l - space + (offset - ambit) * 0.8 + "px";
				}else{
					image.style.left = image.l - space + "px";
				}
			}else if(i > index){
				offset = e.pageX - imageIdx.l - div_left;
				if(i == index + 1 && offset > ambit){
					image.style.left = image.l + space - (offset - ambit) * 0.8 + "px";
				}else{
					image.style.left = image.l + space + "px";
				}
			}
		}
	}
}
function MouseOut(){
	this.style.width = this.w + "px";
	this.style.top = this.t + "px";
	step();
}
function step(){
	move();
	timer = setTimeout(step,20);
}
function move(){
	var tag = 0;
	for(var i = 0; i < Imgs.length; i++){
		var image = Imgs[i];
		var tmpL = image.offsetLeft;
		if(image.l - tmpL < 1) tag++;
		var desX = tmpL + (image.l - tmpL) * 0.1;
		image.style.left = desX + "px";
	}
	if(tag == Imgs.length) clearTimeout(timer);
}
window.onload = function(){
	init();
}
</script>
</head>
<body>
<div class="showBox" id="Container">
	http://www.sina.com.cn</a>"/>
	http://www.baidu.com</a>"/>
	http://www.163.com</a>"/>
</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

DIV+CSS布局中的居中问题

Tue, 19 Feb 2008 15:20:17 +0800

这两天在改一些页面途中碰到DIV定义居中的问题，自带属性中没有这项，网络上搜索了一下，得出的结论还是很多的，特当了一下来，以备以后之用嘿嘿，忘记了有地方找^_^

1、DIV居中

引用内容

body {text-align: center;}
div {margin-right: auto; margin-left: auto;}

说明：对于IE，在父元素定义“text-align: center;”就可以了对于FF等其他浏览器，仅这样不能居中，需在子元素中定义“margin-right: auto; margin-left: auto;”。

2、背景居中

引用内容

body {background:url(#) #fff no-repeat center;}

说明：参数中的center是对背景位置的定义。

3、文本垂直居中

引用内容

div {vertical-align:middle;line-height:？px;}

说明：vertical-align:middle;表示行内垂直居中，我们将行距调整到和整个DIV一样高，文字就垂直居中了。

4、FF和IE中DIV兼容问题居中

body {text-align: center;}

引用内容

#DIV {
margin: 0 auto;
}

基本加上这个就能居中了

或者是加上

引用内容

Margin-Right: auto;Margin-Left: auto;

也是居中的只是上面的相对简单一些

css渐变色代码

Mon, 21 Jan 2008 16:36:34 +0800

css渐变色代码
感觉蛮使用的

GradientType  渐变方式    0：上下变化    1：左右变化
StartColorStr  开始颜色
EndColorStr    结束颜色

引用内容

<TABLE style="WIDTH: 577px; HEIGHT: 332px" border=1><TBODY>
<TR>
<TD style="FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,EndColorStr='#ffffff',StartColorStr='royalblue')">dfdafadfafdafa</TD>
<TR>
</TR>
</TBODY>
</TABLE>

HTML代码

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

符合Web标准的web UI

Wed, 09 Jan 2008 10:57:52 +0800

序
我从2004年末开始接触web标准，2005年5月正式采取完全的web标准方式的网页制作，2005年8月，第一个符合web标准的网站UI开发工作完成。直至今日，经历了无数的艰辛，也有过许多的困惑。所幸，我的瑞典籍的Project Leader是一个很有经验的人，他告诉了我很多关于web标准国内并不了解的东西，我这几年技术方面的成长离不开他的支持和引导，感谢Andreas Liljefilt！在这里，我把它们告诉大家，也希望能有更多的人来讨论。

Chaper 1 什么是web标准？Div+css的谬误。
提到web标准，就不得不先说一说国内业界非常流行的一个词——Div+css。这个词在国内简直是一个潮流，不仅互联网上一直在提，大量的教程中使用这个词，就连一些出版的书籍也是用了这个概念。然而，甚少人知道的是，这个概念本身是错误的。有好事的朋友不妨去google搜索一下（先调整到英文界面，这样可以强制让它搜索google.com而不是google.cn），"div+css"这样一个关键字是根本找不到任何一个英文网页，全部都是中文的。没错，其实所谓的div+css就是一个中国特有的理解和概念。我甚至不知道这个词是谁先提出来的，然而，它对web标准中xhtml/css的网页构建方法的理解几乎是完全错误的。

回归正题，web标准究竟是什么？Web标准是w3c组织规定的各种web上所使用的语言的标准和规范的集合。

我们目前究竟接触到了web标准的多少？打开 w3c的官方网站，我们在左侧可以看到如下列表：

引用内容

# Accessibility
# Amaya
# CC/PP
# Compound Document Formats
(CDF)
# CSS
# CSS
Validator
# Databinding
# DOM
# Efficient XML
Interchange
# eGovernment
# GRDDL
# Health Care and Life
Sciences
# HTML
# HTML Tidy
# HTML Validator
# HTTP
# Incubator
# InkML
# Internationalization
# Jigsaw
# Libwww
# MathML
# Mobile Web Initiative
(W3C-MWI)
# Multimodal
Interaction
# OWL
# Patent Policy
# PICS
# PNG
# POWDER
# Privacy and P3P
# RDF
# Rich Web Clients
# Rules
# Security
# Semantic Web
# Service Modeling Language
(SML)
# SMIL
# SOAP/XMLP
# SPARQL
# Style
# SVG
# Timed Text
# URI/URL
# Validators
# Voice
# Ubiquitous Web
Applications
# WAI
# Web API
# Web Application
Formats
# Web Architecture
(TAG)
# WebCGM
# Web Services
# WS-Addressing
# WS-CDL
# WSDL
# WS-Policy
# XForms
# XHTML
# XHTML2
# XLink
# XML
# XML Base
# XML Encryption
# XML Key Management
# XML Processing
# XML Query
# XML Schema
# XML Signature
# XPath
# XPointer
# XSL and XSLT

全看下来后是不是觉得很晕？没错，这个就是web标准目前的全部技术规范。web标准包含了这么多的内容，而我们目前所说的div+css只是其中xhtml/css实现方式的不完整的一部分而已。

* 为什么是xhtml/css？

其他的部分，我不想说的太多，第一是因为我也没办法全都弄懂，第二是其中有一大半浏览器支持不完全甚至根本就不支持。XML是web标准中对网页实现的最终目标。也就是web页面数据化和语义化，然而由于浏览器的支持不完善和兼容问题，目前优秀、兼容性强的纯xml网站只是停留在幻想里而已。因此，现在主流的网页实现方式就是xhtml/css。首先，xhtml与html大部分兼容，并且可以让目前大多数的浏览器直接阅读。css主流的几大浏览器也支持的非常完善。再加上ECMAScript(不说Javascript的原因是Javascript的概念中包含了很多与标准不同的浏览器私有定义)，已经足够实现web UI布局的大部分需要了。

Chapter 2 web标准真的是要完全不用表格？

好像是在2005年的时候，一篇叫做《把表格从你的网页中扔出去》（找不到文章的链接了，但确实有这篇文章）的在线文章，似乎给了人们一个错觉，要符合标准，那么表格在网页中就完全不能使用了。必须用div来代替。也许div+css这个概念就是这样被想当然的创造出来的（源自表格布局）。但事实上，web标准并不是完全不允许使用表格。而是要求摒弃使用表格来布局的做法。同时，也不再使用布局这个概念。而是提倡结构与表现分离。这时，就有一些人会产生一个疑惑，如果说xhtml代表结构，css用来控制表现，那么，布局该如何解决？相信现在接触web标准的朋友不会再有这个疑惑了吧？结构和表现结合起来就形成了布局。既然不能用表格来做布局了，那么表格还有什么用呢？似乎很多人忘了表格在html中的原始定义——展现结构化数据表格。举个例子，某学校班级的期中考试成绩表，这种数据，就是一个非常明显的表格。web标准中绝对没有要求你用div来模拟表格，那是非常蠢的做法。这几天在经典论坛上还看到有人产生这样的疑惑，表格形式的格式化数据，用表格比用div要方便的多，他们搞不懂为什么一定要用div来表现表格，现在我告诉你答案了，该用表格展现数据的时候就要用表格。

Chapter 3 为什么要用web标准？怎么样才算是符合web标准？

很多人会说例如兼容性好、代码易懂、代码量小、结构合理、甚至有人说使用标准可以实现比表格更丰富的样式等各种理由来支持web标准，而web标准也的确具有这些优点，然而，这些却并非web标准真正要做的。

并非把表格换成div就是符合web标准了。也并非使用xhtml和css就是符合web标准。甚至就算你的代码能够通过w3c的验证，也很难说它就完全符合web标准。事实上，web标准的最终目标不是为了让人容易看懂网页如果仅仅是为了让人容易看懂，那么表格布局已经足够了。它的最终目标是为了让计算机能够读懂网页。看下面几个例子：

表格布局的一段代码：

引用内容

<table width="50%">
<tr>
<td width="30%"></td>
<td width="30%"><font size="3">web</font>标准的概念</td>
<td width="40%">如何实现<b>标准化制作</b></td>
</tr>
<tr>
<td colspan="3"><font color="red"><font size="3">web</font>标准在网页中的使用</font></td>
</table>

web标准（XHTML/CSS）实现的一段代码：

引用内容

<h3><span>web</span>标准的概念</h3>
<h3>如何实现<em>标准化制作</em></h3>
<h3 class="important"><span>web</span>标准在网页中的使用</td>

web标准(XML)实现的另一段代码：

引用内容

<articles>
    <articletitle>web标准的概念</articletitle>
    <articletitle em="4" emlegth="3">如何实现标准化制作</articletitle>
    <articletitle level="important">web标准在网页中的使用</articletitle>
<articles>

看过以上几段代码后，我们先来分析一下。第一段是表格布局的代码，它把整块分成了两行，第一行用了三列，第一列是空的用于缩进，后面两列分别放了两篇文章的标题。其中的英文文字采用了不同于中文的字号。第二篇文章的标题上还有一部分是加粗强调的。第二行则是一篇文章的标题占用了整行，并且以红色显示文章标题。在页面展现出来之后，我们能够明白下面的信息：第一篇文章是普通文章，第二篇文章中有一个概念是很重要的。而第三篇文章则非常重要。然而，在代码中我们却很难看出这一点。因为没有人说过加粗就一定是强调。也没有人告诉我们红色就一定表示重要（如果是在暗红色背景下，它甚至表示不重要，光看代码是不知道页面展现出来是什么样子的，是否重要自然无从判断），在这段代码中甚至没有告诉我们，这几段文字是文章标题。

第二段代码就要清楚的多了，首先，h3标签告诉我们，它是一个标题。span标签完全没有含义，会被分析器忽略掉。而em标签则表示强调。程序很容易明白它究竟是什么。最后一行指定的的类important则可以告诉分析器，这篇文章十分重要。

最后，我们再看第三段中的XML代码，首先，articletitle已经明明白白的告诉我们，它是文章标题，多余的信息没有了。事实上多数情况下是否强调一段文字中某一个部分对于分析器来说并不重要。因此，加粗强调被放到了属性里面。最后一条，level属性非常明白告诉分析器，这个属性定义的是文章的级别。而它的属性important则告诉分析器，它的级别是重要。将来采用这种结构，我们的网络将会更加智能，而搜索引擎的搜索结果也将会更加准确。当然，好处远远不只是这些。

直到现在为止，第三段代码要想真正完美实现并且兼容，仍然只能停留在我们的梦想里。

Chapter 4 web标准的局限

web标准并没有有些人说的那么天花乱坠无所不能。正如很多在学习web标准开发的朋友所体会到的那样，如果想要开发的产品完全符合web标准，它的局限性其实很大。举例来说，如果按照web标准的建议不使用空结构块(如空div)、不使用无意义块（如仅作为装饰边角的图片）、不做无意义的DOM结构嵌套，那么想实现一个可拉伸大小的园角块都是非常困难的。目前网上流行的几种做法都不符合这个要求。这就是为什么欧美的许多网站往往结构以方块为主并且非常干净简练，一个原因是他们习惯这样的风格，但更重要的原因是为了UI的可用性和符合标准而在牺牲了美观，因为网站的DOM结构越复杂，互动表现越复杂，触发BUG的可能性就越大，兼容性也越难调整，此外，这些效果往往还不能完善。有兴趣的朋友不妨仔细看看一直被设计人员称道的大多数韩国网站，这种类型的网站和欧美的主流风格正好完全相背，走了另一个极端，以界面华丽花哨著称，因此特别能获得美术出身的朋友的青睐，在使用过程中总会出现各种各样的小问题。在 FF下也没有几个可以完美表现的。此外，这类网站在中国也是行不通的。大家不妨想想，究竟有哪个模仿韩国的网站能够获得比较高的知名度的？原因嘛，第一是它们经常造成浏览器速度过慢，第二是在网络条件不好的情况下下载经常很慢，第三，对服务器的负载压力非常大，很容易提高服务器的投入成本，最后，带来高带宽成本。

Chapter 5 web标准的背后，企业该如何适应web标准？

web标准有诸多好处，也带来了美好的前景，应当普及和推广。然而，盲目地追随标准，却可能造成整个项目的失败。要知道，web标准并非孤立的产生，而是于整个软件工程和web项目管理的发展有关。下面，我们来看一下，在适应web标准的过程中，究竟有哪些问题会造成项目失败。

1. 对标准的理解错误

前面说了，国内其实大多数企业和开发人员并不了解web标准。甚至有很多连web标准这个概念都不知道。反而对div+css这个被人错误解释出来的怪胎耳熟能详。设计师在进行设计的时候，往往天马行空的去做设计，完全没有任何章法可言，同样的内容，甚至在首页是三个字的标题，到了二级栏目页就会变成五个字，从根本上破坏了结构的可重用性。而UI程序员（请原谅我使用这个词语，因为发展到现在的web标准网页开发已经不是美术出身的设计师能够完全掌握的了）为了适应设计师的设计，只好拼命叠加各种奇怪的DOM结构，结果使本来用十行html代码就能写出来的页面最后用了三十行甚至更多，结构也一片混乱。css就更不用说了，不仅乱，而且乱的毫无章法。这种开发的方式经常造成最后只要设计上修改一点，就要对代码作非常大的改动，甚至整个开发流程从头做一遍，根本没有做到web标准中宣传的改版成本小，正好相反，改版成本有时会被无限提高。而混乱的结构和样式也会引发浏览器更多的BUG，让UI程序员不得不花更多的精力去写hack。从而进一步提高开发成本。

2. 没有任何规划，上手就做

在早期，由于表格布局的完全可视化编辑，使网页开发是可以完全不需要规划，一边做一边修改的。而我们大多数企业目前的开发流程也是如此。往往网站开发接近完成，策划人员还没有完全确定网站要展示的内容和提供的功能。但欧美许多公司的做法却是先做一份十分完善的策划和需求描述，然后建立用例模型、分析网站需求、建立逻辑模型，规划UI模块、规划功能模块、定义UI和功能模块的接口（大多数情况下这个接口就是我们现在经常使用的各种模板标签，事实上在欧洲比较完善的团队，这些标签在开始设计前就已经规定好了）、定义 flash应用程序的数据接口（一般情况下是XML文档）、定义内容框架（以便设计师在设计网站时了解网站的每个页面上究竟应该放些什么），这一大堆的各种文档几乎可以让任何两个不同的团队做出功能一模一样的两个网站来，除了美术设计不同。我就见过一份不过二十多个模板的策划案，仅仅是涉及UI设计和开发的策划和分析文档打印出来有300多页，密密麻麻的几十万字！为什么要说中国和欧美企业的开发过程的不同呢？原因很简单。中国的流程随意性更大，而欧美的流程则更加系统。然而web标准在设计的时候却是以欧美的设计流程为主。这就是我上面说的，没有任何规划，上手就做经常会造成项目失败的原因。一个边策划边构建的开发流程，采用了一份为完善的系统工程要求订制的标准，不失败才是奇迹！

3. 主导人员角色错误，外行管理内行

这几乎是中国百分之八十项目失败的主要原因！对比东西方的管理，会发现一个奇怪的现象，在西方一个项目是由专业的项目经理主导，而东方则是谁职位最高就由谁主导。总经理、部门行政经理甚至市场人员干预网站开发进程在中国屡见不鲜，甚至有向非web专业市场人员主导项目管理的倾向。在一个web开发团队中，有时起主导作用的项目经理或者策划人员并非专业的项目经理或者web策划人员，最夸张的，我目前在做的项目竟然是以设计师的设计稿为主导，设计成什么样子，就必须作成什么样子，并且整个网站的设计稿完全没有任何关于互动方面的说明（其实是绘图师，他们对web的结构和技术限制是完全懂的）。而我认识的很多朋友也都因为上级在开发进程中的胡乱干预（注意，是开发进程中，而不是策划过程）叫苦连天，甚至有时会造成整个项目必须彻底推翻重来的尴尬境地。不断延期或者推翻重来的项目开发过程，无限翻倍的项目成本，造成项目失败也就不怎么新鲜了。似乎这一点与web标准并没有关系，然而，在web标准化开发要求的团队和流程里，第一点要求就是项目经理和策划人员必须专业并且其技能范围符合项目规模！事实上这也是任何项目管理的必要条件。

那么，企业和开发人员究竟该如何适应web标准？以下几点注意事项仅供参考：

1、完善的前期策划和分析
2、完善的前期逻辑模型以及项目规范性文档的制定
3、尽可能将行政性干预移到策划阶段（按照国内的情况，做到这一点可能很困难）
4、尽可能向后兼容，在项目规范性文档制定阶段对网站进行完善的模块化规范（主要是为了提高网站模块代码的可重用性以及最大程度上降低改版成本）。
5、尽可能简化UI代码的DOM结构，以降低维护成本
6、在设计和开发过程中首先保证UI的可用性，在此基础上保证其美观（好用第一，好看第二）。
7、项目阶段明确，要让单位的高层明白，在项目的alpha期之前是不可能有能让他们看的懂用的通的完善网站出现的。
8、项目团队主要成员必须要用专业人员，并且要让这些人员有足够的决定权（如果项目负责人无法主导项目走向，项目就必然产生缺陷甚至失败）。

这篇文章到这里已经结束了，我不知道这篇文章究竟会不会让那些一意孤行的BOSS们看到，更不指望能给他们带来多少影响。如果哪个BOSS看到了，希望你考虑一下你的投资和钞票。我所说的这一切，不仅仅是为了减轻开发人员的负担，更是为了让开发人员能够实现一个赚钱的项目，从而在这个赚钱的项目中获得更多的金钱和良好的心情。而能够决定这一切的，并非开发和设计人员。

（HtmlEditor）OFFICE2007风格在线编辑器

Mon, 07 Jan 2008 10:33:24 +0800

使用方法：

程序代码

该文件只允许会员下载! 登录 | 注册