最近做了一个表单的页面,被输入框的对齐问题烦死了,相信觉得烦的不只我一个,整理下相关的代码,包括输入框内、外文字的对齐。希望对大家有用:
<label><input type="radio" name="info_name">名称</label>
<label>名称:<input class="input_text l_type"></label>
input{
vertical-align:middle;
}
input[type="radio"]{
vertical-align:-1px;
vertical-align:middle\9;
}
.input_txt{
height:18px;
height:22px\9;
padding-left:1px;
padding-top:4px;
padding-top:0\9;
border:1px solid #B3D0DF;
*line-height:22px;
}
另外,跟大家分享下这次发现的终级hack,比之前《 最新CSS兼容方案 》的简单些:
.e{
color:#FFF;/* FF,OP */
[;color:#0F0;]/* Sa,CH */
color:#FFF\9;/*IE6、7、8*/
*color:#FF0;/* IE7、6 */
_color:#F00;/* IE6 */
}
@media all and(min-width:0){
.e{
background-color:#FF5500;/* OP */
}
}
原文地址: http://www.cssforest.org/blog/index.php?id=141
参考:http://www.yjpub.com/index.php/1018
如果是你自己的服务器,把WP的PHP文件的所有者改成运行PHP进程的用户。用chown命令更改文件所有者,命令用法如(我们假设运行PHP进程的是WWW用户):
chmod www:www -R wordpress
使用一种CSS框架理由很简单,提高开发效率,和更简便布局方法
下面将简单介绍blueprint的使用方法:
安装
把以下代码放置到页面<head>中:
<!-- Framework CSS -->
<link rel="stylesheet" href="../../blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="../../blueprint/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="../../blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
Blueprint的文件介绍
- blueprint/screen.css 正常显示样式
- blueprint/print.css 打印的样式
- blueprint/ie.css 只在IE中使用去除不兼容情形
在src文件夹中样式文件是对上述3个文件细分
- blueprint/src/reset.css: 重置浏览器样式.统一各浏览器的样式
- blueprint/src/grid.css: 格子的样式,配合div标签使用进行列网格设置.
- blueprint/src/typography.css: 设置排版样式,对重置后元素加上统一样式.
- blueprint/src/forms.css: Includes some minimal styling of forms.
- blueprint/src/print.css: 设置默认打印样式.
- blueprint/src/ie.css: 包含Ie6、7的hack
格子使用.
默认情况下格子整体宽950px,有24列,列距是30px,右外距10px,如下计算
Total width = (columns * 40) - 10
<div class="container">
<div class="span-24">Header </div>
<div class="span-4">Left sidebar </div>
<div class="span-16">
<div class="span-8">Box1 </div>
<div class="span-4">Box2 </div>
<div class="span-4 last">Box3 </div>
<div class="span-16 last">Main content </div>
</div>
<div class="span-4 last">Right sidebar </div>
<div class="span-24">Footer </div>
</div>
注意:
- 使用“last” class 在最后一栏的时候(除了类为span-24)
- 确保 一行列数总和等于是其父标签的列数(就使宽度相等)
其他资源:
dom中空白换行符也也是一个文本节点,因此需要代替标准的previousSibling,nextSIbling,firstChild,lastChild以及parentNode来避开空白节点
以下是dom导航替代函数
Read the rest of this entry »
在怿飞 blog看到这方面介绍,对于非ie的浏览器有效
function replaceHtml(el, html) {
var oldEl = typeof el === "string" ? document.getElementById(el) : el;
/*@cc_on // Pure innerHTML is slightly faster in IE
oldEl.innerHTML = html;
return oldEl;
@*/
var newEl = oldEl.cloneNode(false);
newEl.innerHTML = html;
oldEl.parentNode.replaceChild(newEl, oldEl);
/* Since we just removed the old element from the DOM, return a reference
to the new element, which can be used to restore variable references. */
return newEl;
};
el = replaceHtml(el, newHtml) /*instead of el.innerHTML = newHtml.*/