工作总结
【1】border-style
solid 实线
dashed 虚线
dotted 点线（IE6不兼容）
【2】area shape
<img src=合并后的图片>
<map name=”map1”>
<area shape=”rect” coords=”0,0,40,40” href=”用户跳转页面URL”>
<area shape=”rect” coords=”50,0,90,40” href=”购物车跳转页URL”>
</map>
【3】css表达式http://blog.csdn.net/andyyukun/article/details/1676963
【4】圆角浏览器支持
IE9+、Firefox 4+、Chrome、Safari 5+ 以及 Opera 支持 border-radius 属性。
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
【5】font-family:"iconfont"
图标字体（iconfont），是一种把图标放入自定义字体中，然后使用字体来替代显示普通图标的技术。
http://www.iloveolive.info/2013/03/use-iconfon/
【6】html 术语
【7】cursor: pointer;
【8】letter-spacing: -.02em;
【9】CSS3 边框图片
通过 CSS3 的 border-image 属性，您可以使用图片来创建边框
【10】white-space:nowrap;
【11】在IE6下不支持position:fixed;的时候
_position:absolute;
_bottom:auto;
_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));
【12】 LI中内容超过长度后以省略号显示的方法
此方法适用与IE与OP浏览器
<style type="text/css">
<!--
li {
width:200px;
white-space:nowrap;
-o-text-overflow:ellipsis;
overflow: hidden;
}
【13】css支持png在ie6中的透明
.cactus_login_before{width:430px;height:257px;background:url(../img/cactus_login_before.png) 0 0 no-repeat;_background:none; _filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src="img/cactus_login_before.png");} 自己改一下class名和图片的名称就可以了
或者
<!--解决IE 6不支持png格式的代码-->
<!--[if IE 6]>
<script src="js/DD_belatedPNG_0.0.8a.js?v=b4e86b02"></script>
<script> DD_belatedPNG.fix('.pngfix'); </script>
<![endif]-->
还有一个js
var DD_belatedPNG={ns:"DD_belatedPNG",imgSize:{},delay:10,nodesFixed:0,createVmlNameSpace:function(){if(document.namespaces&&!document.namespaces[this.ns]){document.namespaces.add(this.ns,"urn:schemas-microsoft-com:vml");}},createVmlStyleSheet:function(){var _1,_2;_1=document.createElement("style");_1.setAttribute("media","screen");document.documentElement.firstChild.insertBefore(_1,document.documentElement.firstChild.firstChild);if(_1.styleSheet){_1=_1.styleSheet;_1.addRule(this.ns+"\\:*","{behavior:url(#default#VML)}");_1.addRule(this.ns+"\\:shape","position:absolute;");_1.addRule("img."+this.ns+"_sizeFinder","behavior:none; border:none; position:absolute; z-index:-1; top:-10000px; visibility:hidden;");this.screenStyleSheet=_1;_2=document.createElement("style");_2.setAttribute("media","print");document.documentElement.firstChild.insertBefore(_2,document.documentElement.firstChild.firstChild);_2=_2.styleSheet;_2.addRule(this.ns+"\\:*","{display: none !important;}");_2.addRule("img."+this.ns+"_sizeFinder","{display: none !important;}");}},readPropertyChange:function(){var el,_4,v;el=event.srcElement;if(!el.vmlInitiated){return;}if(event.propertyName.search("background")!=-1||event.propertyName.search("border")!=-1){DD_belatedPNG.applyVML(el);}if(event.propertyName=="style.display"){_4=(el.currentStyle.display=="none")?"none":"block";for(v in el.vml){if(el.vml.hasOwnProperty(v)){el.vml[v].shape.style.display=_4;}}}if(event.propertyName.search("filter")!=-1){DD_belatedPNG.vmlOpacity(el);}},vmlOpacity:function(el){if(el.currentStyle.filter.search("lpha")!=-1){var _7=el.currentStyle.filter;_7=parseInt(_7.substring(_7.lastIndexOf("=")+1,_7.lastIndexOf(")")),10)/100;el.vml.color.shape.style.filter=el.currentStyle.filter;el.vml.image.fill.opacity=_7;}},handlePseudoHover:function(el){setTimeout(function(){DD_belatedPNG.applyVML(el);},1);},fix:function(_9){if(this.screenStyleSheet){var _a,i;_a=_9.split(",");for(i=0;i<_a.length;i++){this.screenStyleSheet.addRule(_a[i],"behavior:expression(DD_belatedPNG.fixPng(this))");}}},applyVML:function(el){el.runtimeStyle.cssText="";this.vmlFill(el);this.vmlOffsets(el);this.vmlOpacity(el);if(el.isImg){this.copyImageBorders(el);}},attachHandlers:function(el){var _e,_f,_10,_11,a,h;_e=this;_f={resize:"vmlOffsets",move:"vmlOffsets"};if(el.nodeName=="A"){_11={mouseleave:"handlePseudoHover",mouseenter:"handlePseudoHover",focus:"handlePseudoHover",blur:"handlePseudoHover"};for(a in _11){if(_11.hasOwnProperty(a)){_f[a]=_11[a];}}}for(h in _f){if(_f.hasOwnProperty(h)){_10=function(){_e[_f[h]](el);};el.attachEvent("on"+h,_10);}}el.attachEvent("onpropertychange",this.readPropertyChange);},giveLayout:function(el){el.style.zoom=1;if(el.currentStyle.position=="static"){el.style.position="relative";}},copyImageBorders:function(el){var _16,s;_16={"borderStyle":true,"borderWidth":true,"borderColor":true};for(s in _16){if(_16.hasOwnProperty(s)){el.vml.color.shape.style[s]=el.currentStyle[s];}}},vmlFill:function(el){if(!el.currentStyle){return;}else{var _19,_1a,lib,v,img,_1e;_19=el.currentStyle;}for(v in el.vml){if(el.vml.hasOwnProperty(v)){el.vml[v].shape.style.zIndex=_19.zIndex;}}el.runtimeStyle.backgroundColor="";el.runtimeStyle.backgroundImage="";_1a=true;if(_19.backgroundImage!="none"||el.isImg){if(!el.isImg){el.vmlBg=_19.backgroundImage;el.vmlBg=el.vmlBg.substr(5,el.vmlBg.lastIndexOf("\")")-5);}else{el.vmlBg=el.src;}lib=this;if(!lib.imgSize[el.vmlBg]){img=document.createElement("img");lib.imgSize[el.vmlBg]=img;img.className=lib.ns+"_sizeFinder";img.runtimeStyle.cssText="behavior:none; position:absolute; left:-10000px; top:-10000px; border:none; margin:0; padding:0;";_1e=function(){this.width=this.offsetWidth;this.height=this.offsetHeight;lib.vmlOffsets(el);};img.attachEvent("onload",_1e);img.src=el.vmlBg;img.removeAttribute("width");img.removeAttribute("height");document.body.insertBefore(img,document.body.firstChild);}el.vml.image.fill.src=el.vmlBg;_1a=false;}el.vml.image.fill.on=!_1a;el.vml.image.fill.color="none";el.vml.color.shape.style.backgroundColor=_19.backgroundColor;el.runtimeStyle.backgroundImage="none";el.runtimeStyle.backgroundColor="transparent";},vmlOffsets:function(el){var _20,_21,_22,_23,bg,bgR,dC,_27,b,c,v;_20=el.currentStyle;_21={"W":el.clientWidth+1,"H":el.clientHeight+1,"w":this.imgSize[el.vmlBg].width,"h":this.imgSize[el.vmlBg].height,"L":el.offsetLeft,"T":el.offsetTop,"bLW":el.clientLeft,"bTW":el.clientTop};_22=(_21.L+_21.bLW==1)?1:0;_23=function(vml,l,t,w,h,o){vml.coordsize=w+","+h;vml.coordorigin=o+","+o;vml.path="m0,0l"+w+",0l"+w+","+h+"l0,"+h+" xe";vml.style.width=w+"px";vml.style.height=h+"px";vml.style.left=l+"px";vml.style.top=t+"px";};_23(el.vml.color.shape,(_21.L+(el.isImg?0:_21.bLW)),(_21.T+(el.isImg?0:_21.bTW)),(_21.W-1),(_21.H-1),0);_23(el.vml.image.shape,(_21.L+_21.bLW),(_21.T+_21.bTW),(_21.W),(_21.H),1);bg={"X":0,"Y":0};if(el.isImg){bg.X=parseInt(_20.paddingLeft,10)+1;bg.Y=parseInt(_20.paddingTop,10)+1;}else{for(b in bg){if(bg.hasOwnProperty(b)){this.figurePercentage(bg,_21,b,_20["backgroundPosition"+b]);}}}el.vml.image.fill.position=(bg.X/_21.W)+","+(bg.Y/_21.H);bgR=_20.backgroundRepeat;dC={"T":1,"R":_21.W+_22,"B":_21.H,"L":1+_22};_27={"X":{"b1":"L","b2":"R","d":"W"},"Y":{"b1":"T","b2":"B","d":"H"}};if(bgR!="repeat"||el.isImg){c={"T":(bg.Y),"R":(bg.X+_21.w),"B":(bg.Y+_21.h),"L":(bg.X)};if(bgR.search("repeat-")!=-1){v=bgR.split("repeat-")[1].toUpperCase();c[_27[v].b1]=1;c[_27[v].b2]=_21[_27[v].d];}if(c.B>_21.H){c.B=_21.H;}el.vml.image.shape.style.clip="rect("+c.T+"px "+(c.R+_22)+"px "+c.B+"px "+(c.L+_22)+"px)";}else{el.vml.image.shape.style.clip="rect("+dC.T+"px "+dC.R+"px "+dC.B+"px "+dC.L+"px)";}},figurePercentage:function(bg,_32,_33,_34){var _35,_36;_36=true;_35=(_33=="X");switch(_34){case "left":case "top":bg[_33]=0;break;case "center":bg[_33]=0.5;break;case "right":case "bottom":bg[_33]=1;break;default:if(_34.search("%")!=-1){bg[_33]=parseInt(_34,10)/100;}else{_36=false;}}bg[_33]=Math.ceil(_36?((_32[_35?"W":"H"]*bg[_33])-(_32[_35?"w":"h"]*bg[_33])):parseInt(_34,10));if(bg[_33]%2===0){bg[_33]++;}return bg[_33];},fixPng:function(el){el.style.behavior="none";var lib,els,_3a,v,e;if(el.nodeName=="BODY"||el.nodeName=="TD"||el.nodeName=="TR"){return;}el.isImg=false;if(el.nodeName=="IMG"){if(el.src.toLowerCase().search(/\.png$/)!=-1){el.isImg=true;el.style.visibility="hidden";}else{return;}}else{if(el.currentStyle.backgroundImage.toLowerCase().search(".png")==-1){return;}}lib=DD_belatedPNG;el.vml={color:{},image:{}};els={shape:{},fill:{}};for(v in el.vml){if(el.vml.hasOwnProperty(v)){for(e in els){if(els.hasOwnProperty(e)){_3a=lib.ns+":"+e;el.vml[v][e]=document.createElement(_3a);}}el.vml[v].shape.stroked=false;el.vml[v].shape.appendChild(el.vml[v].fill);el.parentNode.insertBefore(el.vml[v].shape,el);}}el.vml.image.shape.fillcolor="none";el.vml.image.fill.type="tile";el.vml.color.fill.on=false;lib.attachHandlers(el);lib.giveLayout(el);lib.giveLayout(el.offsetParent);el.vmlInitiated=true;lib.applyVML(el);}};try{document.execCommand("BackgroundImageCache",false,true);}catch(r){}DD_belatedPNG.createVmlNameSpace();DD_belatedPNG.createVmlStyleSheet();
然后在你的图片那块加上 class=“pngfix” 然后就可以了
【13】怎么样才能让层显示在FLASH之上呢?
解决的办法是给FLASH设置透明:
<param name="wmode" value="transparent" />
【14】怎样使一个层垂直居中于浏览器中?
<style type="text/css">
<!--
div {
position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
width:200px;
height:200px;
border:1px solid red;
}
-->
</style>
这里使用百分比绝对定位，与外补丁负值的方法，负值的大小为其自身宽度高度除以二,margin可以以百分比的形式写
【15】firefox嵌套div标签的居中问题的解决方法
假定有如下情况：
<div id="a">
<div id="b"> </div>
</div>
如果要实现b在a中居中放置，一般只需用CSS设置a的text-align属性为center。这样的方法在IE里看起来一切正常；但是在Firefox中b却会是居左的。
解决办法就是设置b的横向margin为auto。例如设置b的CSS样式为：margin: 0 auto;。
【16】
li 元素中包含img 元素的时候，IE 中img 下面多出了5px左右的空白
A．使 li 浮动，并设置 img 为块级元素 B．设置 ul 的 font-size:0; C．设置 img 的 margin-bottom: -5px;
<!DOCTYPE html>
<html>
<head>
<title>16实例</title>
<style type="text/css" >
body,div,h1,p,ul{
margin:0;
padding:0;
}
ul{width: 500px; height: 300px; background: #aa7d44;font-size:0;}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="images/loading.gif" /></li>
<li><img src="images/loading.gif" /></li>
<li><img src="images/loading.gif" /></li>
</ul>
</div>
</body>
</html>
【17】IE6下为什么无法定义1px左右高度的容器?
答：IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：
overflow:hidden | zoom:0.08 | line-height:1px
【18】font缩写
font-style:italic;
font-variant:small-caps;
font-weight:bold; ?
font-size:1em; ?
line-height:140%;
font-family:"Lucida Grande",sans-serif;
可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
【19】列表(lists)
取消默认的圆点和序号可以这样写list-style:none;, list的属性如下:
list-style-type:square; list-style-position:inside; ?
list-style-image:url(image.gif);
可以缩写为一句：list-style:square inside url(image.gif);
【20】清除浮动
.clearfloat {clear:both;height:0;font-size: 1px;line-height: 0px;}
然后在页面中需要清除浮动的地方加入：
<br class="clearfloat" /><!-- 用于清除浮动的元素 -->
【21】注释
<!--[if IE]>
<![endif]-->
【22】hack
width:100px!important; /* 支持IE6,7,8,FF */
【22】CSS符号属性：
list-style-type:none; /*不编号*/
list-style-type:decimal; /*阿拉伯数字*/
list-style-type:lower-roman; /*小写罗马数字*/
list-style-type:upper-roman; /*大写罗马数字*/
list-style-type:lower-alpha; /*小写英文字母*/
list-style-type:upper-alpha; /*大写英文字母*/
list-style-type:disc; /*实心圆形符号*/
list-style-type:circle; /*空心圆形符号*/
list-style-type:square; /*实心方形符号*/
list-style-image:url(/dot.gif); /*图片式符号*/
list-style-position:outside; /*凸排*/
list-style-position:inside; /*缩进*/
CSS背景样式：
background-color:#F5E2EC; /*背景颜色*/
background:transparent; /*透视背景*/
background-image : url(/image/bg.gif); /*背景图片*/
background-attachment : fixed; /*浮水印固定背景*/
background-repeat : repeat; /*重复排列-网页默认*/
background-repeat : no-repeat; /*不重复排列*/
background-repeat : repeat-x; /*在x轴重复排列*/
background-repeat : repeat-y; /*在y轴重复排列*/
指定背景位置
background-position : 90% 90%; /*背景图片x与y轴的位置*/
background-position : top; /*向上对齐*/
background-position : buttom; /*向下对齐*/
background-position : left; /*向左对齐*/
background-position : right; /*向右对齐*/
background-position : center; /*居中对齐*/
CSS连接属性：
a /*所有超链接*/
a:link /*超链接文字格式*/
a:visited /*浏览过的链接文字格式*/
a:active /*按下链接的格式*/
a:hover /*鼠标转到链接*/
鼠标光标样式：
链接手指 CURSOR: hand
十字体 cursor:crosshair
箭头朝下 cursor:s-resize
十字箭头 cursor:move
箭头朝右 cursor:move
加一问号 cursor:help
箭头朝左 cursor:w-resize
箭头朝上 cursor:n-resize
箭头朝右上 cursor:ne-resize
箭头朝左上 cursor:nw-resize
文字I型 cursor:text
箭头斜右下 cursor:se-resize
箭头斜左下 cursor:sw-resize
漏斗 cursor:wait
光标图案(IE6) p
CSS框线一览表：
border-top : 1px solid #6699cc; /*上框线*/
border-bottom : 1px solid #6699cc; /*下框线*/
border-left : 1px solid #6699cc; /*左框线*/
border-right : 1px solid #6699cc; /*右框线*/
以上是建议书写方式,但也可以使用常规的方式 如下:
border-top-color : #369 /*设置上框线top颜色*/
border-top-width :1px /*设置上框线top宽度*/
border-top-style : solid/*设置上框线top样式*/
其他框线样式
solid /*实线框*/
dotted /*虚线框*/
double /*双线框*/
groove /*立体内凸框*/
ridge /*立体浮雕框*/
inset /*凹框*/
outset /*凸框*/
CSS表单运用：
文字方块
按钮
复选框
选择钮
多行文字方块
下拉式菜单 选项1选项2
CSS边界样式：
margin-top:10px; /*上边界*/
margin-right:10px; /*右边界值*/
margin-bottom:10px; /*下边界值*/
margin-left:10px; /*左边界值*/
CSS边框空白
padding-top:10px; /*上边框留空白*/
padding-right:10px; /*右边框留空白*/
padding-bottom:10px; /*下边框留空白*/
padding-left:10px; /*左边框留空白
CSS文字属性：
color : #999999; /*文字颜色*/
font-family : 宋体,sans-serif; /*文字字体*/
font-size : 9pt; /*文字大小*/
font-style:itelic; /*文字斜体*/
font-variant:small-caps; /*小字体*/
letter-spacing : 1pt; /*字间距离*/
line-height : 200%; /*设置行高*/
font-weight:bold; /*文字粗体*/
vertical-align:sub; /*下标字*/
vertical-align:super; /*上标字*/
text-decoration:line-through; /*加删除线*/
text-decoration:overline; /*加顶线*/
text-decoration:underline; /*加下划线*/
text-decoration:none; /*删除链接下划线*/
text-transform : capitalize; /*首字大写*/
text-transform : uppercase; /*英文大写*/
text-transform : lowercase; /*英文小写*/
text-align:right; /*文字右对齐*/
text-align:left; /*文字左对齐*/
text-align:center; /*文字居中对齐*/
text-align:justify; /*文字分散对齐*/
vertical-align属性
vertical-align:top; /*垂直向上对齐*/
vertical-align:bottom; /*垂直向下对齐*/
vertical-align:middle; /*垂直居中对齐*/
vertical-align:text-top; /*文字垂直向上对齐*/
vertical-align:text-bottom; /*文字垂直向下对齐*/
【23】fieldset，legend 组织表单
<!DOCTYPE HTML>
<html>
<body>
<form>
<fieldset>
<legend>健康信息</legend>
身高：<input type="text" />
体重：<input type="text" />
</fieldset>
</form>
<p>如果表单周围没有边框，说明您的浏览器太老了。</p>
</body>
</html>
【24】模块命名
模块名
尽量让人看到名字就能知道是什么模块，比如 ui-tab， ui-nav 这样的命名。（反例：ui-shit） 用 HTML ENTRY 来引用，不要写空标签，应使用 HTML ENTRY 来替代，以达到语义化的要求。 HTML ENTRY 请参考这个文档：https://docs.google.com/Doc?docid=0AWiI12yCmwaoZGNiemJqOGpfMTVmaHZtOWNkeg
模块整体状态 = 模块名 + 状态
常用状态有：hover, current, selected, disabled, focus, blur, checked, success, error 等。通常你的命名应该看起来像 .ui-name-hover, .ui-name-error 这样。
子模块 = 模块名 + 子模块名
常用模块名有：cnt(content)，hd(header)，text(txt)，img(images/pic)，title，item，cell 等， 只要词义表达了组件要实现的功能或者要表现出来的的外观就可以了。
子模块状态 = 模块名 + 子模块名 + 状态
参照常用状态。
【25】white-space: nowrap;
white-space 属性设置如何处理元素内的空白。
这个属性声明建立布局过程中如何处理元素中的空白符
【26】三个 CSS 预处理器（框架）：Sass、LESS 和 Stylus
CSS 预处理器技术已经非常的成熟，而且也涌现出了越来越多的 CSS 的预处理器框架。本文向你介绍使用最为普遍的三款 CSS 预处理器框架，分别是 Sass、Less CSS、Stylus。
首先我们来简单介绍下什么是 CSS 预处理器，CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处。
【27】CSS 框架是一系列 CSS 文件的集合体，包含了基本的元素重置，页面排版、网格布局、表单样式、通用规则等代码块,用于简化web前端开发的工作，提高工作效率
常用css框架编辑
960gs
960 像素的页面宽度似乎成为了一种设计标准，在当前各种分辨率下，能够很好地展现网页内容。提供较为常用的尺寸来简化网页设计过程，使工作简单高效。
YUI 2: Grids CSS
芒果曾经介绍过由雅虎开发小组推出的 YUI，而这个 YUI Grids CSS 正是其中的一部分。作为最著名的 CSS 框架之一，YUI Grids CSS 提供了四种预设页面宽度，六种预设模板。其中的负 Margin 技术，使用度量单位 em，清除布局浮动等技术非常值得学习和借鉴。
渴切-开源中文css框架
渴切(Cutter.css)是一个开源中文 (X)HTML/CSS 框架 ,它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目,能够用于网站的快速设计,通过重设和重建浏览器标准，可以让每个网站防 止枯燥的跨浏览器兼容性测试。你可以将他理解成一套模板，里面包含了大多数站点中所需要的那些css类。他很小，只有四个文件而已。总共不到6KB。
Blueprint
Blueprint 是一款成熟的 CSS 框架，它将布局(layout)、排版(typography)、组件 (widget)、重置 (reset)、打印 (print) 等分放到不同的 CSS 文件中。在网页设计时就减少了引入的代码，提高了页面加载效率。
BlueTrip
BlueTrip 是一个集成了BluePrint & Tripoli 框架的做好的部分；Hartija 的打印样式； 960gs的简洁；Elements 图标的一个css框架。为你提供一个好用的样式集合和一个制作网站的通用的方法。这样你就可以集中精力搞设计了。
Bootstrap
Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。它是一款简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。其自带的js以及css可以完成绝大多数常用的网页特效与响应功能，是一款不错的框架。
Elastic CSS
Elastic 是一个简单的 CSS 框架用来对网页进行布局。Elastic 可实现各种各样常见的网页布局。
Easy
市面上流行的JQUERY组件功能都被纳入其框架中，你只要直接使用这个框架，不用学习复杂的AJAX JQuery语法，非常方便。
EZ-CSS
EZ-CSS是一个轻量级，浏览器友好，易于使用的CSS框架。用于创建CSS+Div的页面复杂布局（layouts）。
Tripoli
Tripoli是一个用于HTML表现的通用css规范。通过重设和重建浏览器标准，Tripoli 为你的网站项目提供了一个标准的、跨浏览器表现的基础。
CleverCSS
CleverCSS 是一个用于css的受Python启发的小型的标记语言，它可用于以整洁的和结构化的方式创建一个样式表。在很多方面它都比CSS2整洁和强大。与CSS最明显的区别是句法：它基于缩进而且不单调。虽然这显然违反了Python的规则，它依然是组织样式的很好的主意。
SenCSS
它为你CSS重复的部分提供了合理的样式，这样你就能更加关注于自己网站的样式。SenCSs不像其他CSS框架那样，它不包含各种杂乱的布局样式或是预定义的栅格系统，那SenCSs能刚什么呢？baseline, fonts, paddings, margins, tables, lists, headers, blockquotes, forms 等等都是SenCSs所能办到的。
【27】重置样式表
1\
@charset "utf-8";
/* 使用重置样式表 */
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, u, i, center, 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-size:100%;
vertical-align:baseline;
background:transparent;
}
body{
line-height:1;
}
ol,ul{
list-style:none;
}
blockquote, q{
quotes:none;
}
blockquote:before, blockquote:after, q:before, q:after{
content: '';
content:none;
}
/* remeber to define focus styles! */
:focus{
outline:0;
}
/* remeber to highlight inserts somehow */
ins{
text-decoration:none;
}
del{
text-decoration:line-through;
}
/* tables still need 'cellspacing="0" in the markup' */
table{
border-collapse:collapse;
border-spacing:0;
}
、
2\@charset "utf-8";
/*
@名称: base
@功能: 重设浏览器默认样式
*/
/* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
html{
color:#000;background:#fff;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* 内外边距通常让各个浏览器样式的表现位置不同 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
margin:0;padding:0;
}
/* 重设 HTML5 标签, IE 需要在 js 中 createElement(TAG) */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display:block;
}
/* HTML5 媒体文件跟 img 保持一致 */
audio,canvas,video {
display: inline-block;*display: inline;*zoom: 1;
}
/* 要注意表单元素并不继承父级 font 的问题 */
body,button,input,select,textarea{
font:12px/1.5 tahoma,arial,\5b8b\4f53;
}
input,select,textarea{
font-size:100%;
}
/* 去掉各Table cell 的边距并让其边重合 */
table{
border-collapse:collapse;border-spacing:0;
}
/* IE bug fixed: th 不继承 text-align*/
th{
text-align:inherit;
}
/* 去除默认边框 */
fieldset,img{
border:0;
}
/* ie6 7 8(q) bug 显示为行内表现 */
iframe{
display:block;
}
/* 去掉 firefox 下此元素的边框 */
abbr,acronym{
border:0;font-variant:normal;
}
/* 一致的 del 样式 */
del {
text-decoration:line-through;
}
address,caption,cite,code,dfn,em,th,var {
font-style:normal;
font-weight:500;
}
/* 去掉列表前的标识, li 会继承 */
ol,ul {
list-style:none;
}
/* 对齐是排版最重要的因素, 别让什么都居中 */
caption,th {
text-align:left;
}
/* 来自yahoo, 让标题都自定义, 适应多个系统应用 */
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:500;
}
q:before,q:after {
content:'';
}
/* 统一上标和下标 */
sub, sup {
font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;
}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
/* 让链接在 hover 状态下显示下划线 */
a:hover {
text-decoration:underline;
}
/* 默认不显示下划线，保持页面简洁 */
ins,a {
text-decoration:none;
}
/* 清理浮动 */
.fn-clear:after {
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.fn-clear {
zoom:1; /* for IE6 IE7 */
}
/* 隐藏, 通常用来与 JS 配合 */
body .fn-hide {
display:none;
}
/* 设置内联, 减少浮动带来的bug */
.fn-left,.fn-right {
display:inline;
}
.fn-left {
float:left;
}
.fn-right {
float:right;
}
【28】css双飞翼布局
今天，在一个论坛中无意看到了一同胞的回复，称楼主的三列布局为“双飞燕”布局，一开始很诧异，寻思了半天，真有这种布局么？不解与疑惑中，于是便去请教了度娘。然而，在百度中的解释多数是关于下棋一方面的技术与技巧，我更疑惑了。。。
专业术语并非“无中生有”，既然有这个说法，我想必定会有他的来源与出处。于是，感觉告诉我要继续。查看众多资料，总算是皇天不负有心人，终于找到了关于布局“双飞燕”的这么个说法。我晕，其实真正的术语并不叫“双飞燕”，而是“双飞翼”，估计是那哥们回帖的时候还在做梦吧……呵呵
开头侃了半天，现在咱言归正传吧！
双飞翼布局是一种比较灵活的布局，始于淘宝UED，玉伯提出的，当然他着重介绍的是双飞翼栅格布局。
本文着重讲解常用三栏布局。通俗一点讲，可以把三栏比作一只鸟，main部分相当是于鸟的身体，而left与right就是鸟的“翼”了，鸟想要平衡地飞翔就要把主体位置给摆正确，然后在“翼”的作用下开始起飞。布局也是一样的，我们也要先把主体给摆好，然后再合理地调整双翼，这样整体动作才会比较和谐。
先看一下常规效果：
为了快速加载主体内容，我们在布局时候可以把最重要的放在最前面。比如：
<div class="wrap">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
实现要求：主间部分内容的宽度是要自适应的，左、右两边宽度分别为20%，30%
首先呢，我们需要把这三列都浮动起来，即：
.main,.left,.right { float:left; height:200px; }
说明：这里的高度是我自己设置的，在实际布局中可以根据需要来定，他们可以任意设置自己的高度。
主体main的宽度要自适应，那么可以先设置为100%，然后随便上个背景色与”翼“做区分
.main { width:100%; background:#ace; }
接下来便是”翼“的设置了
左边：
.left { width:20%; background:#eee; }
右边：
.right { width:30%; background:#ddd; }
基本样式已设置完成，但预览页面你会发现并没有达到预期的效果。。。
那么接下来，我们应该怎么做呢？
大家可以回想一下margin的用法，对于其负值有很奇妙的用法（这里不多做说明，文章最后我会推荐一些相关文章，感兴趣的童鞋可以看看），而在这里，关键也是运用margin负值才得以实现效果。
回到题目中，想要left居左，那么我们可以设置 margin-left:-100%; 即：
.left { width:20%; background:#eee; margin-left:-100%; }
说明：这里的100%为main的宽度，相当于是把left给左移了，刚好实现左边与main的对齐。
对于right居右问题，也是类似可以设置margin-left:30%; 即：
.right { width:30%; background:#ddd; margin-left:-30%; }
说明：这里的30%为right自身的宽度，相当于是自己向左移了自身的一个宽度，刚好实现右边与main的对齐。
这时，整个布局看起来像是完成了，其实还剩关键的一步，即main的位置该如何设置？目前，他的左边及右边部分元素是会被left/right挡住的，所以我们还必须在main里面再添加一个div(class="mainIn")，设置margin:0 30% 0 20%;，把两边内容给挤开，这样才是完美的效果。
延伸：对于这种方法，同时也可以随便调换他们的位置，你只需要控制他们的位移即可，都是成功的，这点大家可以做个尝试。
大致思路是这样的，本文就介绍到这里了。关于本文的参考资料及margin负值的更多用法，可以参考：
http://ued.taobao.com/blog/2008/11/05/grid_system_research_4/
http://hi.baidu.com/pop123shen/item/2929385d4d4f663594eb053b
http://hi.baidu.com/zhangqian04062/item/122731cfee19d802c610b239
http://hi.baidu.com/zhangqian04062/item/87895480c829e2e0e596e03c
【29】缩写写法
background-position:0 0; background-repeat:no-repeat; background-attachment:fixed; background-color:#f00;
background-image:url(background.gif);
Background:#foo url(background.gif) no-repeat fixed 0 0 c)
font-style:italic;
font-family:"Lucida Grande",sans-serif; font-size:1em; font-weight:bold; font-variant:small-caps; line-height:140%;
Font:italic small-caps bold 1em/140% “Lucida Grande“，sans-serif
list-style-position:inside;
list-style-type:square;
list-style-image:url(image.gif);
List-style:square inside url(image.gif)