[转]输入框对齐问题

最近做了一个表单的页面,被输入框的对齐问题烦死了,相信觉得烦的不只我一个,整理下相关的代码,包括输入框内、外文字的对齐。希望对大家有用:

<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

WordPress 安装插件或升级要FTP信息的解决

参考:http://www.yjpub.com/index.php/1018
如果是你自己的服务器,把WP的PHP文件的所有者改成运行PHP进程的用户。用chown命令更改文件所有者,命令用法如(我们假设运行PHP进程的是WWW用户):

chmod www:www -R wordpress

Blueprint[css framework]

使用一种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)
  • 确保 一行列数总和等于是其父标签的列数(就使宽度相等)

其他资源:

Blueprint CSS Framework 学习笔记-概述

Dom(js)操作笔记

dom中空白换行符也也是一个文本节点,因此需要代替标准的previousSibling,nextSIbling,firstChild,lastChild以及parentNode来避开空白节点

以下是dom导航替代函数

Read the rest of this entry »

优化 innerHTML 性能

怿飞 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.*/