经典的水平垂直居中盒子模型

作者：idd.chiang 发布时间：March 2, 2010 分类：HTML/CSS,前端观察 5 Comments

上一篇： CSS 垂直居中的实现 没有详细描述这种垂直居中的模型，相对垂直居中在很多时候还是很有用的。

vertical-center-horizontal-center.png

直接查看例子： 绝对垂直水平居中

居中的盒子是相对于绝对盒子的，个人认为绝对居中这个名字比较符合它特性，这时绝对有“肯定”的意思。所以，这个CSS模型兼容性可想而知。居中的盒子必须有宽(W)高(H)，垂直居中和水平居中用到left(right)、top(bottom) 50%的偏移量，为了使盒子中心点（对角线交点），必须有溢出，这个溢出量就是盒子宽度的一半，即margin-left(margin-right) -w/2、margin-top(margin-bottom) -H/2。

css代码：

.colorbox{
	border:3px solid #2A6FA8;
	background-color:#6FA5D1;
	width:100px;
	height:100px;
	/*important*/
	position:absolute;
	top:50%;
	left:50%;
	/*Margin Overflow*/
	margin-left:-50px; /*half of width*/
	margin-top:-50px; /*half of height*/
}
.tmiddle{
	border:1px solid #586650;
	background-color:#ABB0A7;
	position:relative;
	height:300px;
}

让ie6\7浏览器完美识别HTML5标签

作者：idd.chiang 发布时间：March 2, 2010 分类：HTML/CSS,Javascript/AS,前端观察 3 Comments

html5.jpg

近几年WEB前端发展日趋成熟，DIV布局已经作为前端人员的必修课，DIV+CSS可以让Web页面展现无所不能，但当DIV滥用时，各种混乱 div布局导致代码可读性极低。此时yahoo最先提倡标签语义化和classname语意命名，但HTML4.01中的标签数目比较小，对于日新月异的 web布局支持实在有限，语意到最后的结果就是，classname无数,为语意存在的各种单词、拼音、字母充斥在页面。

HTML5 w3c已经推出有很长一段时间了，新增的标签也是为了以上弊端以及新功能。下面让ie6\7识别HTML5新增标签这种方法其实是一个取巧。这种做法对于代码洁癖者是个福音，也符合渐进增强Progressive Enhancement、优雅降级（Graceful Degradation）的原则，“好奇害死猫”，往下看，也让我们尝尝鲜吧。

下面先看看HTML5标签搭建的简单博客 » HTML5 Demo
一段简单的脚本，让ie6、ie7能识别HTML5新增标签，脚本如下：

(function(){if(!/*@cc_on!@*/0)return;
	var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,hgroup,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),
	i=0,
	length=e.length;
	while(i<length){
		document.createElement(e[i++])
	}
})();
阅读全文...

WEB颜色选取工具（组件）和颜色格式转换

作者：idd.chiang 发布时间：February 28, 2010 分类：HTML/CSS,Javascript/AS,前端观察 No Comments

经常会使用Photoshop去取自己想要的颜色,选色还得等待PS的长时间loading，费时费力。抽空整理了两个互联网开源的颜色拾取器，加了转化、拷贝，方便使用。

1.颜色拾取器（Canvas） Color Picker 2.0
在线颜色拾取器

这个工具有点像illustrator里的颜色选择器，有HSV，RGB两种颜色设置，CSS3现在已经广泛支持这两种颜色属性，如：hsl(240,100%,50%) 和 rgba(255,0,100,0.8)；对于获得颜色的值，如果我们使用PS，还得打开颜色管理器，这个工具可以有效增加前端工程师颜色选择的效率。工具栏中颜色渐变条是对Canvas Dom的getContext() 方法返回线性颜色渐变的一个 CanvasGradient 对象在Canvas画布上。

2.颜色拾取器 Color Picker 1.0
在线颜色拾取器

两个工具都用到了一个开源颜色转换脚本 (Color_Conversion_Library)，这样我们很容易互相换算各种WEB颜色格式,第三个转换就是一个简单尝试。

直接去感受下在线颜色拾取器：在线颜色拾取器

IE7下图片缩小失真的解决办法

作者：idd.chiang 发布时间：February 24, 2010 分类：HTML/CSS,前端观察 No Comments

一张大图在尺寸小于原始尺寸时，ie7下会表现的很糟糕，画面失真呈锯齿状，如下图，美女脸上起了毛刺：
ie-interpolation-mode.jpg

别着急，强大的MS有解决方案，微软提供的私有属性 -ms-interpolation-mode，请参看：msInterpolationMode Property

img { -ms-interpolation-mode: bicubic; /* Internet Explorer 7.0+ */ }

Firefox在3.6版本新增了一个css属性：image-rendering，他的用途更加广泛，用于：

  • * images
  • * background-images of any element
  • * HTML5 <video> Element
  • * HTML5 <canvas> Element

image-rendering用法：

img { image-rendering: optimizeQuality; /* Firefox 3.6 */ }

详细介绍：image-rendering

对比一下各浏览器对图片失真处理方法：

浏览器对图片失真处理方法对比
浏览器 版本号 提供CSS属性
Internet Explorer7.0-ms-interpolation-mode: bicubic | nearest-neighbor

仅支持非透明图像格式 (如JPG, GIF, PNG); 无继承属性

Firefox (Gecko)3.6 (1.9.2)image-rendering: auto | inherit | optimizeSpeed | optimizeQuality | -moz-crisp-edges
Opera------
Safari (WebKit)------

更多的测试可以到可以到MSDN 做的例子看一下效果，或者到血 統の森-web実験小屋看一下效果。

推荐图文列表以及CSS布局切换

作者：idd.chiang 发布时间：February 23, 2010 分类：HTML/CSS,Javascript/AS No Comments

经常碰到图文列表的排列，怎样既符合语义化标签又能扩展出多种表现形式呢。自己做过许多布局设计，总结出一点小经验和技巧。

pailie.jpg

列表的HTML构成：

<div class="box">
  <ul>
    <li>
      <div class="item">
        <a href="url"><img src="src" alt=""/></a>
        <h3><a href="url">TITLE</a></h3>
        <p>Description</p>
      </div>
    </li>
    ... items ...
  </ul>
</div>

在列表布局中，我们经常会选用float属性来实现横向排列，要实现每一行都整齐排列，我们必须固定列表项的高度，否则会发生意想不到的混乱表现。但实际应用中，图片不一定都同尺寸，按比例来表现势必会与我们固定列表高度或宽度相驳，也许还有图片底边对齐的要求。为了实现这种效果，这里用到了ie6不支持的display:inline-block；ie通过使用“display:inline;zoom:1”来hack。

下面直接上例子：
Demo 值得推荐的图文列表以及CSS布局类型切换

不得不提到一点，如果使用display:inline-block做排列的话，标签换行在Firefox下会引起letter-spacing的bug，如下图：
letter-spacing-bug.png
解决方法是通过将排列元素（例子中是li）的父层（例中ul）设置letter-spacing:-6px;然后再将排列元素letter-spacing还原为默认值0;

常用Vim操作命令集合

作者：idd.chiang 发布时间：February 10, 2010 分类：Apache/Linux No Comments

Vim常用操作命令

-1-移动：
h/j/k/l: 左/下/上/右　移一格
w : 向后词移动　（前面加数字移动多少个词）
b : 向前词移动　（前面加数字移动多少个词）
e : 向后移到词末
ge : 向前移到词末
$ : 行末
0 : 行首
tx : 向右查找本行的x并移到那儿（大写时向左）
33G : 移到文件的第33行 *G = shift+g
gg : 文件首行
G : 文件尾行
33% : 文件的33%处
H/M/L : 屏幕的首/中/尾行
zt/zz/zb : 当前行移到屏幕的首/中/底部

-2-跳转：
” : 回到跳转来的地方
CTRL-O : 跳到一个 “较老” 的地方
CTRL-I : 则跳到一个 “较新” 的地方

-3-查找：
/ : 向下查找（后加关键字）
? : 向上查找（后加关键字）
n : 下一条符合的记录

-4-编辑：
i : 转换到插入模式
x : 删除当前字符
. : 重复最后一次的修改操作(同PS里ctrl+f执行滤镜)
u : 撤销操作
CTRL-R : 重做
p : 将删除的字符插入到当前位置(put)

-5-保持退出操作：
:q : 退出
:q! : 不保存退出
ZZ : 保存后退出
:e! : 放弃修改重新编辑

Vim命令壁纸两张

适合于初学者的VIM命令图解：原文：给程式设计师的Vim入门图解说明

阅读剩余部分...

  2. 1
  3. 2
  4. 3
  5. 4
Copyright © 不名一格 Powered by Typecho 登录 京ICP备05013217号