前端開發(fā)、web設計等涉及HTML+css兼容、常見問題

工作總結【1】border-stylesolid實線dashed虛線dotted點線（IE6不兼容）【2】areashape<imgsrc=合并后的圖片>

<mapname=”map1”>

<areashape=”rect”coords=”0,0,40,40”href=”用戶跳轉頁面URL”>

<areashape=”rect”coords=”50,0,90,40”href=”購物車跳轉頁URL”>

</map>【3】css表達式/andyyukun/article/details/1676963【4】圓角瀏覽器支持IE9+、Firefox4+、Chrome、Safari5+以及Opera支持border-radius屬性。-webkit-border-radius:100px;

-moz-border-radius:100px;

border-radius:100px;【5】font-family:"iconfont"圖標字體（iconfont），是一種把圖標放入自定義字體中，然后使用字體來替代顯示普通圖標的技術。/2013/03/use-iconfon/【6】html術語【7】cursor:pointer;【8】letter-spacing:-.02em;【9】CSS3邊框圖片通過CSS3的border-image屬性，您可以使用圖片來創(chuàng)建邊框【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中內(nèi)容超過長度后以省略號顯示的方法

此方法適用與IE與OP瀏覽器

<styletype="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)00no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale,src="img/cactus_login_before.png");}自己改一下class名和圖片的名稱就可以了或者<!--解決IE6不支持png格式的代碼-->

<!--[ifIE6]>

<scriptsrc="js/DD_belatedPNG_0.0.8a.js?v=b4e86b02"></script>

<script>DD_belatedPNG.fix('.pngfix');</script>

<![endif]-->

還有一個js

varDD_belatedPNG={ns:"DD_belatedPNG",imgSize:{},delay:10,nodesFixed:0,createVmlNameSpace:function(){if(spaces&&!spaces[this.ns]){spaces.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(){varel,_4,v;el=event.srcElement;if(!el.vmlInitiated){return;}if(pertyName.search("background")!=-1||pertyName.search("border")!=-1){DD_belatedPNG.applyVML(el);}if(pertyName=="style.display"){_4=(el.currentStyle.display=="none")?"none":"block";for(vinel.vml){if(el.vml.hasOwnProperty(v)){el.vml[v].shape.style.display=_4;}}}if(pertyName.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(ain_11){if(_11.hasOwnProperty(a)){_f[a]=_11[a];}}}for(hin_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(sin_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(vinel.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(binbg){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]++;}returnbg[_33];},fixPng:function(el){el.style.behavior="none";varlib,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(vinel.vml){if(el.vml.hasOwnProperty(v)){for(einels){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設置透明:<paramname="wmode"value="transparent"/>【14】怎樣使一個層垂直居中于瀏覽器中?<styletype="text/css"><!--div{position:absolute;top:50%;left:50%;margin:-100px00-100px;width:200px;height:200px;border:1pxsolidred;}--></style>這里使用百分比絕對定位，與外補丁負值的方法，負值的大小為其自身寬度高度除以二,margin可以以百分比的形式寫【15】firefox嵌套div標簽的居中問題的解決方法假定有如下情況：<divid="a"><divid="b"></div></div>如果要實現(xiàn)b在a中居中放置，一般只需用CSS設置a的text-align屬性為center。這樣的方法在IE里看起來一切正常；但是在Firefox中b卻會是居左的。解決辦法就是設置b的橫向margin為auto。例如設置b的CSS樣式為：margin:0auto;?！?6】li

元素中包含img

元素的時候，IE

中img

下面多出了5px左右的空白A．使

li

浮動，并設置

img

為塊級元素

B．設置

ul

的

font-size:0;

C．設置

img

的

margin-bottom:

-5px;<!DOCTYPEhtml><html><head><title>16實例</title><styletype="text/css">body,div,h1,p,ul{margin:0;padding:0;}ul{width:500px;height:300px;background:#aa7d44;font-size:0;}</style></head><body><divclass="box"><ul><li><imgsrc="images/loading.gif"/></li><li><imgsrc="images/loading.gif"/></li><li><imgsrc="images/loading.gif"/></li></ul></div></body></html>【17】IE61px左右高度的容器?答：IE6列表(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);清除浮動.clearfloat

{clear:both;height:0;font-size:

1px;line-height:

0px;}

然后在頁面中需要清除浮動的地方加入：

<br

class="clearfloat"

/><!--

用于清除浮動的元素

-->

<!--[if

IE]><![endif]-->【22】hackwidth:100px!important;/*支持IE6,7,8,FF*/【22】CSS符號屬性：

list-style-type:none;/*不編號*/

list-style-type:decimal;/*阿拉伯數(shù)字*/

list-style-type:lower-roman;/*小寫羅馬數(shù)字*/

list-style-type:upper-roman;/*大寫羅馬數(shù)字*/

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;/*重復排列-網(wǎng)頁默認*/

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:1pxsolid#6699cc;/*上框線*/

border-bottom:1pxsolid#6699cc;/*下框線*/

border-left:1pxsolid#6699cc;/*左框線*/

border-right:1pxsolid#6699cc;/*右框線*/

以上是建議書寫方式,但也可以使用常規(guī)的方式如下:

border-top-color:#369/*設置上框線top顏色*/

border-top-width:1px/*設置上框線top寬度*/

border-top-style:solid/*設置上框線top樣式*/

其他框線樣式

solid/*實線框*/

dotted/*虛線框*/

double/*雙線框*/

groove/*立體內(nèi)凸框*/

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組織表單<!DOCTYPEHTML><html><body><form><fieldset><legend>健康信息</legend>身高：<inputtype="text"/>體重：<inputtype="text"/></fieldset></form><p>如果表單周圍沒有邊框，說明您的瀏覽器太老了。</p></body></html>【24】模塊命名模塊名盡量讓人看到名字就能知道是什么模塊，比如ui-tab，ui-nav這樣的命名。（反例：ui-shit）用HTMLENTRY來引用，不要寫空標簽，應使用HTMLENTRY來替代，以達到語義化的要求。HTMLENTRY請參考這個文檔：/Doc?docid=0AWiI12yCmwaoZGNiemJqOGpfMTVmaHZtOWNkeg模塊整體狀態(tài)=模塊名+狀態(tài)常用狀態(tài)有：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等，只要詞義表達了組件要實現(xiàn)的功能或者要表現(xiàn)出來的的外觀就可以了。子模塊狀態(tài)=模塊名+子模塊名+狀態(tài)參照常用狀態(tài)?！?5】white-space:nowrap;white-space屬性設置如何處理元素內(nèi)的空白。這個屬性聲明建立布局過程中如何處理元素中的空白符normal默認?？瞻讜粸g覽器忽略。pre空白會被瀏覽器保留。其行為方式類似HTML中的<pre>標簽。nowrap文本不會換行，文本會在在同一行上繼續(xù)，直到遇到<br>標簽為止。pre-wrap保留空白符序列，但是正常地進行換行。pre-line合并空白符序列，但是保留換行符。inherit規(guī)定應該從父元素繼承white-space屬性的值。【26】三個CSS預處理器（框架）：Sass、LESS和StylusCSS預處理器技術已經(jīng)非常的成熟，而且也涌現(xiàn)出了越來越多的CSS的預處理器框架。本文向你介紹使用最為普遍的三款CSS預處理器框架，分別是Sass、LessCSS、Stylus。首先我們來簡單介紹下什么是CSS預處理器，CSS預處理器是一種語言用來為CSS增加一些編程的的特性，無需考慮瀏覽器的兼容性問題，例如你可以在CSS中使用變量、簡單的程序邏輯、函數(shù)等等在編程語言中的一些基本技巧，可以讓你的CSS更見簡潔，適應性更強，代碼更直觀等諸多好處?！?7】CSS框架是一系列CSS文件的集合體，包含了基本的元素重置，頁面排版、網(wǎng)格布局、表單樣式、通用規(guī)則等代碼塊,用于簡化web前端開發(fā)的工作，提高工作效率常用css框架編輯960gs960像素的頁面寬度似乎成為了一種設計標準，在當前各種分辨率下，能夠很好地展現(xiàn)網(wǎng)頁內(nèi)容。提供較為常用的尺寸來簡化網(wǎng)頁設計過程，使工作簡單高效。YUI2:GridsCSS芒果曾經(jīng)介紹過由雅虎開發(fā)小組推出的YUI，而這個YUIGridsCSS正是其中的一部分。作為最著名的CSS框架之一，YUIGridsCSS提供了四種預設頁面寬度，六種預設模板。其中的負Margin技術，使用度量單位em，清除布局浮動等技術非常值得學習和借鑒。渴切-開源中文css框架渴切(Cutter.css)是一個開源中文(X)HTML/CSS框架,它的目的是減少你的css開發(fā)時間。它提供一個可靠的css基礎去創(chuàng)建你的項目,能夠用于網(wǎng)站的快速設計,通過重設和重建瀏覽器標準，可以讓每個網(wǎng)站防止枯燥的跨瀏覽器兼容性測試。你可以將他理解成一套模板，里面包含了大多數(shù)站點中所需要的那些css類。他很小，只有四個文件而已?？偣膊坏?KB。BlueprintBlueprint是一款成熟的CSS框架，它將布局(layout)、排版(typography)、組件(widget)、重置(reset)、打印(print)等分放到不同的CSS文件中。在網(wǎng)頁設計時就減少了引入的代碼，提高了頁面加載效率。BlueTripBlueTrip是一個集成了BluePrint&Tripoli框架的做好的部分；Hartija的打印樣式；960gs的簡潔；Elements圖標的一個css框架。為你提供一個好用的樣式集合和一個制作網(wǎng)站的通用的方法。這樣你就可以集中精力搞設計了。BootstrapBootstrap是Twitter推出的一個用于前端開發(fā)的開源工具包。它由Twitter的設計師MarkOtto和JacobThornton合作開發(fā)，是一個CSS/HTML框架。它是一款簡潔、直觀、強悍的前端開發(fā)框架，讓web開發(fā)更迅速、簡單。其自帶的js以及css可以完成絕大多數(shù)常用的網(wǎng)頁特效與響應功能，是一款不錯的框架。ElasticCSSElastic是一個簡單的CSS框架用來對網(wǎng)頁進行布局。Elastic可實現(xiàn)各種各樣常見的網(wǎng)頁布局。Easy市面上流行的JQUERY組件功能都被納入其框架中，你只要直接使用這個框架，不用學習復雜的AJAXJQuery語法，非常方便。EZ-CSSEZ-CSS是一個輕量級，瀏覽器友好，易于使用的CSS框架。用于創(chuàng)建CSS+Div的頁面復雜布局（layouts）。TripoliTripoli是一個用于HTML表現(xiàn)的通用css規(guī)范。通過重設和重建瀏覽器標準，Tripoli為你的網(wǎng)站項目提供了一個標準的、跨瀏覽器表現(xiàn)的基礎。CleverCSSCleverCSS是一個用于css的受Python啟發(fā)的小型的標記語言，它可用于以整潔的和結構化的方式創(chuàng)建一個樣式表。在很多方面它都比CSS2整潔和強大。與CSS最明顯的區(qū)別是句法：它基于縮進而且不單調。雖然這顯然違反了Python的規(guī)則，它依然是組織樣式的很好的主意。SenCSS它為你CSS重復的部分提供了合理的樣式，這樣你就能更加關注于自己網(wǎng)站的樣式。SenCSs不像其他CSS框架那樣，它不包含各種雜亂的布局樣式或是預定義的柵格系統(tǒng)，那SenCSs能剛什么呢？baseline,fonts,paddings,margins,tables,lists,headers,blockquotes,forms等等都是SenCSs所能辦到的?！?7】重置樣式表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;}/*remebertodefinefocusstyles!*/:focus{outline:0;}/*remebertohighlightinsertssomehow*/ins{text-decoration:none;}del{text-decoration:line-through;}/*tablesstillneed'cellspacing="0"inthemarkup'*/table{border-collapse:collapse;border-spacing:0;}、2\@charset"utf-8";/*@名稱:base@功能:重設瀏覽器默認樣式*//*防止用戶自定義背景顏色對網(wǎng)頁的影響，添加讓用戶可以自定義字體*/html{color:#000;background:#fff;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}/*內(nèi)外邊距通常讓各個瀏覽器樣式的表現(xiàn)位置不同*/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.5tahoma,arial,\5b8b\4f53;}input,select,textarea{font-size:100%;}/*去掉各Tablecell的邊距并讓其邊重合*/table{border-collapse:collapse;border-spacing:0;}/*IEbugfixed:th不繼承text-align*/th{text-align:inherit;}/*去除默認邊框*/fieldset,img{border:0;}/*ie678(q)bug顯示為行內(nèi)表現(xiàn)*/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,讓標題都自定義,適應多個系統(tǒng)應用*/h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500;}q:before,q:after{content:'';}/*統(tǒng)一上標和下標*/sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}/*讓鏈接在hover狀態(tài)下顯示下劃線*/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;/*forIE6IE7*/}/*隱藏,通常用來與JS配合*/body.fn-hide{display:none;}/*設置內(nèi)聯(lián),減少浮動帶來的bug*/.fn-left,.fn-right{display:inline;}.fn-left{float:left;}.fn-right{float:right;}【28】css雙飛翼布局今天，在一個論壇中無意看到了一同胞的回復，稱樓主的三列布局為“雙飛燕”布局，一開始很詫異，尋思了半天，真有這種布局么？不解與疑惑中，于是便去請教了度娘。然而，在百度中的解釋多數(shù)是關于下棋一方面的技術與技巧，我更疑惑了。。。專業(yè)術語并非“無中生有”，既然有這個說法，我想必定會有他的來源與出處。于是，感覺告訴我要繼續(xù)。查看眾多資料，總算是皇天不負有心人，終于找到了關于布局“雙飛燕”的這么個說法。我暈