IE6和IE7在同级相邻元素间边距问题

IE6和IE7一向令网页制作者头痛,虽然有些经验丰富的前端开发人员能快速解决大部分问题,但是有时候,仍然会遇到一些令人疑惑的问题.我在做一个简单效果时,发现有时候及时清浮并不是一件好事,通过触发hasLayout反而出了问题.接下来详细说说这个IE6和IE7的问题.

两个同级的相邻的元素A和B(均为块级元素),当A内部有元素浮动,并且拥有外边距时,B则会贴紧A的最后一个元素,假设B没有清除浮动,则会与A的最后一个元素的左右边距保持边距距离,例如图一:

B没有清浮的情况下,左右边距正常
B没有清浮的情况下,左右边距正常

继续阅读“IE6和IE7在同级相邻元素间边距问题”

WORDPRESS自定义模板后的PO文本翻译修改以及MO修改教程

wordpress这个程序虽然强大,但是有时候根据自己需求不同,需要进行一些模板的修改,这次就我自定义模板后出现的一些问题和大家分享下,内容涉及到主题的修改以及PO文本翻译修改,还有MO文件的修改等内容.

先简单说一下我的需求,我希望图片附件模板(image.php)里增加一条作者信息(实际上还是为了google的seo优化处理的),而默认是没有的,怎么处理,可参考该页面OCZ Vertex4包装正面图一(当然目前是已添加好的),如图:

修改图片内容模板信息
修改图片内容模板信息

现在应该很容易理解我要做的事情了吧,这个东西看起来似乎也是很简单的,不过当你看完这篇文章,也许你不会轻易这样想了.至少我完美解决这样的小问题花了3个小时,不过我的确不熟悉wordpress和php,也没有人能帮助我,好吧,闲话少说,步入正题. 继续阅读“WORDPRESS自定义模板后的PO文本翻译修改以及MO修改教程”

Sublime Text 3常用用户自定义配置推荐

现在可算是对sublime text编辑器有点入门了,除了基本操作快捷键之外,对于sublime text的用户配置设置我今天也细细研究了一番,对于英语勉强说得过去的我,看这个默认的配置(Preferences.sublime-settings—Default)说明是没有太大压力的,对于英语差的,先硬着头皮看看,实在不行,我总结了以下一些我感觉还算比较方便的配置选项,当然,自定义的就是覆盖了默认设置的,有兴趣的可以看看,根据个人需要修改…首先当然是开启Preferences.sublime-settings—User了,见图,我在配置中加了说明方便查阅:

Sublime text 3用户自定义设置配置
Sublime text 3用户自定义设置配置

(图中可以看到修改过的文件名称是黄色,选中的那一行也高亮了等等,大家自行观察咯~)

接下来大家根据需要拷贝过去进行修改吧…

{
"auto_complete_selector": "source,text", //用到snippet的话加此行,否则请无视我
"font_size": 16, //不用多说,字体大小,同样可以按住CTRL+'+'或者'-'或者'鼠标滚轮'调整
"ignored_packages":
[
"Vintage"
], //忽视此包...
"word_separators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?", //这些字符会在鼠标双击时隔断,可自行删除不必要的,例如这个被我修改过删除了'-'符号,详情可参考我之前写的<<sublime text快速选择带有横线(连接符)的类名或ID名等>>,上一篇就是了
"word_wrap": true, //一行内容太长了,自动换行(如果你够'自信'的话,又喜欢拖动X轴滚动条请无视我)
"highlight_line": true, //高亮显示当前编辑的行,有时自动折行看不清,这个就把一整块显示出来,清晰一些
"show_encoding": true, //编辑器底部显示编码信息,用GBK编码的偶尔出现乱码,看看这个能查一下,虽然作用不大,放在下面也不占地方,无所谓了
"save_on_focus_lost": true, //当焦点从当前编辑文档中丢失,会自动保存,看个人喜好咯
"highlight_modified_tabs": true, //高亮TAB显示被修改过的文档,如果上一条为关闭,修改过的文件看起来更清晰
"draw_minimap_border": true, //在编辑器右侧小代码地图上为当前区加个边框,视力不好可以加上,比如我
"always_show_minimap_viewport": true, //总是显示这个迷你地图窗口,还是视力不好
"show_tab_close_buttons": false //不显示TAB标签上的关闭图标(个人认为没用,文件多了不小心切换的时候关了更麻烦,真的需要关闭某个标签的时候,可以在左侧栏已打开的文件中点叉叉,当然个人更加推荐使用快捷键CTRL+W)
//注释 BY WHIDY 2014年5月15日...
}

PS: 经过几日测试,我发现焦点失去自动保存功能并不好用,大家看情况来使用吧,原因:从外部快速切换到sublime text时,代码块会滚动一下,影响查找刚才编辑的位置,另外,如果是GBK编码格式,有时不小心乱码了,比较麻烦(2014年5月21日)

sublime text快速选择带有横线(连接符)的类名或ID名等

其实sublime text的设置中有很多小秘密,例如本文介绍的,通过修改其中的一个配置,就可以实现直接鼠标双击或者快捷键CTRL+D,就能选中例如”sub-menu”这样的类名或者ID名,其实也是工作需要,代码规范要这样做,之前的驼峰式就废弃了,下划线显然不好,于是就用横线来连接关联起来了,直接来说怎么设置吧.

1. 打开SUBLIME TEXT(2和3都通用.)

2. 打开配置文件Settings – User

快速选择带有横线连接符的类名或ID名
快速选择带有横线连接符的类名或ID名

3. 在花括号内最后一行插入下面这段

"word_separators": "./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?"

好了,保存文件.试试效果吧.

最后简单说明一下,这行实际上是默认设置里改了,去掉了”“字符,用用户设置覆盖默认设置,有兴趣可以打开Settings – Default,看其他更多设置

W350ETQ(K590S)装双硬盘南桥(PCH)终极简易散热方法

之前的提到过几个方案(见W350ETQ(K590S)装双硬盘南桥(PCH)散热最简单的方法)都不错,但是今天因为需要吧电池装上,从下面往上吹就不管用了,于是我想试试从上往下吹,也就是吹键盘.没想到效果比之前的几个方案都要好,经过测试,这才是最值得一试的,当然也是有损失的,那就是笔记本键盘不能用,其实之前的从下往上吹,也是笔记本不能用了,话不多说,直接上效果图:

W350ETQ(K590S)装双硬盘南桥(PCH)终极简易散热方法
W350ETQ(K590S)装双硬盘南桥(PCH)终极简易散热方法

简单说明一下,我这个是三张图拼到一起了,还是那个网上买的十元的破风扇,底朝上,对着键盘吹,看到烤机温度CPU上升了一点,但是主板温度动都不动,基本上不超过65度,而图中最高温度87的温度是没有采取任何措施的!!!虽然这几天广州降温,室温22-25度左右,但是还是很惊人的…这个对于外接键盘的朋友来说是个不错的方法,,试试看吧,

子级元素如何覆盖父级元素之边框颜色的遮盖应用

由于昨天重装系统,很多程序还未正确配置好,这篇暂且长话短说,直接上代码.
关于这个需求在网站制作上还是经常遇到的(例如白色边框覆盖其他边框的障眼法),做到全兼容似乎只有这个方法最好,特分享出来.这里坚决不用z-index,更加不用绝对定位!查看DEMO

<!DOCTYPE html>
<html>
<head>
<title>childBox and parentBox overlay relationship</title>
<style type="text/css">
* {margin:0;padding:0;line-height:1.5;font-family:"Microsoft YaHei";}
body {background-color:#eee;}
.container {width:1000px;margin:30px auto;}
.parentBox {width:300px;height:300px;margin:0 auto; border:50px solid #ccc;*overflow:hidden;}
.childBox {width:200px;padding:10px;margin:0 auto;height:250px;border:40px solid #aaa;margin-top:20px;position:relative;}
h3 {font-size:18px;}
p {font-size:14px;margin:10px 0;}
.author {text-align:right;}
</style>
</head>
<body>
 <div class="container">
 <div class="parentBox">
 <div class="childBox">
 <h3>childBox and parentBox</h3>
 <p>The childBox overlay the parentBox, otherwise, it must be compatible widt all IEs</p>
 <p class="author">whidy</p>
 </div>
 </div>
 </div>
</body>
</html>

明天重新整理一下,发一点相关页面应用到这个的地方.

强烈推荐<<光之子(Child of Light)>>游戏一部

今天是劳动节,对我而言,和往常双休一样,吃饭睡觉上网.此文目的在于愉悦大家,将我喜欢的东西简单描述后分享出来.

本来写这篇博文标题时,我想讲点什么大道理,总觉得我不适合写议论文,于是还是老样子看得懂的便看之,不懂得且略过罢,今天一天基本上都在玩游戏,其中这部光之子(Child of Light),深深吸引住的我一个不大的游戏.先来一段官方介绍:

光之子(Child of Light)

《光之子(Child of Light)》是由育碧蒙特利尔旗下的一个小型团队打造,其中还有《孤岛惊魂3》的创意总监Patrick Plourde以及首席编剧Jeffrey Yohalem。而游戏引擎则使用了育碧的UbiArt Framework,该引擎也同样被用于开发《雷曼:传奇》。更值得一提的是,这是一款JRPG游戏,也是育碧少有的日式风格游戏,游戏的故事背景是对经典童话故事的重新演绎,让玩家踏上一个色彩斑斓的世界,展开一次史诗般的冒险之旅。玩家将会面临众多谜题,游戏采用经典JRPG式的回合制战斗。

继续阅读“强烈推荐< <光之子(Child of Light)>>游戏一部”