王国安博客 wangguoan.com

量化商业需求的必要因素一：“低调但聪明”的处理注册流程

gooann@gmail.com(andrew) — Wed,22 Oct 2008 16:11:22 +0800

互联网上任何产品的发布都存在其隐性或显现的商业需求，实现这些需求的前提少不了人气，就是要让很多人去参与近来。不管是浏览信息也好、发布信息也好。总之得有人关注，用一句时髦的话说就是“注意力经济”
，而注意力是对互联网产品而言一种稀缺资源，大家都争先恐后，不管正经也好，扯淡也罢，反正得"出镜"。

但是如何你的产品拥有更多的用户呢？是你的信息够吸引人，还是你制定的游戏规则本身具备相当的吸引力？在“WEBX.0时代”，制定游戏规则让用户有兴趣来发布信息成为关注的焦点，当然这一结果必须是双赢的。现在很多的网站由于其商业上的需求，需要用户先注册才能参与信息的发布，但是我作为一个互联网用户对于这样麻烦的操作是感同身受，我经常能感觉到其他用户经常有类似的抱怨，“我只想发一条信息，我只想体验一下，为什么要让我一定要先填一堆又长又臭的表单，刚有兴趣就被注册/登陆的提示给打断，很不爽！”。

用户不爽，后果当然很严重！大多数商业网站都需要先注册再进行其他操作，这个流程却给很多意向并不是特别高的用户设置了很高的门槛，个人觉得注册流程是不可少的部分，毕竟商业需求摆在那里，但是这个过程必须做的“低调”一些，但不能缺乏优秀的品质，尽量让用户在操作过程中忘记注册是负担，甚至忘记注册的存在。下面分享一些“低调但优秀”的注册流程：

1、例如 ioffer.com

一家美国的C2C网站。用户点页面上方的“sell”直接来到产品的发布表单，完成产品发布预览的同时，提示用户注册或登陆来确认产品的发布。用户完成了来网站的主要目的-发布产品。注册流程就不会显得让人讨厌。

2、一个基于家族族谱的SNS网站，geni.com

这家网站的注册流程可谓是相当的“低调”，你几乎感觉不到他的存在。在完成创建自己族谱的同时，无形中已经注册成功。有一点不好的地方就是并没有提醒用户初始密码是发送到邮箱里的。

谷歌发布了十周年庆典站点:10的100次方”奖励计划

gooann@gmail.com(andrew) — Sat,27 Sep 2008 16:34:15 +0800

谷歌发布了十周年庆典站点www.google.com/tenthbirthday/并推出了“10的100次方”奖励计划：

据说：大家可以在10月20日前提交自己的好点子，谷歌将于2009年1月27日宣布最好的100个点子，由网友投票选出前20名。然后，谷歌将成立一个监理委员会选出最多五个优胜点子，为其提供1000万美元的资金。太吸引人了！！！！！！！！！！

庆典站点的操作体验：
每刷新一次刷新随机出现5个问题。

点击任何一条问题后，会进入该事件所对应的Google大事年表（1995~2008），
并弹出该事件详细信息。

查看Google大事年表的方法：
1、可使用鼠标点击或拖动下方的时间轴来进行浏览，赞一个!
2、利用搜索功能搜索大事年表

总体感觉：界面清爽、人性化的界面交互、操作简便、是一个前台开发和UI设计的完美结合!

选项卡切换

gooann@gmail.com(andrew) — Tue,09 Sep 2008 13:58:57 +0800

一个选项卡切换效果
下面这个标签是关键所在，共有5个参数，来赋予切换的功能。

程序代码

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=utf-8" />
<title>选项卡</title>
<style type="text/css">
/*
	选项卡
----------------------------------------------------------------
*/
body{font-size:12px;font-family:Arial,Helvetica,sans-serif;text-align:center;margin:12px auto 0 auto;width:600px;}
h1,h2,h3,h4,h5,h6,p,form,dl,dt,dd,ul,ol{margin:0;padding:0;font-size:100%;}
ul{list-style:none;}
a{text-decoration:none;}
.display_none{display:none;}
/*选项卡的样式*/
.convention_tab{clear:both;width:100%;float:left;margin:15px 0 0 0;
background:url(/attachments/month_0809/2200899135553.gif) left bottom repeat-x;padding-bottom:3px;overflow:hidden;padding-right:0px;}
/*如果下面的区域是table，那么padding-right:2px;*/
	.convention_tab li{float:left;background:url(/attachments/month_0809/2200899135553.gif) right top no-repeat;margin-left:-12px;padding:0 30px 0 11px;}
		.convention_tab li a,.convention_tab li.normal_tab b{color:#fff;display:block;height:19px;float:left; 
background:#3C6084;padding-top:3px;}
	.convention_tab li.current_tab{background-position:right -100px;border-left:solid 2px #fff; padding-bottom:2px;}
		.convention_tab li.current_tab a{background-color:#98B1C5;color:#000;}
	.convention_tab li.start_tab{margin-left:0;padding-left:0;border-left:none;}
		.convention_tab li.start_tab a{padding-left:10px;}
	.convention_tab li#end_tab{background-position:right -50px;}
		.convention_tab li#end_tab a{padding-left:10px;}
	.convention_tab li.current_tab#end_tab{background-position:right -140px;}
		.convention_tab li.current_tab#end_tab a{background-color:#98B1C5;}
	/*每个item*/
	#cardarea,#cardarea2
{border:solid 1px #3D5F85;clear:both;border-top:none;}
		#cardarea p,#cardarea2 p{padding:20px;text-align:left;line-height:23px;}
	#cardarea2 dl{text-align:left;padding:20px;line-height:23px;}
</style>
</head>
<body>
<div class="container">
	<ul id="nav" class="convention_tab">
		<li class="start_tab current_tab"><a href="#">选项卡001</a></li>
		<li><a href="#">缺点</a></li>
		<li><a href="#">仅供娱乐</a></li>
		<li><a href="#">选项卡004</a></li>
		<li id="end_tab"><a href="#">选项卡005</a></li>
	</ul>
	<div id="cardarea">
		<div class="item"><p>这里是div中的p标签，因为没有指定class为item，所以我不参与切换。</p></div>
		<p class="item display_none">我在页面加载完成后才添加的事件，可有的图片加载很慢，所以有时候可以把外部js中的addLoadEvent(getConfigInputObj);删除掉，然后直接书写 getConfigInputObj();当然要放在</html>以保证xhtml已经加载完毕</p>
		<p class="item display_none">看网上演示Jquery的tab插件更加强大，不过我这个更为实用，o(∩_∩)o...。</p>
		<p class="item display_none">第四个</p>
		<p class="item display_none">第五个</p>
	</div>
	<ul id="nav2" class="convention_tab">
		<li class="start_tab current_tab"><a href="#">优点</a></li>
		<li><a href="#">使用方法</a></li>
		<li><a href="#">参数的意思</a></li>
		<li><a href="#">第4个</a></li>
		<li id="end_tab"><a href="#">最后一个</a></li>
	</ul>
	<div id="cardarea2">
		<p class="item">重用性极高,在IE6+,Firefox2+,Opera9中均能正常工作，且并没有使用hack。</p>
		<p class="item display_none"> <span style="font-family:Georgia, 'Times New Roman', Times, serif;"> <input type="hidden" id="kp_OtherRegional" value="nav,li,cardarea,item,current_tab|nav2,li,cardarea2,item,current_tab" title="这个必不可少" /> </span>即可完成事件添加,多个区域用竖线隔开。</p>
			<div class="item display_none">
			<dl>
				<dt>id为kp_OtherRegional的input元素共有5个参数</dt>
				<dd>第一个:表示id为nav的那个元素。</dd>
				<dd>第二个:获取到第一步的元素，遍历指定的元素，这取决于你写的什么标签，写的li它就会遍历li。</dd>
				<dd>第三个:切换区域的父容器,切换区域的父容器ID</dd>
				<dd>第四个:<p class="item",这里没有限定是什么元素，而是限定带有指定class的才能参与切换。</dd>
				<dd>第五个:切换标签后当前标签的样式名。</dd>
			</dl>
		</div>
		<p class="item display_none">这里是第四个区域</p>
		<p class="item display_none">第五个</p>
	</div>
</div>
<input type="hidden" id="kp_OtherRegional" value="nav,li,cardarea,item,current_tab|nav2,li,cardarea2,item,current_tab" title="这个必不可少" />
<script type="text/javascript">
/*addLoadEvent.js*/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      oldonload();
      func();
    }
  }
}
/*addLoadEvent.js结束*/
/*switch_display_area.js*/
function getConfigInputObj(){
	if(!document.getElementById || !document.getElementsByTagName)return;
	var configObj=document.getElementById("kp_OtherRegional");if(configObj==null)return;
	var configValue=configObj.getAttribute("value").replace(/\s/g,"");
	var configArray=configValue.split("|")
	var length=configArray.length;
	var childConfigArray=null;
	var childConfigValue="";
	for(var i=0;i<length;i++){
		childConfigArray=configArray[i].split(",");
		giveEvent(childConfigArray);
	}
	//destroy(getConfigInputObj);
}
function giveEvent(obj){
	if(obj==null){return;}
	var parentId=obj[0];
	var whichToTrigger=obj[1];
	var itemParent=obj[2];
	var itemClass=obj[3];
	var currentClassName=obj[4];
	var listerEvent=obj[5];
	if(!parentId || !whichToTrigger || !itemParent || !itemClass)return;
	var parentObj=null;
	var whichToTriggerObj=null;
	var itemParentObj=null;
	var itemObj=null;
	/*准备好各个元素*/
	parentObj=document.getElementById(parentId);
	if(!parentObj){return;}
	itemParentObj=document.getElementById(itemParent);
	whichToTriggerObj=parentObj.getElementsByTagName(whichToTrigger);//获取事件源对象的集合
	if(!parentObj || !itemParentObj || !whichToTriggerObj)return;
	itemObj=itemParentObj.getElementsByTagName("*");
	var length=itemObj.length;
	var objArray=new Array();
	for(var i=0;i<itemObj.length;i++){
		if(itemObj[i].className.indexOf(itemClass)>-1){
			objArray.push(itemObj[i]);
		}
	}
	var whichToTriggerObjLength=whichToTriggerObj.length;//获取事件源对象的长度
	for(var i=0;i<whichToTriggerObjLength;i++){
		whichToTriggerObj[i].setAttribute("oldClassName",whichToTriggerObj[i].className.replace(currentClassName));
		whichToTriggerObj[i].setAttribute("currentNum",i);
		if(listerEvent==null){
			whichToTriggerObj[i].onclick=function(){
				//return 
				return correspondingRegion(this,objArray,currentClassName,whichToTriggerObj);
			}
		}else{
			whichToTriggerObj[i].onmouseover=function(){
				//return 
				return correspondingRegion(this,objArray,currentClassName,whichToTriggerObj);
			}
		}
		whichToTriggerObj[i].onfocus=function(){
			this.blur();
		}
	}
	//destroy(giveEvent);
}
//功能; 根据传递的参数切换（显示或隐藏）各个区域
function correspondingRegion(obj,objArray,currentClassName,whichToTriggerObj){
	var length=objArray.length;
	var currentNum=parseInt(obj.getAttribute("currentNum"),10);
	if(!objArray[currentNum]){
		/*alert("该div不存在");*/
		return;
	}else{
		/*先将所有样式 “归零”*/
		for(var i=0;i<length;i++){
			objArray[i].style.display="none";
			if(whichToTriggerObj[i]==null){continue;}
			//如果有老的样式
			if(whichToTriggerObj[i].getAttribute("oldClassName")!="" && whichToTriggerObj[i].getAttribute("oldClassName").indexOf(currentClassName)<0){
				whichToTriggerObj[i].className=whichToTriggerObj[i].getAttribute("oldClassName");
			}else if(whichToTriggerObj[i].getAttribute("oldClassName")!=""){
				whichToTriggerObj[i].className=whichToTriggerObj[i].getAttribute("oldClassName");
			}else{
				whichToTriggerObj[i].className="";
			}
		}
		//然后单独给当前对象加上className
		if(objArray[currentNum]!=null){
			objArray[currentNum].style.display="block";
			if(obj.getAttribute("oldClassName")!=""){
				obj.className=currentClassName+" "+obj.getAttribute("oldClassName");
			}else{
				obj.className=currentClassName;
			}
			//return false;
		}else{
			//return true;
		}
		return false;
	}
}
addLoadEvent(getConfigInputObj);
/*switch_display_area.js结束*/
</script>
</body>
</html>

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

已经封装好了的，如果你要使用，就把其中的js做成外部文件。
实现，只需要两步。
1：引入外部js；
2：然后书写那个input正确的参数，多个的话用 | 隔开。
3：addLoadEvent一定要放在所有script标签第一行。
如果body标签已经绑定onload函数，那么还要把script移到之后。

弹窗演示

gooann@gmail.com(andrew) — Sun,31 Aug 2008 15:47:20 +0800

HTML代码

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

界面实现技术选择

gooann@gmail.com(andrew) — Thu,28 Aug 2008 16:39:41 +0800

C/S结构、
B/S结构、
RIA -----------
(RIA是Rich Internet Applications的缩写，翻译成中文为富因特网应用程序（Macromedia中文网站翻译为Rich Internet应用程序）)
“富”的概念包含两方面，分别是数据模型的丰富和用户界面的丰富。

界面实现技术选择：

让层垂直居中于浏览器窗口

gooann@gmail.com(andrew) — Thu,28 Aug 2008 15:44:18 +0800

让层垂直居中于浏览器窗口

解决的思路是这样的：首们需要position:absolute;绝对定位。而层的定位点，使用外补丁margin负值的方法。负值的大小为层自身宽度高度除以二。

如：一个层宽度是400，高度是300。使用绝对定位距离上部与左部都设置成50%。而margin-top的值为－150。margin-left的值为－200。这样我们就实现了层垂直居中于浏览器的样式编写。

HTML代码

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

div布局设计

gooann@gmail.com(andrew) — Thu,28 Aug 2008 15:42:07 +0800

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

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "../../../www.w3.org/TR/xhtml1/DTD/strict.dtd">
<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" />
<style type="text/css">
<!--

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="#" _fcksavedurl="#"><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="#" _fcksavedurl="#"><strong>测试用连结</strong></a>
</p>
</div>
<div id="middlebox">
<div class="return">
<a href="index.html" _fcksavedurl="index.html"><strong>返回 p.i.e.</strong></a>
</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" _fcksavedurl="mozshift.html">这个范例</a>描述得更详细。
</p>
<p>
<strong>Nav4 中</strong>没办法使用像“div#leftbox”这类语法，所以请用“#leftbox”来代替。我的写法只是为了要明确地表示。
</p>
<p>
<strong>致谢：</strong>再次感谢<a href="../../../www.l-c-n.com/default.htm" _fcksavedurl="../../../www.l-c-n.com/default.htm">Philippe Wittenbergh</a>
，因为他的帮忙，让这个范例更为完善。<strong>更感谢</strong>
<a href="../../../www.mark.ac/help/default.htm" _fcksavedurl="../../../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" _fcksavedurl="../../../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" _fcksavedurl="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" _fcksavedurl="../../../ccca.nctu.edu.tw/~hlb/trans/pie/thr.col.stretch.html" title="">繁体中文翻译：</a><strong>yyhuang</strong>

简体中文转换:<br />
<a href="../../../www.onestab.net/default.htm" _fcksavedurl="../../../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 全部选择提示：你可先修改部分代码，再按运行]

按钮设计

gooann@gmail.com(andrew) — Thu,28 Aug 2008 15:15:41 +0800

CSS自适应宽度按钮

HTML代码

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

图片型按钮的写法

HTML代码

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

CSS打造经典鼠标触发显示选项

gooann@gmail.com(andrew) — Thu,28 Aug 2008 15:03:10 +0800

CSS打造经典鼠标触发显示选项

HTML代码

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

CSS左右两列自适应高

gooann@gmail.com(andrew) — Thu,28 Aug 2008 14:50:43 +0800

CSS左右两列自适应高

HTML代码

fds</div>
</div>
</div>
<div class="da_div_xia">
<div class="top_540"> </div>
<div class="top_200"> </div>
</div>
</body>
</html>

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