Pivot Code » CSS

HTML5初探——个人HTML5简历

刘铭森 — Wed, 04 Aug 2010 03:06:34 +0000

下一个WEB时代将是HTML5的?它是一场WEB的革命，因为改写了WEB的历史?
呃，关于HTML5我只使用，不说话……

HTML5被浏览器支持了有很长一段时间了，而由于我的惰性，因此只知道其中的一些标签可以用来做什么，而一直没有去实践过如何去做。

也曾经一时兴起的用dreamweaver新建一个html文档兴致勃勃的一边查阅W3C教程一边在dw里编写HTML5代码。可是当我在chrome下浏览的时候却发现页面呈现的效果简直狗屁不是!于是我怀疑chrome所说的支持HTML5会不会是一个谎言？

后来的后来我才知道，原来是我的声明有问题！这些最基础的东西竟然被我忽略掉了，惭愧的说其实之前对于文档声明我从来都是被DW默认习惯了，因此从没有去关注过……

在HTML5中增加了很多更符合语义化的标签，应用这些标签能让你在尽可能不单独定义class的情况下呈现你的布局与样式。并且需要着重再强调一次的是它更加符合语义化。如果您想了解更多关于HTML5的知识，您可以访问W3C网站的HTML5教程:http://www.w3school.com.cn/html5/

废话少说，以下是我结合简单的HTML5标签来制作的个人简历（您需要在chrome、safari、opera、Firefox下才能正常浏览）

在这份简历中，用到的HTML5标签有

需要提醒一下的是，开始我用header标签在chrome下能正常显示布局，而在firefox和opera下不能正常显示，后来才知道原来在firefox和opera下默认的header标签是行内元素而不是我期望的块级元素，于是，我们在使用之前，仍需要重置css样式。下面是我在网上找到的HTML5的css重置代码：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, i, center, dl, dt, dd, ol, ul, li, form, label, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, audio, canvas, details, figcaption,
figure, footer, header, hgroup, mark, menu, meter, nav,
output, progress, section, summary, time, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
 
body {
	line-height: 1;
}
 
article, aside, dialog, figure, footer, header,
hgroup, nav, section, blockquote {
	display: block;
}
 
nav ul {
	list-style: none;
}
 
ol {
	list-style: decimal;
}
 
ul {
	list-style: disc;
}
 
ul ul {
	list-style: circle;
}
 
blockquote, q {
	quotes: none;
}
 
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
 
ins {
	text-decoration: underline;
}
 
del {
	text-decoration: line-through;
}
 
mark {
	background: none;
}
 
abbr[title], dfn[title] {
	border-bottom:1px dotted #000;
	cursor:help;
}
 
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
 
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}
 
input[type="submit"], input[type="button"], button {
    padding: 0 !important;
    margin: 0 !important;
}
 
input, select, a img {
	vertical-align: middle;
}

简历HTML部分




 
刘铭森的个人简历



个人简历

	
	刘铭森
	- 前端开发 http://www.pivotcode.com
	- 摄影 http://photo.mingsenliu.com
	


	
	职能
 
		
			精练使用xHTML、CSS规范代码，兼容主流浏览器（包括IE6）
			熟用javascript动态DHTML效果实现,兼容主流浏览器
			有学习与实践 HTML5 与 CSS3 前沿技术经验
			熟用jQuery代码库，了解YUI,Ajax
			精练Photoshop切图与效果实现，会用flash制作简单动画，对ActionScript有所了解
			对php,sql的后台实现有所了解，对php代码有所研究，会应用前端技术嵌套PHP代码制作Wordpress模板
			翻唱某些歌不走调，而且唱得还可以
			会用单反相机拍摄点不影响对方形象的照片
		
 
	
	
	工作能力
 
		
			懂得如何协作和怎样协作才可以以同样的时间获得更高的效率
			编写代码的质量和效率高
			懂得如何优化网站性能与SEO
			接触过很多项目，有丰富的web2.0网站前端开发经验
			对用户体验和产品交互有自己的认识，同时也了解用户的使用习惯
			学习能力能适应开发和业务需求，需要什么就能学什么并且学会学好
			不会吸烟，不污染办公室环境
		
 
	
	
	工作经验
 
		
			2009.11--今 北京译言协力传媒科技有限公司
			·CSS与xHTML页面重构与体验优化
			·Javascript动态效果实现(结合jQuery)
			·兼部分页面设计与广告Banner设计
			2009.3--今(兼职) Internet Solutionz Inc.
			·公司网站设计与切图
			·公司的网页重构项目参与（CSS & xHTML）
			·公司项目Javascript动态效果实现(结合jQuery)
			·公司宣传Banner与VI设计
			2008.10--2009.3 北京了如科技有限公司
			·负责旗下品牌房友圈网站的页面重构（CSS & xHTML）
			·负责部分页面与企业VI设计
			参与网站项目 周伯通互动招聘社区
			·CSS与xHTML页面重构
			·Javascript动态效果实现(结合jQuery)
		
 
	
	
	您可能还想知道的
 
		
			习惯的开发环境
			·WAMP & Aptana & FireBug
			·WAMP & Dreamweaver & FireBug
			·WAMP & EditPlus & FireBug
			习惯的测试环境
			Windows 7 + FireFox & Chrome &  & Opera & IE8 & IE Tester
			学历
			·6年级开始学画画，高中开始不好好学习，现在开始后悔
			·故目前学历只有中专（天津精通学院计算机专业）
			语言能力
			·一口掺杂着河北保定方言的汉语普通话
			·一般的英语读写能力（在不断学习和积累的路上）
			·看不懂和听不懂的其他语言能力
			我在读的书
			
			我读过的书（不完全统计）
			
		
 
	
 
	
	如果以上信息没让您失望
		
			
				手机：15101123812
				E-mail & Gtalk : mingsenliu@gmail.com
				QQ & MSN : mingsenliu@msn.com
				个人网站：http://www.pivotcode.com
				现住址：北京市朝阳区水锥子社区5号楼209室

简历CSS部分

fieldset{width:880px;margin:0 auto;-webkit-box-shadow:3px 3px 0px #E0E7F1;box-shadow:3px 3px 0px #E0E7F1;-moz-box-shadow:3px 3px 0px #E0E7F1}
fieldset fieldset{width:auto;margin-bottom:20px;padding:10px;}
legend{font-weight:bold;text-align:center}
fieldset fieldset legend{text-align:left}
header{width:840px;padding:20px;background:#E0E7F1;margin-bottom:10px;}
header h1{font-size:26px;color:#036;margin-bottom:10px;}
header h2{font-size:14px;color:#36C;line-height:25px;}
header aside{width:60px;height:60px;padding:1px;float:right;background:#fff;border:1px solid #ccc}
header aside img{width:60px;height:60px;}
article h2{line-height:30px;margin-bottom:10px;}
article ol{margin-left:30px;list-style:decimal;font-size:12px;}
article ol li{line-height:30px;}
article dl{margin-left:5px;font-size:12px;line-height:30px;}
article dl dt{font-weight:bold}
article dl dd{line-height:20px;}
address ul{list-style:square;font-size:12px;margin-left:20px;font-family:Georgia,"simhei","Times New Roman", Times, serif}
address ul li{line-height:30px;}
address ul li span{color:#06C;font-style:normal;font-size:14px;}

由简历的源代码可见，结构完全摆脱掉了class样式的依赖。对于HTML5你心动了吗？

CSS结合单图定位制作的一个漂亮的投票应用

刘铭森 — Fri, 12 Mar 2010 07:49:05 +0000

这个投票代码是我在很早以前做项目时完成的，今天在新的工作中又用到了投票功能，于是我就把上个项目做的东西拿出来做了简单的优化，以便让这个代码更好的扩展和移植。

投票功能在实际应用中的关键在于：需要用百分比控制显示条的长度，之所以使用百分比是用来配合程序分配相应的值来实现投票比率均分的显示效果。

在这个应用里，为了更好的利用图像表现进度条的显示，用到了很多标签，然后对标签进行排列控制长度得到了最终的效果.

DEMO:

以下是CSS代码：

@charset "utf-8";
/* CSS Document */
*{margin:0;padding:0}
.voteInfo{
	width:550px;
	padding-top:10px;
	float:left;
}
.voteInfo span{
	display:block;
	color:#999;
	height:20px;
	line-height:20px;
}
.voteInfo span em{float:right; color:#F00;}
.voteInfo h1{
	font-size:16px;
	height:30px;
	line-height:30px;
	color:#005FAB;
	font-weight:bold;
	text-align:center;
	margin-top:20px;}
.voteInfo ul{
	width:486px;
	list-style:none;
	margin:0 auto
}
.voteInfo ul p{
	font-size:12px;
	color:#999;
	line-height:18px;
}
.voteInfo ul li{
	height:20px;
	line-height:20px;
	margin:0 auto;
	margin-top:10px;
}
.voteInfo ul li span{
	display:block;
	float:left
}
.voteInfo ul li span.voteClassName{width:140px;padding-right:10px;text-align:right}
.voteInfo ul li span.voteDataLength{width:186px;}
.voteInfo ul li span.voteDataLength em{
	width:186px;
	height:20px;
	background:#ccc}
 
.voteInfo ul li span.voteDataLength em b{
	display:block;
	height:20px;
	float:left;
}
.voteInfo ul li span.voteDataLength em i{
	width:2px;
	height:20px;
	float:left;}
.voteInfo ul li span.voteDataLength em h6{width:184px; height:20px; display:block; float:right;}
.voteInfo ul li span.voteDataLength em i.vote1{background:url(../img/poll.gif) left top;}
.voteInfo ul li span.voteDataLength em i.vote2{background:url(../img/poll.gif) left -20px;}
.voteInfo ul li span.voteDataLength em i.vote3{background:url(../img/poll.gif) left -40px;}
.voteInfo ul li span.voteDataLength em i.vote4{background:url(../img/poll.gif) left -60px;}
.voteInfo ul li span.voteDataLength em i.vote5{background:url(../img/poll.gif) left -80px;}
.voteInfo ul li span.voteDataLength em i.vote6{background:url(../img/poll.gif) left -100px;}
.voteInfo ul li span.voteDataLength em i.vote7{background:url(../img/poll.gif) left -120px;}
.voteInfo ul li span.voteDataLength em i.vote8{background:url(../img/poll.gif) left -140px;}
.voteInfo ul li span.voteDataLength em i.vote9{background:url(../img/poll.gif) left -160px;}
.voteInfo ul li span.voteDataLength em i.vote10{background:url(../img/poll.gif) left -180px;}
.voteInfo ul li span.voteDataLength em b.votebg1{background:url(../img/poll.gif) right top; float:left;}
.voteInfo ul li span.voteDataLength em b.votebg2{background:url(../img/poll.gif) right -20px; float:left;}
.voteInfo ul li span.voteDataLength em b.votebg3{background:url(../img/poll.gif) right -40px; float:left;}
.voteInfo ul li span.voteDataLength em b.votebg4{background:url(../img/poll.gif) right -60px; float:left;}
.voteInfo ul li span.voteDataLength em b.votebg5{background:url(../img/poll.gif) right -80px; float:left;}
.voteInfo ul li span.voteDataLength em b.votebg6{background:url(../img/poll.gif) right -100px; float:left;}
.voteInfo ul li span.voteDataLength em b.votebg7{background:url(../img/poll.gif) right -120px; float:left;}
.voteInfo ul li span.voteDataLength em b.votebg8{background:url(../img/poll.gif) right -140px; float:left;}
.voteInfo ul li span.voteDataLength em b.votebg9{background:url(../img/poll.gif) right -160px; float:left;}
.voteInfo ul li span.voteDataLength em b.votebg10{background:url(../img/poll.gif) right -180px; float:left;}
.voteInfo ul li span.voteNumber{width:140px;padding-left:10px;}
.voteInfo ul li span.voteRedio{width:30px;}
.voteInfo ul li span.voteSubmitBtm{width:60px;}

以下是html代码：

需要注意的是，进度条的长度一定要用百分比的内联样式，这样才能方便程序对这个数值动态控制

至此，所有代码都在这里了，由于为了更好的表现因此代码嵌套的比较多也比较复杂，因此如果不特别追求效果的话，可以直接用背景色代替，进而获得更精简的代码。

CSS3兼容代码生成器——css-please

刘铭森 — Wed, 10 Mar 2010 04:51:04 +0000

CSS3和HTML5是web技术发展以来的又一次革命，然而如今的浏览器都不能完全的支持CSS3，有些浏览器则是通过自己的特有属性来支持部分CSS3的属性。更可气的是，占有浏览器最多份额的IE对CSS3的支持更是捉襟见肘，不过好在微软官方提供了一些特有滤镜来填补这些技术空白，然而这些特有属性对于我们前段开发人员来说不便于记忆，于是我们就需要用到这个网站来帮我们生成跨浏览器的CSS3属性了。

CSS Please是一个在线生成跨浏览器的CSS3代码生成器，通过它可以生成已支持CSS3属性的浏览器兼容性代码。

以下是我整理的中文翻译版本：

地址：http://www.pivotcode.com/demo/css3compatibility/css3compatibility.html
示例：

这是英文原版地址：http://css3please.com

此程序参考源来自《前段观察》：http://www.qianduan.net/css3-please.html

CSS重构（CSS Reset）

刘铭森 — Tue, 09 Mar 2010 04:46:53 +0000

顾名思义，css重构就是重设浏览器的表现样式。为什么要重构呢？因为浏览器样式在不同的浏览器渲染下的默认显示各有不同，为了我们在开发中能够让项目在所有浏览器下的显示效果是一样的，所以在开发之前我们要按照自己习惯的方式来重构CSS代码。

那么我们需要怎样的习惯呢？这个还是要靠自己在项目中积累了。以前我在初学时也是复制别人的CSS Reset代码，然后再进行自己的项目，可是有的时候我发现有些没必要重构的样式在之前重构掉了，在单独到一个样式定义时，我还需要给他重新写上，而且，在不同的项目下的重构样式也会各不相同，例如一个图片网站和一个博客网站。因此，我往往都是简单的重构一些必须的样式，后期用到需要重构的额外再写，因此我的习惯就是随用随加。

今天在博客园里看到了一篇文章中的十个重构的例子。接下来就是剽窃的内容了：

一、Generic Reset CSS

* {
padding: 0;
margin: 0;
border: 0;
}

这也是一款CSS Reset的方法，让所有的选择器的padding、margin和border都设置成0。这是一种强大的方法，也是最简单，最安全的方法，不过，也是最占用资源的方法。对于小型的网站来说，用这个并不会带来大的资源浪费，但如果是像Yahoo这种架构非常大的网站，刚需要有选择地进行CSS重设，以减少资源浪费。

二、Ateneu Popular CSS Reset

html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, big, cite, code, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt,
var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus { outline: 0;}
a, a:link, a:visited, a:hover, a:active{text-decoration:none}
table { border-collapse: separate;border-spacing: 0;}
th, td {text-align: left; font-weight: normal;}
img, iframe {border: none; text-decoration:none;}
ol, ul {list-style: none;}
input, textarea, select, button {font-size: 100%;font-family: inherit;}
select {margin: inherit;}
hr {margin: 0;padding: 0;border: 0;color: #000;background-color: #000;height: 1px}

三、Chris Poteet’s Reset CSS

* {
vertical-align: baseline;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {
padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
margin: 20px 0;
}
li, dd, blockquote {
margin-left: 40px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

四、Yahoo’s CSS Reset

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,img {
border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
font-weight: normal;
font-style: normal;
}
ol,ul {
list-style: none;
}
caption,th {
text-align: left;
}
h1,h2,h3,h4,h5,h6 {
font-weight: normal;
font-size: 100%;
}
q:before,q:after {
content:”;
}
abbr,acronym { border: 0;
}

五、Eric Meyer Reset CSS

html, body, div, span, applet, object, iframe, table, caption,
tbody, tfoot, thead, tr, th, td, del, dfn, em, font, img, ins,
kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr,
acronym, address, big, cite, code, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend {
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
outline: 0;
padding: 0;
margin: 0;
border: 0;
}
:focus {
outline: 0;
}
body {
background: white;
line-height: 1;
color: black;
}
ol, ul {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
blockquote:before, blockquote:after, q:before, q:after {
content: “”;
}
blockquote, q {
quotes: “” “”;
}

六、Tantek Celik Reset CSS

:link,:visited { text-decoration:none }
ul,ol { list-style:none }
h1,h2,h3,h4,h5,h6,pre,code { font-size:1em; }
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input
{ margin:0; padding:0 }
a img,:link img,:visited img { border:none }
address { font-style:normal }

七、Christian Montoya Reset CSS

html, body, form, fieldset {
margin: 0;
padding: 0;
font: 100%/120% Verdana, Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
margin: 1em 0;
padding: 0;
}
li, dd, blockquote {
margin-left: 1em;
}
form label {
cursor: pointer;
}
fieldset {
border: none;
}
input, select, textarea {
font-size: 100%;
font-family: inherit;
}

八、Rudeworks Reset CSS

* {
margin: 0;
padding: 0;
border: none;
}
html {
font: 62.5% “Lucida Grande”, Lucida, Verdana, sans-serif;
text-shadow: #000 0px 0px 0px;
}
ul {
list-style: none;
list-style-type: none;
}
h1, h2, h3, h4, h5, h6, p, pre,
blockquote, ul, ol, dl, address {
font-weight: normal;
margin: 0 0 1em 0;
}
cite, em, dfn {
font-style: italic;
}
sup {
position: relative;
bottom: 0.3em;
vertical-align: baseline;
}
sub {
position: relative;
bottom: -0.2em;
vertical-align: baseline;
}
li, dd, blockquote {
margin-left: 1em;
}
code, kbd, samp, pre, tt, var, input[type='text'], textarea {
font-size: 100%;
font-family: monaco, “Lucida Console”, courier, mono-space;
}
del {
text-decoration: line-through;
}
ins, dfn {
border-bottom: 1px solid #ccc;
}
small, sup, sub {
font-size: 85%;
}
abbr, acronym {
text-transform: uppercase;
font-size: 85%;
letter-spacing: .1em;
border-bottom-style: dotted;
border-bottom-width: 1px;
}
a abbr, a acronym {
border: none;
}
sup {
vertical-align: super;
}
sub {
vertical-align: sub;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.8em;
}
h3 {
font-size: 1.6em;
}
h4 {
font-size: 1.4em;
}
h5 {
font-size: 1.2em;
}
h6 {
font-size: 1em;
}
a, a:link, a:visited, a:hover, a:active {
outline: 0;
text-decoration: none;
}
a img {
border: none;
text-decoration: none;
}
img {
border: none;
text-decoration: none;
}
label, button {
cursor: pointer;
}
input:focus, select:focus, textarea:focus {
background-color: #FFF;
}
fieldset {
border: none;
}
.clear {
clear: both;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
body {
text-align: center;
}
#wrapper {
margin: 0 auto;
text-align: left;
}

九、Anieto2K Reset CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p,
blockquote, pre, a, abbr, acronym, address, big,
cite, code, del, dfn, em, font, img,
ins, kbd, q, s, samp, small, strike,
strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
center, u, b, i {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: normal;
font-style: normal;
font-size: 100%;
font-family: inherit;
vertical-align: baseline
}
body {
line-height: 1
}
:focus {
outline: 0
}
ol, ul {
list-style: none
}
table {
border-collapse: collapse;
border-spacing: 0
}
blockquote:before, blockquote:after, q:before, q:after {
content: “”
}
blockquote, q {
quotes: “” “”
}
input, textarea {
margin: 0;
padding: 0
}
hr {
margin: 0;
padding: 0;
border: 0;
color: #000;
background-color: #000;
height: 1px
}

十、CSSLab CSS Reset

html, body, div, span, applet, object, iframe, h1, h2, h3,
h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot,
thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
:focus {
outline: 0;
}
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
a img, iframe {
border: none;
}
ol, ul {
list-style: none;
}
input, textarea, select, button {
font-size: 100%;
font-family: inherit;
}
select {
margin: inherit;
}
/* Fixes incorrect placement of numbers in ol’s in IE6/7 */
ol { margin-left:2em; }
/* == clearfix == */
.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
* html .clearfix {height: 1%;}
.clearfix {display: block;}

以上方法大同小异，需求不同因而方法不同，一个好的重构代码是即能达到自己想使用的效果，又能提高自己的效率，更能节省不必要浪费的资源，还可以节省不必要浪费的代码，这才是重构最终要实现的目的。

部分代码转自：博客园 – 基于B/S模式的设计与开发

CSS五个常见却不常用的属性

刘铭森 — Mon, 08 Mar 2010 02:42:50 +0000

这篇文章介绍了 5 个实用的 CSS 属性。你应该很熟悉，但很可能很少会使用到。我并不是在谈论展望全新的 CSS3 属性，我指的是旧的 CSS2 中的属性，如：clip，min-height，white-space，curosr 和 display 等一些被所有浏览器广泛支持的属性。因此，千万不要错过这篇文章，因为你可能发现它们竟有如此之大的用途。

1、CSS Clip

剪辑 (clip) 属性就像一个面具。它允许你使用矩形掩盖页面元素的内容。要剪辑一个元素：你必须指定其 position 属性为 absolute，然后指定相对于元素的 top，right，bottom，left 值。

图片剪辑实例

以下示例演示了如何使用 clip 属性掩盖一张图片。首先，指定

元素为 position:relative，然后指定元素为 position:absolute，并且根据实际需要设定 rect 值。

.clip {
  position: relative;
  height: 130px;
  width: 200px;
  border: solid 1px #ccc;
}
.clip img {
  position: absolute;
  clip: rect(30px 165px 100px 30px);
}

图像调整尺寸和剪辑

在这个示例中，我将展示如何调整图像尺寸和剪辑图片。素材图片是矩形的，我想将其削减至 50％的尺寸，用来创建一个正方形格式的缩略图。因此，我用宽度和高度属性来调整图像，并使用 clip 剪辑属性予以掩盖。然后用 left 属性将图片移开左侧 15px 的距离。

.gallery li {
  float: left;
  margin: 0 10px 0 0;
  position: relative;
  width: 70px;
  height: 70px;
  border: solid 1px #000;
}
.gallery img {
  width: 100px;
  height: 70px;
  position: absolute;
  clip: rect(0 85px 70px 15px);
  left: -15px;
}

2、Min-height

min-height 属性允许你指定元素的最小高度，适用于需要平衡布局的情况。以确保内容区域高于侧边栏。

.with_minheight {
  min-height: 550px;
}

IE6 的 Min-height hack

注：神奇的 IE6 原生不支持 min-height 属性，不过幸好有一个min-height hack。

.with_minheight {
  min-height:550px;
  height:auto !important;
  height:550px;
}

3、White-space

white-space 属性指定了元素中空白的处理方式。比如，指定 white-space:nowrap 会阻止文本自动换行。

em {
  white-space: nowrap;
}

4、Cursor

如果你改变了按钮的行为，其指针也应该随之改变。比如，当一个按钮不可用时，指针应该改变为默认的箭头，来表明它不可点击。因此，cursor 属性在开发 Web 应用程序时相当有用。

.disabled {
  cursor: default;
}
 
.busy {
  cursor: wait;
}
 
.clickable:hover {
  cursor: pointer;
}

5、Display inline / block

如果你不知道：块级元素是作为独立的一行来渲染的，而行内元素是在同一行被渲染的。

，

和

标签都是块级元素，，， 都是行内元素。通过 display:inline 或 block 的方式，你可以重设这些元素的 display 样式。

.block em { display: block; } .inline h4, .inline p { display: inline; }

英文原稿：5 Simple, But Useful CSS Properties | WebDesignWall
翻译整理：5 个简单实用的 CSS 属性 | 芒果

相关日志
也谈IE6下block元素float多出文字BUG
CSS结合单图定位制作的一个漂亮的投票应用
CSS3兼容代码生成器——css-please
CSS重构（CSS Reset）
常用正则表达式速查

IE6固定定位position属性fixed BUG

刘铭森 — Wed, 03 Mar 2010 04:53:25 +0000

当需要把一个元素永远固定在浏览器的一个位置的时候，那么就需要用到position的fixed属性。然后用top和left设置元素的位置。

这个效果也应用在人人网的个人首页底部的工具栏。

常去人人网的朋友肯定会发现，如果用IE6浏览器访问人人网的话，这个工具条以前是不存在的。后来，人人已经通过js实现此功能，但是它的效果和正常浏览器下访问是不同的，即每当拖动滚动条它就会隐藏，当停止时再出现。所以，值得肯定的是IE6不支持这个position的fixed属性。

这个问题也一直都在困扰着我，因为我一直都在想把这个效果实现在我的一个项目上，而又避开使用javascript。

后来在‘幸福收藏夹’博客，找到了解决方案——利用position:absolute定位在IE6下实现固定定位的效果，以下是实现原理：

fixed元素的绝对位置相对于HTML元素，滚动条则是基于body元素而不属于html元素。
当我们拖动滚动条滚动的时候，内容都会随窗口滚动，这时滚动的是body元素。HTML元素被浏览器判定为相对定位的根级元素，而我们定义的position:absolute元素也在HTLML元素当中，属于HTML元素的子元素。因此我们所定义的absolute元素会根据HTML元素的大小而进行绝对定位。如果我们未曾对HTML元素设置样式的情况下，它的大小是随内容的大小而变的,这样一来如果我们在其中使用绝对定位，并不能实现我们想得到的固定定位的效果。因此我们需要给我们需要绝对定位元素的相对定位盒模型指定一个绝对大小，即窗口当前的大小。但是body元素仍需保持其原有大小，否则就没有滚动条了。这时我们需要将超出HTML元素的内容隐藏掉，就可以让HTML元素永远保持在一个固定大小了。

代码如下：

html{overflow:hidden;} // Important（必须）。 body{overflow:auto;height:100%}

代码规定了html将只有当前窗口的大小，溢出的内容隐藏。但是body仍会随高度自动变化。于是我们就可以利用position:absolute来把元素固定在窗口任意位置了。例如仿人人网定位元素在底边：

示例的完整代码：

ie6-position-fixed-bug

测试定位
占位文字

注：本文参考自幸福收藏夹

相关日志
也谈IE6下block元素float多出文字BUG
体验篇：Microsoft Expression Web 3 SuperPreview全攻略
css文字阴影
IE6下图像的最大宽度

css命名规则

刘铭森 — Mon, 22 Feb 2010 03:04:39 +0000

头：header
内容：content/container
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态态：status
投票：vote
合作伙伴：partner

注释的写法

/* Footer */
内容区
/* End Footer */

id的命名
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center

id的命名

页面结构

容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center

导航

导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary

功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright

class的命名

(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }

(2)字体大小,直接使用”font+字体大小”作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如

.left { float:left; }
.bottom { float:bottom; }

(4)标题栏样式,使用”类别+功能”的方式命名,如
.barnews { }
.barproduct { }

注意事项

1.一律小写;
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写，除非一看就明白的单词.
主要的 master.css
模块 module.css
基本共用 base.css
布局，版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css

相关日志
HTML5初探——个人HTML5简历
CSS结合单图定位制作的一个漂亮的投票应用
CSS3兼容代码生成器——css-please
CSS重构（CSS Reset）
CSS五个常见却不常用的属性

css文字阴影

刘铭森 — Sun, 07 Feb 2010 02:47:34 +0000

CSS Attribute ：text-shadow

近期在自己的项目中用到了这个属性，以前经常见到在精彩网页设计中以文字搭配阴影呈现的立体文字效果彰明较著，自己也曾有过跃跃欲试的冲动，后来在网上查了下它的兼容性，结果对IE所有版本浏览器都不兼容，由于IE浏览器的市场份额还是占多数，因此对于这个属性只是简单了解，没有深入研究并使用。

而现在，在项目中需要用到这个属性，那么就不得不为此细究一下了。
text-shadow属性在Firefox 3.5+，Safari 1.1+/chrome 2.0+和opera 9.5下被支持，对于IE只能期盼下一个版本了（对于IE浏览器的阴影效果微软提供了官方的解决方案，请继续往下看）。
此属性基本写法：

text-shadow:[颜色 x轴 y轴模糊半径]

x,y轴控制阴影的偏移位置
颜色代表阴影的颜色
模糊半径可以控制阴影的模糊与不模糊

另外某些浏览器支持多层阴影，而对于多层阴影的表现方式是用逗号隔开在加一组属性，例如：

text-shadow:[颜色 x轴 y轴模糊半径],[颜色 x轴 y轴模糊半径]

(注：safari4.0后才支持多层阴影)

示例：

text-shadow:black 2px 2px 0

DEMO

那么IE浏览器该怎么办呢？毕竟多数人还在使用IE。

IE浏览器对于好多css的新特性支持都不是很好，尤其是IE6（警告大家IE6不要再用了，否则你的电脑会成为病毒的温床）那么有个什么好的方案解决IE对于这个属性的兼容性问题呢？尤其是IE6！

对于这个疑问，微软提出了官方的解决方案——利用shadow滤镜来实现：

filter: dropshadow(OffX=1, OffY=1, Color='#f5f5f5', Positive='true')

OffX对应text-shadow属性的X轴
OffY对应text-shadow属性的y轴
Color对应text-shadow属性的颜色
Positive设置为true就可以了

欲了解更多关于IE的这个滤镜，请查看官网介绍： Dropshadow

ok，现在可以放心的使用文字阴影来实现你想要的效果了。

相关日志
也谈IE6下block元素float多出文字BUG
CSS结合单图定位制作的一个漂亮的投票应用
CSS3兼容代码生成器——css-please
CSS重构（CSS Reset）
CSS五个常见却不常用的属性

IE6下图像的最大宽度

刘铭森 — Sun, 27 Dec 2009 09:10:01 +0000

图像如果显示在一个限制了宽度的div容器中时，图像有多大，它便会显示多大,当布局小于图像大小时便会产生溢出。同样的问题在table容器中一样。

那么你会说可以在CSS中定义布局中图像的宽度。那么如果图像小于布局的宽度时，图像便会被拉伸变形。那么有什么好的办法让这个图像即不会溢出，又能保持它原来的大小呢？这个时候我们可以用CSS的max-width方法来限制图像的最大宽度解决这个问题，具体用法就是:

.layout{width:600px;} .layout img{max-width:600px;height:auto;}/*如果不希望图片会因为限制宽度而变形的话，那么把高度设置为自适应*/

如此，问题解决，但是并不是所有问题都解决了，浏览器兼容性是永远都是前段工程师的噩梦，因为该死的IE6并不对这个属性提供支持。所以我们不得不针对IE6做一些处理。接下来就是只有IE支持的属性值：expression

IE5及其以后版本支持在CSS中使用expression，用来把CSS属性和Javas cript表达式关联起来，这里的CSS属性可以是元素固有的属性，也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式，CSS属性的值等于Javascript表达式计算的结果。在表达式中可以直接引用元素自身的属性和方法，也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。

用法是expression(statement),例如我们上面的CSS，我们需要在规则中加入

.layout{width:600px;} .layout img{max-width:600px;width:expression(this.width > 600 ? 600: true);height:auto;}/*this是指当前元素‘.’操作符中文代表中文意义的‘的’,width字面翻译宽度，后面是三元判断表达式，意思是说当img的宽度大于600时，img的宽等于600，否则不进行任何操作*/

相关日志
也谈IE6下block元素float多出文字BUG
网页测试工具分享
IE6固定定位position属性fixed BUG
体验篇：Microsoft Expression Web 3 SuperPreview全攻略
“IETester”微软官方产品SuperPreview之感慨篇

也谈IE6下block元素float多出文字BUG

刘铭森 — Tue, 01 Dec 2009 06:28:17 +0000

最近做的一个项目经常会用到块级元素（block）浮动定位（float）的方式做的一个类似于BBS文章列表多行多列的布局方案。

我大概看了一下网上对于此种布局的布局办法，发现大多都是用表格来做的。连豆瓣、discuz的论坛也都是表格布局。

但是我对表格的布局有种敬而远之的畏惧感，一个是它的代码量很大，虽然用DW里添加表格的工具很快的添加，但是对于它的自适应元素的问题，我始终难以控制的行云流水。因此，我还是决定用css来做。

我选择用ul元素做列表框架，li元素做列表行，span元素做各列的容器的布局方式实现。

【css部分】

@charset "utf-8"; /* CSS Document */ ul li{margin:0; padding:0; list-style:none; font-size:12px; color:#333}/*初始化ul,li元素，让我们更方便使用*/ ul li{width:800px; height:35px; line-height:35px; border-bottom:1px dashed #ccc}/*定义高35像素的li元素，宽是布局的宽，还定义了一个虚线的下边框*/ ul li span{display:block; float:left; height:35px; line-height:35px;}/*定义span元素为块级元素，左浮动，高为li元素的高*/ /*分别定义需要的列span元素的宽度*/ ul li span.listOne{width:300px;} ul li span.listTwo{width:200px;} ul li span.listThr{width:100px;} ul li span.listFou{width:100px;} ul li span.listFiv{width:100px;}

【html部分】

帖子列表帖子分类发布者最后回复发布时间

这里是帖子标题这里是帖子分类发布者姓名回复者姓名 2009-10-10 20：10

这样，如果在IE6+浏览器看的话，会是预想的两行5列的效果，没有任何问题。但是，如果在IE6下看，右侧会多出最后一列中的末字到下一行，如图所示

代码是没有任何问题的，因为在其他浏览器没有任何问题。所以那肯定是IE6的问题。

以前没有用过此种布局，因此并没有过处理此问题的经验。后来去往上搜了一下，往上大多都是出自同门师傅的答案，内容如下：

“1.是注释引起的,删除所有注释即可.
2.hidden的input直接放在form下.
3.display为none的div也有可能引发此bug.
2,3可以通过外面再包一次DIV解决”

另外有一篇很详细的解说，但是他是通过宽度的调整解决的我没有尝试，有兴趣的可以试一下，奉上地址如下：
《IE6/IE7文字溢出bug原因及解决办法》http://www.yarak.net.cn/default.asp?id=82
后来问了一下同事，他对此问题有过相应经验，不过他所知道的答案也是网上流传的方式。但是我的代码里并没有注释和以上类似的任何条件。
后经尝试，得出以下方案：
1、在span的父元素上定义溢出隐藏overflow：hidden;可以解决此问题。
2、span元素在html中书写时不进行换行（块级元素的特性）
3、span元素去掉浮动（float）并把显示方式改成display：inline-block
如此，溢出BUG问题解决

相关日志
IE6下图像的最大宽度
CSS五个常见却不常用的属性
IE6固定定位position属性fixed BUG
css文字阴影
CSS结合单图定位制作的一个漂亮的投票应用