滑動(dòng)門技術(shù)的原理

• 在沒學(xué)css3之前限书，一些圓角及特殊樣式虫蝶，是不能用css實(shí)現(xiàn)的，為了滿足特殊的效果倦西，滑動(dòng)門技術(shù)就產(chǎn)生了秉扑。因?yàn)榛瑒?dòng)門技術(shù)一般應(yīng)用于導(dǎo)航欄，所以這里用導(dǎo)航欄舉例
  <li>
<a href="#">
<span>內(nèi)容</span>
</a>
</li>
• 原理解析：
  • 實(shí)際上滑動(dòng)門技術(shù)是通過<a>和<span>標(biāo)簽來配合達(dá)到的调限。
  • 首先用a設(shè)置特殊背景圖片默認(rèn)左上角對(duì)齊舟陆，然后給a設(shè)置左內(nèi)邊距，距離是圖片特殊樣式左側(cè)的寬度耻矮。
  • 然后用span設(shè)置特殊背景圖片默認(rèn)右上角對(duì)齊秦躯，然后給span設(shè)置右內(nèi)邊距，距離是圖片特殊樣式右側(cè)的寬度裆装。
  • 這樣就相當(dāng)于把特殊圖片樣式的左右兩邊都固定住了踱承，再往span里面寫入內(nèi)容倡缠，它只會(huì)把中間撐開，把背景圖片往右邊推茎活。這樣就實(shí)現(xiàn)了昙沦，背景圖片在特殊樣式不變的情況下可以自動(dòng)根據(jù)文字內(nèi)來拉伸的目的。
  • 注意a和span都不能設(shè)置寬度载荔，只能設(shè)置內(nèi)邊距盾饮。
  • 這個(gè)必須要實(shí)際練習(xí)才容易理解，而且這個(gè)理解能簡(jiǎn)單的實(shí)現(xiàn)即可懒熙，css3有屬性可以替代它丘损。

margin負(fù)值的應(yīng)用

• 在很多購(gòu)物網(wǎng)站中，你會(huì)發(fā)現(xiàn)多個(gè)相鄰的盒子當(dāng)你選中時(shí)是共用的一條邊工扎。其實(shí)這不是通過設(shè)置border實(shí)現(xiàn)的徘钥，而是通過margin負(fù)值來實(shí)現(xiàn)。
• 原理簡(jiǎn)單肢娘，給盒子設(shè)置margin-left: -1px呈础；，就能右邊盒子的左邊框就能壓住左邊盒子的右邊框橱健，然后再通過:hover來讓你你覺得是共用一條邊框而钞。
• 代碼實(shí)現(xiàn)：
  div {
margin-left: -1px;
}
div:hover {
position:relative;
}
• 當(dāng)然肯定不能讓邊框一直被壓住，所以用定位優(yōu)先級(jí)大于浮動(dòng)和標(biāo)準(zhǔn)流盒子的特性畴博，hover設(shè)置了定位后笨忌，就會(huì)顯示盒子自己的邊框，而不是顯示邊框被右邊的壓住俱病。
• 還有一種情況是官疲，如果盒子本身都設(shè)置了定位，那么就通過給hover設(shè)置z-index來提高顯示層級(jí)即可亮隙。

邊框?qū)崿F(xiàn)三角形

• 首先要糾正一個(gè)誤區(qū)途凫，邊框并不是一個(gè)長(zhǎng)方形的線，而是一個(gè)三角形溢吻，為什么在實(shí)際中我們看著是一條直線呢维费？很簡(jiǎn)單，設(shè)置了寬度之后促王，三角形會(huì)被拉伸為一個(gè)很長(zhǎng)的梯形犀盟，四個(gè)梯形的邊框拼成了一組邊框。當(dāng)然實(shí)際工作中邊框都不會(huì)太粗蝇狼，所以你看著不明顯阅畴。
• 那么，到這里實(shí)現(xiàn)三角形就很簡(jiǎn)單了
  div {
width: 0;(高和寬必須為0迅耘，才會(huì)是三角形贱枣，不然是梯形)
height: 0;
border-weight: 20px; (只有邊框夠粗之后才能看出形狀)
border-color: red transparent transparent transparent;(哪條邊框設(shè)置顏色就顯示哪邊的三角形)
border-style: solid dashed dashed dashed;(dashed是為了ie6兼容而設(shè)置监署，不然會(huì)有bug)
overflow:hidden;(這個(gè)也是為ie6設(shè)置，因?yàn)閕e6不能設(shè)置0的寬高纽哥，不然會(huì)出錯(cuò))
}
• 這是兼容了大多數(shù)瀏覽器的寫法钠乏，如果不為兼容，那么dashed和overflow可以不寫春塌。
• 推薦用<i>或者<em>來做三角形晓避。
• 如果做快進(jìn)或者快退鍵是要注意，因?yàn)榻^對(duì)定位默認(rèn)是對(duì)齊父元素內(nèi)容的左上角摔笤，但是如果父盒子沒有設(shè)置高和寬够滑，那么它左上角對(duì)齊的盒子中間那個(gè)點(diǎn)垦写。
• 紅絲帶那個(gè)案例一定練習(xí)幾遍吕世，理解透徹。

制作favicon.ico圖標(biāo)

• 首先找到要做成圖標(biāo)的圖片
• 然后前往www.bitbug.net網(wǎng)站轉(zhuǎn)換為ico格式的小圖標(biāo),放到網(wǎng)站根目錄
• 最后在html文件的head標(biāo)簽里寫入<link rel="shortcut icon" href="./favicon.ico" />即可梯投。

網(wǎng)站的LOGO優(yōu)化

• 第一步把logo圖片設(shè)為背景圖
• logo盒子里面嵌套一個(gè)h1標(biāo)簽來提權(quán)
• h1里再嵌套一個(gè)a標(biāo)簽用于點(diǎn)擊命辖，a標(biāo)簽要和背景圖一樣大
• a標(biāo)簽內(nèi)加入網(wǎng)站名文字
• 設(shè)置text-indent:-9999px;和overflow:hidden;來隱藏掉文字。

文本屬性

• 字符間距 letter-spacing:任意單位數(shù)值
  • 控制字符與字符之間的間距
• 單詞間距 word-spacing:任意單位數(shù)值
  • 控制單詞與單詞之間的間距（不會(huì)分開一個(gè)完整的單詞）分蓖，對(duì)中文字符無效
• 文本換行 word-break: normal|keep-all|break-all
  • 設(shè)置文本的換行模式尔艇。normal是默認(rèn)屬性，就是按照瀏覽器默認(rèn)的換行模式來么鹤。break-all允許在單詞內(nèi)換行终娃，為了保證單詞的完整性，瀏覽器不會(huì)把單詞字母換行隔開蒸甜，但是設(shè)置break-all就可以棠耕。keep-all正常情況不會(huì)換行，但如果有空格（半角圓角）就會(huì)換行柠新。
• 空白符處理 white-space:normal|pre|nowrap
  • 空白符處理默認(rèn)值normal窍荧，不管你打多少個(gè)空格回車，只會(huì)顯示一個(gè)空格的位置恨憎。pre預(yù)處理格式蕊退，會(huì)完整的現(xiàn)在你打出的空白符，有多個(gè)顯示多少個(gè)憔恳。nowrap(重要)瓤荔，設(shè)置文本不換行，讓所有文本在一行內(nèi)顯示钥组，超出盒子大小也會(huì)繼續(xù)顯示输硝，超出瀏覽器范圍會(huì)自動(dòng)生成滾動(dòng)條，常用于標(biāo)題上者铜。
• 文字超出部分省略 text-overflow:clip|ellipsis
  • 默認(rèn)值是clip腔丧，文本超出部分直接切掉放椰，但是不會(huì)這么用。常用的文本超出部分省略方法：
    white-space: nowrap 強(qiáng)制文本一行顯示
overflow:hidden 隱藏溢出部分的文本
text-overflow: ellipsis 將不能完整顯示的部分以省略號(hào)來代替
  • 完整的三步不能少愉粤。