一、Css書寫順序：
創(chuàng)新互聯(lián)建站自2013年創(chuàng)立以來(lái)，先為且末等服務(wù)建站，且末等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為且末企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。
1.位置屬性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
二、Css語(yǔ)法：
命名一般為小寫英文字母。
為了代碼的易讀性，在每個(gè)聲明塊的左花括號(hào)前添加一個(gè)空格。
每條聲明語(yǔ)句的?:?后應(yīng)該插入一個(gè)空格。
所有聲明語(yǔ)句都應(yīng)當(dāng)以分號(hào)結(jié)尾。最后一條聲明語(yǔ)句后面的分號(hào)是可選的，但是，如果省略這個(gè)分號(hào)，你的代碼可能更易出錯(cuò)。
對(duì)于屬性值或顏色參數(shù)，省略小于 1 的小數(shù)前面的 0 （例如，.5?代替?0.5；-.5px?代替?-0.5px）。
十六進(jìn)制值應(yīng)該全部小寫，例如，#fff。
盡量使用簡(jiǎn)寫形式的十六進(jìn)制值，例如，用?#fff?代替?#ffffff。
避免為 0 值指定單位，例如，用?margin: 0;?代替?margin: 0px;。
Css常用的一些命名：
可參考：CSS 常用命名 - 彼岸時(shí)光 - 博客園。
三、Css的引入：
Css的引入一般有兩種，link和@import,一般建議使用link引入。這樣可以避免考慮@import的語(yǔ)法規(guī)則和注意事項(xiàng)，避免產(chǎn)生資源文件下載順序混亂和http請(qǐng)求過(guò)多的煩惱。
四、Css的命名規(guī)范(BEM,OOCSS)：
什么是BEM：BEM的意思就是塊（block）、元素（element）、修飾符（modifier）,是由Yandex團(tuán)隊(duì)提出的一種前端命名方法論。這種巧妙的命名方法讓你的CSS類對(duì)其他開(kāi)發(fā)者來(lái)說(shuō)更加透明而且更有意義。
命名約定如下：
.block{} // 塊即是通常所說(shuō)的 Web 應(yīng)用開(kāi)發(fā)中的組件或模塊。每個(gè)塊在邏輯上和功能上都是相互獨(dú)立的。
.block__element{} // 元素是塊中的組成部分。元素不能離開(kāi)塊來(lái)使用。BEM 不推薦在元素中嵌套其他元素。
.block--modifier{} // 修飾符用來(lái)定義塊或元素的外觀和行為。同樣的塊在應(yīng)用不同的修飾符之后，會(huì)有不同的外觀。
優(yōu)點(diǎn)：
BEM 的優(yōu)點(diǎn)在于所產(chǎn)生的 CSS 類名都只使用一個(gè)類別選擇器，可以避免傳統(tǒng)做法中由于多個(gè)類別選擇器嵌套帶來(lái)的復(fù)雜的屬性級(jí)聯(lián)問(wèn)題。在 BEM 命名規(guī)則中，所有的 CSS 樣式規(guī)則都只用一個(gè)類別選擇器。因此所有樣式規(guī)則的特異性（specificity）都是相同的，也就不存在復(fù)雜的優(yōu)先級(jí)問(wèn)題。這可以簡(jiǎn)化屬性值的層疊規(guī)則。代碼清單中的命名規(guī)則的好處在于每個(gè) CSS 類名都很簡(jiǎn)單明了，而且類名的層次關(guān)系可以與 DOM 節(jié)點(diǎn)的樹(shù)型結(jié)構(gòu)相對(duì)應(yīng)。
缺點(diǎn)：
這樣類名過(guò)于長(zhǎng)，且復(fù)雜。
什么是OOCSS（面向?qū)ο驝SS）：
OOCSS 表示的是面向?qū)ο?CSS（Object Oriented CSS），是一種把面向?qū)ο蠓椒▽W(xué)應(yīng)用到 CSS 代碼組織和管理中的實(shí)踐。 OOCSS最關(guān)鍵的一點(diǎn)就是：提高他的靈活性和可重用性。這個(gè)也是OOCSS最重要的一點(diǎn)。OOCSS主張是通過(guò)在基礎(chǔ)組件中添加更多的類，從而擴(kuò)展基礎(chǔ)組件的CSS規(guī)則，從而使CSS有更好的擴(kuò)展性。
OOCSS的優(yōu)點(diǎn)：
減少CSS代碼。
具有清潔的HTML標(biāo)記，有語(yǔ)義的類名，邏輯性強(qiáng)的層次關(guān)系。
語(yǔ)義標(biāo)記，有助于SEO。
更好的頁(yè)面優(yōu)化，更快的加載時(shí)間（因?yàn)橛泻芏嘟M件重用）。
可擴(kuò)展的標(biāo)記和CSS樣式，有更多的組件可以放到庫(kù)中，而不影響其他的組件。
能輕松構(gòu)造新的頁(yè)面布局，或制作新的頁(yè)面風(fēng)格。
OOCSS的缺點(diǎn)：
OOCSS適合真正的大型網(wǎng)站開(kāi)發(fā)，因?yàn)榇笮途W(wǎng)站用到的可重用性組件特別的多，如果運(yùn)用在小型項(xiàng)目中可能見(jiàn)不到什么成效。所以用不用OOCSS應(yīng)該根據(jù)你的項(xiàng)目來(lái)決定。如果沒(méi)用巧妙的使用，創(chuàng)建組件可能對(duì)于你來(lái)說(shuō)是一堆沒(méi)用的東西，成為一爛攤子，給你的維護(hù)帶來(lái)意想不到的杯具，說(shuō)不定還是個(gè)維護(hù)的噩夢(mèng)。
歡迎到優(yōu)就業(yè)來(lái)了解
1. 標(biāo)簽名選擇器 div { color：Red;} 即頁(yè)面中的各個(gè)標(biāo)簽名的css樣式
2.類選擇器 .divClass {color:Red;} 即定義的每個(gè)標(biāo)簽的class 中的css樣式
3.ID選擇器 #myDiv {color:Red;} 即頁(yè)面中的標(biāo)簽的id
4.后代選擇器（類選擇器的后代選擇器） .divClass span { color:Red;} 即多個(gè)選擇器以逗號(hào)的格式分隔 命名找到準(zhǔn)確的標(biāo)簽
DIV+CSS規(guī)則整理
一、善用css縮寫規(guī)則
/*注意上、右、下、左的書寫順序*/
1. 關(guān)于邊距（4邊）：
1px 2px 3px 4px (上、右、下、左)
1px 2px 3px （省略的左等于右）
1px 2px (省略的上等于下)
1px （四邊都相同）
2. 簡(jiǎn)化所有：
*/ body{margin:0}------------表示網(wǎng)頁(yè)內(nèi)所有元素的margin為0
#menu{ margin:0}------------表示menu盒子下的所有元素的margin為0
3. 縮寫（border）特定樣式：
Border:1px solid #ffffff;
Border-width:0 1px 2px 3px;
4. 關(guān)于文字的縮寫規(guī)則：
Font-style:italic; 斜體形式
Font-variant:small-caps/normal; 變體樣式：小型大寫字母/正常
Font-weight:bold;
Font-size:12px;
Line-height:1.2em(120%)/1.5em(150%);
Font-family:arrial,sans-serif,verdana;
縮寫成：
Font:italic small-caps bold 12px/1.5emarrial,sans-serif;
注意：Font-size和Line-height用斜杠組合在一起不能分開(kāi)寫。
5. 關(guān)于背景圖片的：
Background:#FFF url(log.gif) no-repeatfixed top left;
6. 關(guān)于列表：
List-style-type:square/none;
List-style-position:inside;
List-style-image:url(filename.gif);
縮寫成：
List-style:none inside url(filename.gif)
二、運(yùn)用4種方法來(lái)引入CSS樣式
1.link
link rel=”stylesheet” type=”text/css”href=”a.css”
rel 關(guān)系
type 數(shù)據(jù)類型,有多種
href 路徑
部分瀏覽器支持候選樣式,關(guān)鍵字:alternate:
link rel=”stylesheet” type=”text/css”href=”a.css”
link rel=”alternate stylesheet”type=”text/css” href=”b.css”
link rel=”alternate stylesheet”type=”text/css” href=”c.css”
2.內(nèi)部樣式塊
style
!–
h1{color:red;}
–
/style
3.@import
@import url{a.css}
注意:此指令必須放在style容器中,并且在所有樣式之前
建議放在一個(gè)html注釋中,!– –瀏覽器會(huì)不顯示注釋內(nèi)的內(nèi)容,而import等css代碼能正常工作
4.內(nèi)聯(lián)樣式
p style=”color:red;”
選擇器是css的一個(gè)基本概念，基本規(guī)則如下：
1.規(guī)則結(jié)構(gòu)：
h1 {color:red;}
選擇器 {屬性:值;}
這類是元素選擇器，基本可以包括所有html的元素
屬性值可以包括多個(gè)元素，如：border：1px solid red;
常用語(yǔ)法
1)分組：
選擇器和聲明都可以分組:
h1,h2,h3{color:red;background:#fff;} ,選擇器用“,”分割開(kāi),屬性用”;”分割
2)類選擇器,即通過(guò)class=”stylename”應(yīng)用的聲明
定義:
.stylename{color:red;}
注意:
在html中可以使用多類選擇:如class=”cn1 cn2 cn3″
3)ID選擇器,即與id屬性對(duì)應(yīng)的樣式
定義:
#a{color:red;} -這個(gè)定義對(duì)用id=”a”的元素
2.這部分都是我們常見(jiàn)的css語(yǔ)法，下面談一下我們不常見(jiàn)的選擇器語(yǔ)法
1)父子結(jié)構(gòu),跟文檔結(jié)構(gòu)圖對(duì)應(yīng)
如p span{border:1px solidred;}對(duì)應(yīng)的是p下面的li標(biāo)簽,這個(gè)很用用途,可以準(zhǔn)確定位.
一些特殊應(yīng)用(IE7支持):
(1) p span{},匹配所有p下所有的span
(2) p + span{} ,匹配緊接著p元素后出現(xiàn)的第一個(gè)span標(biāo)簽,2者要有相同的父標(biāo)簽
2)屬性選擇器:(注意:屬性選擇器ie7才開(kāi)始支持,以下版本并不支持,其他的瀏覽器基本可以)
語(yǔ)法:img[alt]{border:1pxsolid;}
表示對(duì)應(yīng)有alt屬性的img標(biāo)簽,當(dāng)然可以支持多個(gè)屬性對(duì)應(yīng),如img[alt][title]{};表示這個(gè)2個(gè)屬性都有的img標(biāo)簽,
也可以與具體值對(duì)應(yīng):如:img[alt=”攝影”]{};
屬性選擇器中的高級(jí)應(yīng)用,特殊匹配:
(1)img[class~=”b”], ~= : 與屬性中的一個(gè)值對(duì)應(yīng)的,即與img class=”a b c”對(duì)應(yīng)
(2)[class^=”a”],以a開(kāi)頭的
(3)[class$=”a”],以a結(jié)束的
(4)[class*=”a”],包含a的
(5)[class|=”a”],等于a或以a開(kāi)頭的
3)偽類和偽元素
日常使用中主要是a標(biāo)簽的幾個(gè)偽類:link:hover:active:visited
以及:first-child:first:before:left:right:lang:focus:fist-line等等
注意:動(dòng)態(tài)偽類可以應(yīng)用到任何元素,如,input:focus{background:red;}當(dāng)input標(biāo)簽獲得焦點(diǎn)時(shí)背景變紅
以上語(yǔ)法組合使用,就能實(shí)現(xiàn)定位準(zhǔn)確、簡(jiǎn)單間接的樣式了。
三、選擇器分類整合
優(yōu)先級(jí)別遵循：行內(nèi)樣式 ID Class 標(biāo)記
基本選擇器標(biāo)記選擇器（eg:p/p）
類別選擇器(eg:class)
ID選擇器
復(fù)合選擇器
“交集”復(fù)合選擇器(eg:p.menu{color:red})必須是
標(biāo)記+類別/ID組合
“并集”復(fù)合選擇器(eg:h1,h2,h3{color:red})
“后代”復(fù)合選擇器(eg: #menu.menulist{ ... })
“子”復(fù)合選擇器(eg: #menu.menulist .selectit {... })
四、使用子選擇器減少id和class的定義
示例結(jié)構(gòu)：
div id="menu"
div class="menulist"
divclass="selectit"content/div
/div
/div
示例CSS：
#menu { ... }
#menu .menulist { ... }
#menu .menulist .selectit { ... }
五、使用組選擇器為不同元素應(yīng)用相同的樣式
如h1,h2,h3,div{font-size:16px;font-weight:bold}
則h1,h2,h3,div元素的樣式都為字體16像素，字體粗體
六、偽類和選擇符的配合使用
將偽類和類組合起來(lái)用，就可以在同一個(gè)頁(yè)面中做幾組不同的鏈接效果了，例如，我們定義一組鏈接為紅色，
訪問(wèn)后為藍(lán)色；另一組為綠色，訪問(wèn)后為黃色：
a.red:link {color: #FF0000}
a.red:visited {color: #0000FF}
a.blue:link {color: #00FF00}
a.blue:visited {color: #FF00FF}
現(xiàn)在應(yīng)用在不同的鏈接上：
a class="red"href="..."這是第一組鏈接/a
a class="blue" href="..."這是第二組鏈接/a
七、CSS的最近優(yōu)先原則
/*如果對(duì)一個(gè)元素定義了多次樣式，則以最近的一級(jí)優(yōu)先，最近一級(jí)的樣式將覆蓋其他行內(nèi)樣式 ID Class標(biāo)記*/
以下是引用片段：
CSS:
p{color:red}
.blue{color:blue}
.yellow{color:yellow}
HTML:
p此處顯示為紅色/p
p class="blue"此處顯示為藍(lán)色/p
p class="blue"style="color:green"此處顯示為綠色/p
p class="blue yellow"此處顯示為黃色/p
注意：
（1）注意樣式的幾個(gè)優(yōu)先順序(優(yōu)先級(jí)由上至下遞減，下面的樣式覆蓋上面的樣式)：
--元素style設(shè)定
--head區(qū)style/style中的設(shè)定
--外部引用css文件
（2）優(yōu)先級(jí)不是按訪問(wèn)順序來(lái)設(shè)定的，而是又css中的聲明順序來(lái)設(shè)的。
如上例中pclass="yellow blue"此處顯示為黃色/p也顯示為黃色，因?yàn)樵赾ss定義中.yellow在.blue
的后面。
八、書寫正確的鏈接樣式
當(dāng)用css定義鏈接的各種狀態(tài)時(shí)，要注意書寫的順序即：:link :visited :hover :active利用首字母：L V H A，
你可以通過(guò)記憶LoVe,Hate,兩個(gè)單詞來(lái)記住其順序。
:link --------鏈接的顏色
:visited -----鼠標(biāo)點(diǎn)擊后的顏色
:hover -------鼠標(biāo)放上去未點(diǎn)的顏色（懸停）
:active-------鼠標(biāo)點(diǎn)擊瞬間的顏色
九、:hover的靈活運(yùn)用
IE6不支持除a標(biāo)簽以外的:hover屬性，我們了解:hover屬性是鼠標(biāo)懸停效果。在IE7和FF中，對(duì)幾乎任意元素
都可以設(shè)置:hover屬性效果。這對(duì)我們做不同的訪問(wèn)效果很好。
如：
p {
width : 360px;
height : 80px;
padding : 20px;
margin : 50px auto 0 auto;
border : 1px solid #ccc;
line-height : 25px;
background : #fff;
}
p:hover {
border : 1px solid #000;
background : #ddd;
}
----------------此效果針對(duì)IE7和FF
p a {
color : #00f;
text-decoration : none;
font-size : 13px;
}
p a:hover {
color : #036;
text-decoration : underline;
}
-----------------此效果針對(duì)IE6
十、定義A標(biāo)簽要注意的小問(wèn)題
當(dāng)我們定義a{color:red;}時(shí)，它代表了A的四種狀態(tài)的樣式，如果此時(shí)要定義一個(gè)鼠標(biāo)放上的狀態(tài)只要定義
a:hover就可以了，其它三種狀態(tài)就是A中所定義的樣式。
只定義了一個(gè)a:link時(shí)，一定要記得把其它三種狀態(tài)定義出來(lái)！
十一、禁止內(nèi)容換行與強(qiáng)制內(nèi)容換行
在表格或?qū)又形覀兛赡芟Ｍ麅?nèi)容不換行或強(qiáng)制換行，我們可以通過(guò)一些css屬性來(lái)達(dá)到這些要求。
禁止換行：white-space:nowrap
強(qiáng)制換行：word-break:break-all; white-space: normal;
十二、區(qū)別relative和absolute
Absolute---CSS中的寫法是：position:absolute; 他的意思是絕對(duì)定位，他是參照瀏覽器的左上角，配合
TOP、RIGHT、BOTTOM、LEFT(下面簡(jiǎn)稱TRBL)進(jìn)行定位，在沒(méi)有設(shè)定TRBL，默認(rèn)依據(jù)父級(jí)的做標(biāo)原始點(diǎn)為
原始點(diǎn)。如果設(shè)定TRBL并且父級(jí)沒(méi)有設(shè)定position屬性，那么當(dāng)前的absolute則以瀏覽器左上角為原始點(diǎn)進(jìn)行
定位，位置將由TRBL決定。
Relative---CSS中的寫法是：position:relative;他的意思是絕對(duì)相對(duì)定位，他是參照父級(jí)的原始點(diǎn)為原始點(diǎn)，
無(wú)父級(jí)則以BODY的原始點(diǎn)為原始點(diǎn)，配合TRBL進(jìn)行定位，當(dāng)父級(jí)內(nèi)有padding等CSS屬性時(shí)，當(dāng)前級(jí)的原始
點(diǎn)則參照父級(jí)內(nèi)容區(qū)的原始點(diǎn)進(jìn)行定位。
十三、區(qū)別塊級(jí)元素block和內(nèi)聯(lián)元素inline
塊級(jí)---可定義寬高，另起獨(dú)占一行（如：divul）
內(nèi)聯(lián)---不可定義寬高，如文本元素（如a span）
十四、區(qū)別display和visibility
display:none和visibility:hidden都可以隱藏一個(gè)元素,但visibility:hidden只是隱藏了元素的內(nèi)容，但其使用的
位置空間仍然被保留。而display:none則相當(dāng)把元素從頁(yè)面中去除，其占用位置也將被刪除。
十五、背景background的一些語(yǔ)法
background-image:url(背景圖案.jpg,gif,bmp);
background-color:#FFFFFF; （背景顏色）
background-color : transparent; --設(shè)定背景為透明色–
background-repeat 改變背景圖片的重復(fù)并排的設(shè)定
說(shuō)明
repeat 背景圖片并排
repeat-x 背景圖片以X方向 并排
repeat-y 背景圖片以Y方向 并排
no-repeat 背景圖片不 以并排的方式處理
background-attachment是否固定圖片位置
說(shuō)明
scroll 拉動(dòng)卷軸時(shí)，背景圖片會(huì)跟著移動(dòng)（缺省值）
fixed 拉動(dòng)卷軸時(shí)，背景圖片不會(huì)跟著移動(dòng)
以長(zhǎng)度定位background-position:x y
使用百分比定位background-position: x% y%
說(shuō)明
x% 往右移
y% 往下移
backgroud-position: 0% 0%; 左邊上方
backgroud-position: 0% 50%; 左邊中間
backgroud-position: 50% 0%; 中間上方
backgroud-position: 50% 50%; 正中間
backgroud-position:100% 0%; 右邊上方
backgroud-position: 0% 100%; 左邊下方
backgroud-position: 100% 50%; 右邊中間
backgroud-position: 50% 100%; 中間下方
backgroud-position: 100% 100%; 右邊下方
以關(guān)鍵字定位
關(guān)鍵字說(shuō)明
top 上 ( y = 0 )
center 中 ( x = 50, y = 50 )
bottom 下 ( y = 100 )
left 左 ( x= 0 )
Exp:
background-position:center;
圖片在指定背景中央X=50% Y=50%位置
background-position: 200px 30px
十六、注釋的寫法
在Html中：
!-- footer --
content
!-- end footer --
在CSS中：
/* ---------- header ----------------- */
Style
十七、CSS的命名規(guī)范
1. id的命名
(1)頁(yè)面結(jié)構(gòu)
容器: Container
頁(yè)頭：header
內(nèi)容：content/container
頁(yè)面主體：main
頁(yè)尾：footer
導(dǎo)航：nav
側(cè)欄：sidebar
欄目：column
頁(yè)面外圍控制整體布局寬度：wrapper
左右中：left right center
(2)導(dǎo)航
導(dǎo)航：nav
主導(dǎo)航：mainnav
子導(dǎo)航：subnav
頂導(dǎo)航：topnav
邊導(dǎo)航：sidebar
左導(dǎo)航：leftsidebar
右導(dǎo)航：rightsidebar
菜單：menu
子菜單：submenu
標(biāo)題: title
摘要: summary
(3)功能
標(biāo)志：logo
廣告：banner
登陸：login
登錄條：loginbar
注冊(cè)：regsiter
搜索：search
功能區(qū)：shop
標(biāo)題：title
加入：joinus
狀態(tài)：status
2. class的命名
(1)顏色:使用顏色的名稱或者16進(jìn)制代碼,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字體大小,直接使用"font+字體大小"作為名稱,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)對(duì)齊樣式,使用對(duì)齊目標(biāo)的英文名稱,如
.left { float:left; }
.bottom { float:bottom; }
(4)標(biāo)題欄樣式,使用"類別+功能"的方式命名,如
.barnews { }
.barproduct { }
注意事項(xiàng)::
u 一律小寫;
u 盡量用英文;
u 不加中杠和下劃線;
u 2個(gè)組合的單詞不用中杠和下劃線可以將第二個(gè)單詞的首字母大寫（eg:mainContent）；
u 盡量不縮寫，除非一看就明白的單詞.
3. 主要的站點(diǎn)css文件
主要的 master.css
模塊 module.css
基本共用 base.css（root.css）
布局，版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css
表單 forms.css
補(bǔ)丁 mend.css
打印 print.css
十八、Padding影響寬度問(wèn)題
如果一組要嵌套的標(biāo)簽之間需要些間距的話，那就留給位于里面的標(biāo)簽的margin屬性吧，而不要去定義位
于外面的標(biāo)簽的padding
十九、完美的單象素外框線表格
table{border-collapse:collapse;}
td{border:1px solid #000;}
二十、如果文字過(guò)長(zhǎng),則將過(guò)長(zhǎng)的部分變成省略號(hào)顯示
style=”width:120px;height:50px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap”
二十一、并不是所有樣式都要簡(jiǎn)寫
當(dāng)樣式表前定義了如p{padding:1px2px 3px 4px}時(shí)，在后續(xù)工程中又增加了一個(gè)樣式上補(bǔ)白5px，下補(bǔ)白
6px。我們并不一定要寫成p.style1{padding:5px 6px 3px 4px}。可以寫成p.style1{paddingtop:5px;padding-right:6px;},你可能會(huì)感覺(jué)這樣寫還不如原來(lái)那樣好，但你想沒(méi)想過(guò)，你的那種寫法重復(fù)定義
了樣式，另外你可以不必去找原來(lái)的下補(bǔ)白與左補(bǔ)白的值是多少！如果以后前一個(gè)樣式P變了話，你定義的
p.style1的樣式也要變。(此種方法對(duì)后期修改樣式很重要)
二十二、幾個(gè)常用到的CSS細(xì)節(jié)處理上的樣式
1）中文字兩端對(duì)齊：text-align:justify;text-justify:inter-ideograph;
2）固定寬度漢字截?cái)啵簅verflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不讓其換行，不過(guò)只能
處理文字在一行上的截?cái)?，不能處理多行?（IE5以上）FF不能，它只隱藏。
***萬(wàn)能強(qiáng)制換行：white-space:normal;word-break:break-all
禁止換行：white-space:nowrap
強(qiáng)制換行：word-wrap:break-word; word-break: normal;
.AutoNewline
{
/*word-break: break-all; 方法一必須*/
/*word-wrap:break-word;overflow:hidden; 方法二*/
/*word-wrap:break-word; word-break: normal;方法三 */
word-wrap:break-word; word-break:break-all;}
.NoNewline
{
/*word-break: keep-all; 方法一必須*/
white-space:nowrap;
}
3）固定寬度漢字（詞）折行：table-layout:fixed; word-break:break-all;（IE5以上）FF不能。
4）acronym title=”輸入要提示的文字”style=”cursor:help;”文字/acronym用鼠標(biāo)放在前面的文
字上看效果。這個(gè)效果在國(guó)外的很多網(wǎng)站都可以看到，而國(guó)內(nèi)的少又少。
5）圖片設(shè)為半透明：.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5測(cè)試通
過(guò)，F(xiàn)F未通過(guò)，這是因?yàn)檫@個(gè)樣式是IE私有的東西；
6）FLASH透明：選中swf,打開(kāi)原代碼窗口，在/object前輸入paramname=”wmode”
value=”transparent” 以上是針對(duì)IE的代碼。
針對(duì)FIREFOX 給embed 標(biāo)簽也增加類似參數(shù)wmode=”transparent”
7）在做網(wǎng)頁(yè)時(shí)常用到把鼠標(biāo)放在圖片上會(huì)出現(xiàn)圖片變亮的效果，可以用圖片替換的技巧，也可以用如下的濾
鏡：
.pictures img {
filter: alpha(opacity=45); }
.pictures a:hover img {
filter: alpha(opacity=90); }
8）層在瀏覽器中居中對(duì)齊問(wèn)題
body { text-align: center }
#content { text-align: left; width: 700px;margin: 0 auto }
重慶分公司
重慶分公司
