时髦的WordPress主题风格
在网上发现这一段代码，可以考虑做成新的WordPress主题，效果看上去很不错呀~
提示：你可以先修改部分代码再运行。
每天读一下这七句话
1、永远不要向任何人解释你自己，因为喜欢你的人不需要，而不喜欢你的人不会相信
2、别让某人成为你生命中的优先，当你只是他们生命中的一个选择时，人与人之间的关系只有在彼此达到平衡时，运作的最恰当
3、每天早上醒来时，我们可以有两个简单的选择，回头去睡，继续做梦，或者起身去追逐梦想，选择权在你手上
4、我们总让在乎我们的人为我们哭泣，并总为那些永远不会在乎我们的人哭泣，且我们在意那些永远不会为我们哭泣的人，这是存在于生命的真实，奇怪却真实。一旦你了解了，改变不会太迟
5、别在喜悦时许下承诺，别在忧伤时做出回答，别在愤怒时做下决定，三思而后行，做出睿智的行为
6、时间就像流水，你永远无法触摸同样的流水两次，因为已经流逝的流水不会再来，享受生命的每个当下!
7、当你持续的说你非常忙碌，就永远不会得到空间；当你持续的说你没有时间，就永远不会得到时间；当你持续的说这件事明天再做，你的明天就永远不会来
如何添加“加载中…”效果
前几天在博客中添加了“加载中，请稍候…”的效果，有人问如何添加，在这里大概说一下。
其实简单的很:JavaScript中的有个onload事件，它监听页面的加载，当页面加载完成后执行。所以我们可以把“加载中，恭喜发财…”的文字放在页面的最顶部首先加载，待整个页面加载完毕后令其消失，效果即完成。
代码如下：
1 2 3 4 5 6 7 8 9 10 | <style type="text/css">
#load{position:absolute;width:800px;top:10px;left:50%;margin-left:-400px;font-size:70px;}
#load p{padding:0;margin:0;}
</style>
<script>
window.onload = function(){
document.getElementById("load").style.display = "none";
}
</script>
<div id="load"><img src="/images/loading.gif" /><p>加载中，请稍候...</p></div> |
如果仅想要效果出现在博客的首页面，给代码外加一个判断即可：
1 2 3 | <?php if (is_home() ) : ?> <!-- content --> <?php endif; ?> |
鼠标滑过table行高亮且隔行变色
上次小组例会上分享了一个简单的鼠标滑过table行高亮且隔行变色的js例子，来描述自己关于建立公司web前端开发组件库的思路。
核心代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | /*
表格隔行变色，鼠标滑过行高亮，用于table
theTable为表格的ID
trInterlace为隔行变色的class名称
trHover为鼠标滑过高亮行的class名称
*/
function trHover(theTable,trInterlace,trHover){
var oTable = document.getElementById(theTable);
var trs = oTable.getElementsByTagName("tr");
var trBool = true;
var oldStyle;
for(var i=0;i<trs.length;i++){
//隔行变色
if(trBool === true){
trs[i].className = trInterlace;
trBool = false;
}
else{
trs[i].className = "";
trBool = true;
}
//鼠标滑过行高亮
trs[i].onmouseover = function(){
oldStyle = this.className;
this.className = trHover;
}
trs[i].onmouseout = function(){
this.className = oldStyle;
}
}
}
window.onload = function(){
trHover("uTable","tr_interlace","tr_hover");
} |
此函数的3个参数是这个函数对外的唯一接口，只需要填好这3个参数即可应用本模块，封装性好、应用简单、可极大提高开发效率。使用者不需要知道函数内部是如何工作的，只要根据注释明白这段代码块是做什么的，复制粘贴修改好即可使用
今天是我的阴历生日
弟弟给我发了个短信：哥，今天你生日呢，我跟爸妈在家多吃点好的，当给你过生日。
关于JavaScript对象字面值
平时我们见到的的JavaScript都是标准的过程式JavaScript，采用点号表示格式，例如：
1 2 3 4 5 6 7 | var myCat = new Object;
myCat.name="maomi";
myCat.age="two";
function allAboutMyCat(){
alert("Can I tell you about my cat?");
tellMeMore = true;
} |
如果采用对象字面值格式，这段代码应该改写为下面这样：
1 2 3 4 5 6 7 8 | var myCat = {
name:"maomi",
age:"two",
allAboutMyCat:function(){
alert("Can I tell you about my cat?");
tellMeMore = true;
}
} |
对于这两种格式，都可以采用点号表示法引用myCat的属性，比如myCat.name。但是，在采用对象字面值格式时，函数变成myCat.allAboutMyCat()而不是allAboutMyCat()。
你可能会觉得这种格式有点儿眼熟，没错，它在许多方面与CSS非常相似。在最基本的层面上，它实际上是一个属性-值对的列表，属性和值之间以冒号分隔，各个属性-值对之间有一个分隔符。
在使用对象字面值时要记住几点差异：
- 使用冒号而不是等号设置属性
- 行结尾时逗号而不是分号
- 在对象中的最后一个语句上不需要逗号
今天脑袋一团浆糊…
今天浑浑噩噩的，也不知道在想些什么，很乱，眼皮总有一种睁不开的感觉。摇摇头，脑袋里像揣着一桶浆糊，从左边荡到右边，又从右边荡到左边。
中午去搜狐B1吃饭，端着托盘，放满了菜、粥和米饭。刷完卡，去拿筷子和勺子，托盘就放在手边。也不知道正在想些什么，可能是想横山贺一鸣进入轮回之地结果如何，可能是想今天晚上两个项目组聚餐一个是最高团队一个是数字审委会团队我到底选哪个呢，可能是想今天搓哥请假没来中午就三国杀不了了，可能是想啥时候才能帮女朋友找个短租的房子…
杯具发生了！托盘放在桌子上，探出桌子的部分太多了，侧翻了。我于是眼睁睁地看着它慢慢地翻下去，心里还纳闷这个盘子怎么这样了，平时可不是这样的啊。在盘子摔落地上之前，我的脚及时躲开了，粥没有溅到脚和裤子上。直到这时，我才反应过来，原来是盘子摔了…
盘子摔坏了，赔了21块钱。重新打了一份饭，也没吃完。直到回到座位上，写下这些的时候，脑袋还是一团浆糊～
眯一会儿吧
纯css解决多行文字垂直居中
今天做项目的时候，遇到一个棘手的问题，是一个出错提示页面：中间左侧是个醒目的图片，图片右侧是文字，效果图上面给的是一行文字，但是实现的时候肯定有可能变成多行的提示文字。但是不管是一行还是多行，文字都必须对齐图片同时垂直居中。
table布局的话，很容易实现这个效果，但是这是不可能的。display:table-cell可以实现跟table一样的效果，但是IE6和IE7都不支持这个属性。怎么办呢，百思不得其要领。
网上搜索了一下，发现还是牛人还是相当的有，得一解决办法如下：
提示：你可以先修改部分代码再运行。
好在外层容器是固定高度，这才使效果得以实现。
其大概原理为：第一个alert_blank容器，display:inline以后作为行内元素，它的高度为100%，宽度却为0，相当于紧贴外层容器左边框的一条透明的线，这样就使得外层容器里面只存在一行。外层容易的vertical-align:middle使得其内部相当于一行文字垂直居中。真正盛放内容的div也是display:inline，它对外和blank垂直居中，只要内部文字不超过blank的高度，这个效果将是完美的。虽然从语义化上讲，用空白div布局说不太过去，但是瑕不掩瑜。另：zoom:1是为了触发hasLayout。
