<![CDATA[身体倍棒]]> http://24289816.qzone.qq.com Sat, 28 Nov 2009 23:18:52 GMT Qzone zh-cn Copyright (C), 2005-2008, Tencent Tech. Co., Ltd. Thu, 26 Nov 2009 08:42:35 GMT <![CDATA[薄壁柱、多边形柱、剪力墙子目解读]]> http://24289816.qzone.qq.com/blog/1259224955 ]]> http://24289816.qzone.qq.com/blog/1259224955#comment 134218240 Thu, 26 Nov 2009 08:42:35 GMT http://24289816.qzone.qq.com/blog/1259224955 <![CDATA[帮朋友做的LOGO]]> http://24289816.qzone.qq.com/blog/1204515005



]]> http://24289816.qzone.qq.com/blog/1204515005#comment 513 Mon, 03 Mar 2008 03:30:05 GMT http://24289816.qzone.qq.com/blog/1204515005 <![CDATA[顶点影视圈子banner]]> http://24289816.qzone.qq.com/blog/1202018896

]]> http://24289816.qzone.qq.com/blog/1202018896#comment 513 Sun, 03 Feb 2008 06:08:16 GMT http://24289816.qzone.qq.com/blog/1202018896 <![CDATA[CSS中的空格"运算符"]]> http://24289816.qzone.qq.com/blog/1200985529 今天在群里，刚好有朋友提出一个问题，怎样解释dl.abc与dl .abc（第二个dl后有一空格）。哎，难为我口齿不太伶俐，舌头刚好有点大...按照我自己的理解也说不清楚，于是，我把自己的想法，用代码表现出来，大致意思就是.....（后来群里一朋友精辟的解释为：dl.abc 意思是匹配有abc类的dl元素，后一个意思是匹配有类型abc且是dl子元素的元素，顿时毛塞吨开）
<!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" c />
<title>无标题文档</title>
<style type="text/css">
ul .abc{ width:50px; height:50px; background:red;}
ul.abc{ width:100px; height:100px; background:blue;}
.abc{ width:100px; height:100px; background:yellow;}
</style>
</head>
<body>
<ul class="abc">ul.abc
<li class="abc">ul .abc</li>
</ul>
<div class="abc">.abc</div>
</body>
</html> ]]> http://24289816.qzone.qq.com/blog/1200985529#comment 512 Tue, 22 Jan 2008 07:05:29 GMT http://24289816.qzone.qq.com/blog/1200985529 <![CDATA[时间对象方法总结]]> http://24289816.qzone.qq.com/blog/1200894387 1、Date()方法
[作用]返回当前日期
[语法]Date()
[实例]
<script type=text/javascript>
var myDate = new Date();
document.write(myDate);
</script>
2、getDate()方法
[作用]返回当前日期中的日子数
[语法]objDate.getDate()
[实例]
<script type=text/javascript>
var myDate = new Date();
document.write(myDate.getDate());
</script>
3、getDay()方法
[作用]返回当前日期中的星期数
[语法]objDate.getDay()
[实例]
<script type=text/javascript>
var myDate = new Date();
document.write(myDate.getDay());
</script>
4、getMonth()方法
[作用]返回当前日期的月份数，注意一点，getMonth()所返回的值为0到11的数字，比如一月份为0，二月
份为1，依次类推。
[语法]objDate.getDay()
[实例]
<script type=text/javascript>
var myDate = new Date();
document.write(myDate.getDay());
</script>
5、getDay()方法
[作用]返回当前日期中的星期数
[语法]objDate.getDay()
[实例]
<script type=text/javascript>
var myDate = new Date();
document.write(myDate.getDay());
</script>
6、getYear()、getFullYear()
[作用]返回当前年份，getYear()为两位，getFullYear()为完整年份数。
[语法]objDate.getYear|getFullYear();
[实例]
<script type=text/javascript>
var myDate = new Date();
document.write(myDate.getYear());
document.write(myDate.getFullYear());
</script>
7、getHours()、getMinutes()、getSeconds()
[作用]获取当前时间的小时，分钟，秒数
[语法]objDate.getHours()...
[实例]
<script type=text/javascript>
var myDate = new Date()
document.write(myDate.getHours());
document.write(myDate.getMinutes());
document.write(myDate.getSeconds());
</script>
8、set系列方法
[作用]设置当前时间的各个内容
[语法]同get系列
[实例]略 ]]> http://24289816.qzone.qq.com/blog/1200894387#comment 512 Mon, 21 Jan 2008 05:46:27 GMT http://24289816.qzone.qq.com/blog/1200894387 <![CDATA[Array数组对象方法]]> http://24289816.qzone.qq.com/blog/1200639180 [作用] 将多个数组联合起来，这个方法不会改变现存的数组，它只返回了所结合数组的一份拷贝。
[语法] arrayObj.concat(array1,array2,...)
[实例]
<script type="text/javascript">
var array1 = new Array("1","2");
var array2 = new Array("3","4");
var array3 = array1.concat(array2);
document.write(array3+"<br/>");
document.write(array3[0]);
</script>
2、join方法，
[作用] 将原有数组对象转换成1个字符串，可以用指定分隔符进行串联。
[语法] arrayObj.join(separator)，separator为分隔符，默认为“,”。
[实例]
<script type="text/javascript">
var array1 = new Array("1","2");
document.write(array1.join());
</script>
3、pop、shift方法
[作用] pop方法删除和返回数组中最后一个元素，同时，数组的长度发生变化。与之相对的是shift()方
法，删除和返回数组第一个元素。
[语法] arrayObj.pop|shift()
[实例]
<script type="text/javascript">
var array1 = new Array("1","2","3","4");
document.write(array1.pop()+"<br>");
document.write(array1.length+"<br>");
document.write(array1.shift()+"<br>");
document.write(array1.length);
</script>
4、push、unshift方法
[作用] 向数组的末尾添加一个或多个元素并且返回新的长度。同时，数组的长度将会被改变，与之相对
应的是unshift方法。注意，方法的返回值并不是新的数组，而是新数组的长度。
[语法] arrayObj.push|unshift(ele1,ele2,ele3,...)
[实例]
<script type="text/javascript">
var array1 = new Array("1","2","3","4");
var newL = array1.push("5","6");
document.write(newL+"<br>");
document.write(array1);
</script>
5、reverse方法
[作用] 把数组中的元素排列次序颠倒过来。
[语法] arrayObj.reverse()
[实例]
<script type="text/javascript">
var array1 = new Array("1","2","3","4");
document.write(array1.reverse());
</script>
6、slice方法
[作用] 可将现存数组中选种的元素返回。
[语法] arrayObj.slice(startposition,endposition)，第一个参数为必选，第二个为可选，如不写，则
默认为从startposition到最后一个元素。注意，包含startposition这个位置的元素，而不包括
endposition。
[实例]
<script type="text/javascript">
var array1 = new Array("1","2","3","4");
document.write(array1.slice(0,2));
</script>
7、sort方法
[作用] 用来对数组元素进行排序。
[语法] arrayObj.sort(sortRule())。参数可选，代表排序的方法。特别说明，sort排序有几个基本原则
，第一，默认按照字母顺序排列；第二，大写字母排在小写字母之前。基与此，对于数字排序，需要自己
写排序方法。
[实例]
<script type="text/javascript">
var array1 = new Array("c","a","d","b");
var array2 = new Array("c","a","D","b");
var array3 = new Array("100","2","3","1")
function sortRule(a,b){
return a-b;
}
document.write(array1.sort()+"<br>");
document.write(array2.sort()+"<br>");
document.write(array3.sort(sortRule));
</script>
8、splice方法
[作用] 向数组删除并加入新的元素。
[语法] arrayObj.splice(index,number,ele1,ele2...)。index为索引位置，必须为数字，代表从哪个
位置插入或者删除元素。number，代表从index位置往后删除的元素个数，如果为“0”则表示在index插
入新元素，不删除往后的数组元素。（说得太混了~~~直接看代码实例）
[实例]
<script type="text/javascript">
var array1 = new Array("c","a","d","b");
array1.splice(0,0,"m")
document.write(array1+"<br>");
array1.splice(0,2,"n")
document.write(array1);
</script>
9、toString方法
[作用] 使用率非常高的方法，直接将数组类型对象转换成字符串类型对象。
[语法] arrayObj.toString()
[实例]
<script type="text/javascript">
var array1 = new Array("c","a","d","b");
strObj = array1.toString();
document.write(strObj+"<br>");
</script>
注意：新的字符串是原数组连接而成，但是中间有“,”分隔，如想去掉“,”，可以这样写：
<script type="text/javascript">
var array1 = new Array("c","a","d","b");
strObj = array1.toString().replace(/,/g,"");
document.write(strObj.replace+"<br>");
</script>
10、valueOf方法
[作用] 返回数组对象的原始值
[语法] arrayObj.valueOf()
[实例] 不知道怎么用... ]]> http://24289816.qzone.qq.com/blog/1200639180#comment 512 Fri, 18 Jan 2008 06:53:00 GMT http://24289816.qzone.qq.com/blog/1200639180 <![CDATA[阿里巴巴前端工程师考题]]> http://24289816.qzone.qq.com/blog/1200389566 题目一:


题目二:



我写的代码:
<!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" c />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
#wrapper{
width:360px;
margin:auto;
position:relative;
}
#leftbar1{
width:60px;
height:120px;
background:#0CFa05;
position:absolute;
}
#leftbar2{
width:60px;
height:120px;
background:#CCFF00;
position:absolute;
top:130px;
}
#main{
width:300px;
height:250px;
background:#336666;
position:absolute;
top:0;
left:70px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="leftbar1">a</div>
<div id="leftbar2">b</div>
<div id="main">c</div>
</div>
</body>
<script type="text/javascript">
var oDivs = document.getElementsByTagName("div");
//为需要实现目标效果的DIV绑定事件
oDivs[1].onmouseover = changeArea;
oDivs[1].onmouseout = resetArea;
oDivs[2].onmouseover = changeArea;
oDivs[2].onmouseout = resetArea;
oDivs[3].onmouseover = changeArea;
oDivs[3].onmouseout = resetArea;
//定义初始化大小数组
var iniWidth = new Array();
var iniHeight = new Array();
//获取每个DIV的初始高度和宽度
for(i=0;i<oDivs.length;i++){
iniWidth = oDivs.offsetWidth;
iniHeight = oDivs.offsetHeight;
}
//面积变大方法changeArea();
function changeArea(){
this.style.width = this.offsetWidth*1.25+"px";
this.style.height = this.offsetHeight*1.25+"px";
this.style.zIndex = 1;
}
//面积还原方法resetArea();
function resetArea(){
for(i=0;i<oDivs.length;i++){
oDivs.style.width = iniWidth+"px";
oDivs.style.height = iniHeight+"px";
oDivs.style.zIndex = 0;
}
}
</script>
</html>

]]> http://24289816.qzone.qq.com/blog/1200389566#comment 513 Tue, 15 Jan 2008 09:32:46 GMT http://24289816.qzone.qq.com/blog/1200389566 <![CDATA[模仿taobao注册页面表单变化样式功能]]> http://24289816.qzone.qq.com/blog/1199859457 http://member1.taobao.com/member/register.jhtml?f=top
为了遵循何老师说的：要多练，多练才能熟呀~~~
所以自己又用不太幽雅，不太先进的代码写了一下。权当练习，练习。
<!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" c />
<title>无标题文档</title>
<style type="text/css">
.note{
width:200px;
height:20px;
margin:0;
padding:0;
text-align:center;
line-height:20px;
}
.text{
float:left;
margin:0 10px 0 0;
}
.normal{
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000;}
.special{
font-size:12px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#000000;
border:1px solid #0099FF;
background:#B6E7FC;
height:18px;}
</style>
</head>
<body>
<input type="text" class="text" />
<div class="normal note">测试一下</div><br />
<input type="text" class="text" />
<div class="normal note">测试一下</div><br />
<input type="text" class="text"/>
<div class="normal note">测试一下</div>
</body>
<script type="text/javascript">
var oInputs = document.getElementsByTagName("input");
var oDivs = document.getElementsByTagName("div");
for( var i = 0;i<oInputs.length;i++){
oInputs.id = i;
oInputs.onfocus = function(){
oDivs[this.id].className = "special note";
}
oInputs.onblur = function(){
oDivs[this.id].className = "normal note";
}
}
</script>
</html>
]]> http://24289816.qzone.qq.com/blog/1199859457#comment 512 Wed, 09 Jan 2008 06:17:37 GMT http://24289816.qzone.qq.com/blog/1199859457 <![CDATA[BLOG的banner]]> http://24289816.qzone.qq.com/blog/1198736381

]]> http://24289816.qzone.qq.com/blog/1198736381#comment 513 Thu, 27 Dec 2007 06:19:41 GMT http://24289816.qzone.qq.com/blog/1198736381 <![CDATA[简单重构大渝网]]> http://24289816.qzone.qq.com/blog/1197962067 写这个标题的时候心头不免有点虚,重构,这个概念太高深,实在不适合小菜我用,但是又找不到其他合适的词语,不管了,姑且就这么叫着吧。
至于为什么要写，其一，练手；其二，哎...不说也罢。
好了，废话后开始“重构”！（洋气，太洋气了）。
首先，看看大渝网的整体架构。如下图：



分析以后，大致可以划分为几个部分：头部，广告，主体内容。然后，广告+主体内容的结构循环若干次。由于是简单的重构，这里只取：头部，广告，主体内容3个大块，省去循环出现的广告+内容结构。下面是我分析后画的简单结构图：



当然，大渝网的结构肯定会有其他更好的划分，所以，也请看官中的高手指出。
在分析出简单的架构后，我就开始着手写（X）HTML部分的机构代码。贴出如下：
HTML：
<div id="wrapper">
<div id="header">
<div id="logo"></div>
<div id="header_right">
<div id="search"><label for="serch">大渝搜索<input id="serch" name="serch" type="text" style="border:1px solid #0066CC; position:relative;left:5px; margin:0; padding:0;" /></label></div>
<div id="nav">
<ul id="nav_row1">
<li class="nav"><a href="javascript:;">首页</a></li>
<li class="nav"><a href="javascript:;">新闻</a></li>
<li class="nav"><a href="javascript:;">Qbar</a></li>
<li class="nav"><a href="javascript:;">评论</a></li>
<li class="nav"><a href="javascript:;">娱乐</a></li>
<li class="nav"><a href="javascript:;">餐饮</a></li>
<li class="nav"><a href="javascript:;">健康</a></li>
<li class="nav"><a href="javascript:;">无线</a></li>
<li class="nav"><a href="javascript:;">文教</a></li>
<li class="nav"><a href="javascript:;">视频</a></li>
<li class="nav"><a href="javascript:;">搜购星期五</a></li>
<li class="nav"><a href="javascript:;">搜街一族</a></li>
<li class="nav"><a href="javascript:;">英语沙龙</a></li>
</ul>
<ul id="nav_row2">
<li class="nav"><a href="javascript:;">房产</a></li>
<li class="nav"><a href="javascript:;">汽车</a></li>
<li class="nav"><a href="javascript:;">IT数码</a></li>
<li class="nav"><a href="javascript:;">商业街</a></li>
<li class="nav"><a href="javascript:;">彩票中心</a></li>
<li class="nav"><a href="javascript:;">招聘</a></li>
<li class="nav"><a href="javascript:;">旅游</a></li>
<li class="nav"><a href="javascript:;">家居</a></li>
<li class="nav"><a href="javascript:;">理财</a></li>
<li class="nav"><a href="javascript:;">游戏中心</a></li>
<li class="nav"><a href="javascript:;">房产视频</a></li>
<li class="nav"><a href="javascript:;">商报电子版</a></li>
</ul>
</div>
</div>
<div style="clear:both"></div>
</div>
<div id="adv"></div>
<div id="main1">
<div id="main1_cols1"></div>
<div id="main1_cols2">
<div id="main1_clos2_row1"></div>
<div id="main1_clos2_row2"><span class="main1_title">大渝话题</span></div>
<div id="main1_clos2_row3"></div>
</div>
<div id="main1_cols3"><span class="main1_title">大渝头条</span></div>
<div id="main1_cols4">
<div id="main1_cols4_row1"><span class="main1_title">今日推荐</span></div>
<div id="main1_cols4_row2"><span class="main1_title">热点·专题</span></div>
</div>
</div>
</div>
完成结构的代码后，开始添加CSS样式：
CSS：
/*boxes-structure*/
html{
margin:0;
padding:0;}
body{
margin:0;
padding:0;}
#wrapper{
margin:auto;
padding:0;
width:915px;
background:#fff;}
#header{}
#logo{
width:213px;
height:99px;
background:url(img/logo.gif) no-repeat;
float:left;
margin:0;}
#header_right{
margin:0;
padding:0;
width:697px;
height:99px;
background:#fff;
float:left;
}
#search{
width:697px;
height:43px;
background:url(img/header_bg.gif) repeat-x;
}
#search label{
margin:0;
padding:0;
width:20px;
font-size:12px;
font-family:"宋体";
color:#07B6F8;
position:relative;
top:10px;
}
#nav{
width:697px;
height:50px;
margin:5px 0 0 0;
}
#nav ul{
width:697px;
padding:0;
}
#nav_row1{
list-style:none;
width:697px;
height:23px;
background:#AFDCF9;
margin:0 0 5px 0;
}
#nav_row1 li{
float:left;
margin:0 0 0 20px;
}
#nav_row1 li a{}
#nav_row1 li a:link{ color:#000000; text-decoration:none;}
#nav_row1 li a:visited{ color:#000000; text-decoration:none;}
#nav_row1 li a:hover{ color:red; text-decoration:underline;}
#nav_row2{
list-style:none;
width:697px;
height:23px;
background:#31A2E6;
margin:0;
}
#nav_row2 li{
float:left;
margin:0 0 0 20px;
}
#nav_row2 li a{}
#nav_row2 li a:link{ color:#000000; text-decoration:none;}
#nav_row2 li a:visited{ color:#000000; text-decoration:none;}
#nav_row2 li a:hover{ color:yellow; text-decoration:underline;}
#adv{
width:910px;
height:90px;
margin:10px 0 0 0;
background:url(img/adv.jpg) no-repeat red;
clear:both;
padding:inherit
}
#main1{
width:915px;
margin:10px 0 0 0;}
#main1_cols1{
width:214px;
height:424px;
margin:0 10px 0 0;
background:url(img/main1_left1.gif) no-repeat;
border:1px solid #42A2DF;
float:left;}
#main1_cols2{
width:243px;
height:300px;
margin:0 10px 0 0;
float:left;}
#main1_clos2_row1{
width:243px;
height:200px;
margin:0 0 5px 0;
border:1px solid #42A2DF;
background:url(img/main1_newstitle.jpg) no-repeat;}
#main1_clos2_row2{
width:243px;
height:150px;
border:1px solid #42A2DF;
}
#main1_clos2_row2 span{
display:block;
width:231px;
height:25px;
background:#3EABF0;
padding:0 0 0 10px;
margin:1px;}
#main1_clos2_row3{
width:243px;
height:60px;
border:1px solid #42A2DF;
margin:5px 0 0 0;}
#main1_cols3{
width:237px;
height:424px;
margin:0 10px 0 0;
border:1px solid #42A2DF;
float:left;}
#main1_cols3 span{
display:block;
width:225px;
height:25px;
background:#3EABF0;
padding:0 0 0 10px;
margin:1px;}
#main1_cols4{
width:180px;
height:424px;
float:left;
}
#main1_cols4_row1{
width:180px;
height:300px;
margin:0 0 5px 0;
border:1px solid #42A2DF;}
#main1_cols4_row1 span{
display:block;
width:168px;
height:25px;
background:#3EABF0;
padding:0 0 0 10px;
margin:1px;}
#main1_cols4_row2{
width:180px;
height:117px;
border:1px solid #42A2DF;}
#main1_cols4_row2 span{
display:block;
width:168px;
height:25px;
background:#3EABF0;
padding:0 0 0 10px;
margin:1px;}
/*font-style*/
.nav{
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
line-height:23px;}
.main1_title{
font-size:14px;
font-family:宋体;
line-height:25px;
color:#FFFFFF;
font-weight:bold;}
写完后，兼容IE6、IE7、FF
通过这次我又学到如何清理浮动，还是有收获滴~~~ ]]> http://24289816.qzone.qq.com/blog/1197962067#comment 529 Tue, 18 Dec 2007 07:14:27 GMT http://24289816.qzone.qq.com/blog/1197962067