項目期復習總結1：背景圖合並，hack，瀏覽器內核前綴，偽類after before
 |
文件夾： 1、背景圖合並和CSS Spirit 2、PS基本快捷鍵 3、hack技術基本書寫，為什麽不用？ 4、內核前綴 5、偽類afterbefore |
1、背景圖合並和CSS Spirit
|
背景圖合並在使用時有兩種方法： ①一種就是你會PS。能夠自己PS實現背景圖合並成一張圖片。再用background-position實現背景圖的定位。 ②假設你不會PS。那能夠用CSS背景圖合並工具，直接選好圖片後在線制作生成相相應格式的圖片。方便快捷。
background的語法： background-color：red | #RGB; background-position:X軸坐標 Y軸坐標 | left| right | center | top.. background-size: 100px | 30% | cover | contain; 在線測試 background-repeat: repeat | no-repeat | repeat-x | repeat-Y background-origin：border | padding | content background-clip：border-box | padding-box | content-box background-attachment：fixed | scroll background-image：url 簡寫的形式：background:color url() positon repeat； 備註：background-size的屬性值假設僅僅設置一個值，則第二個值會被設置為 "auto"。 cover：實現把背景圖像擴展至足夠大。以使背景圖像全然覆蓋背景區域。 contain：把圖像圖像擴展至最大尺寸，以使其寬度和高度全然適應內容區域。 背景圖合並技術優勢：利用背景圖合並技術能夠降低向server端的請求，節省時間和帶寬。對站點加速有非常大的提升作用。能夠實現兩邊圓角，中間無限延伸，通過子標簽背景覆蓋父標簽。三層嵌套，截取圖片的中間部分以及左右兩邊,算好圖片的位置,然後利用position定位。 |
2、PS基本快捷鍵
|
ctrl+w 關閉 ctrl+r 標尺 右鍵標尺選像素或者厘米 左鍵點擊拉出標尺線 要刪掉直接拖出去 ctrl+ + 放大 ctrl+ -縮小 ctrl+1 到100%視圖 ctrl+0 還原到最佳視圖 ctrl+d取消選區 ctrl+t 變形 在變形過程中按住shift保持寬高不變 按Enter退出變形 Alt+Delete 前景色填充 ctrl+Delete 背景色填充 ctrl+z 撤銷 ctrl+Alt+z 撤銷多次 空格 切換到手狀態 ctrl+g 圖層分組 |
3、hack技術基本書寫，為什麽不用？
|
CSS hack：針對不同的瀏覽器寫不同的CSS code的過程 CSS Hack大致有3種表現形式，CSS屬性前綴法、選擇器前綴法以及IE條件凝視法 ① 屬性前綴法： IE6: _height: 20px;IE7: +height: 20px; IE6/IE7: *height: 20px; IE6.7.8.9.10: height: 20px\9; IE8.9.10.11 : height: 20px\0; IE9.10 : height:20px\9\0; Hack的利弊： 我們盡量避免使用CSS hack，可是有些情況為了顧及用戶體驗實現向下兼容。不得已才使用hack。 比方因為IE8及下面版本號不支 持CSS3,而我們的項目頁面使用了大量CSS3新屬性在IE9/Firefox/Chrome下正常渲染。這樣的情況下假設不使用css3pie或htc 或條件凝視等方法時,可能就得讓IE8-的專屬hack出馬了。使用hack盡管對頁面表現的一致性有優點，但過多的濫用會造成html 文檔混亂不堪。添加管理和維護的負擔。相信僅僅要大家一起努力。少用、慎用hack，未來一定會促使瀏覽器廠商的標準越來越趨 於統一。順利過渡到標準瀏覽器的主流時代。拋棄那些陳舊的IE hack。必將減輕我們編碼的復雜度，少做無用功。 |
內核前綴
|
瀏覽器 |
內核前綴 |
內核 |
|
FF |
-moz |
Gecko |
|
IE |
-ms |
Trident |
|
Chrome |
-webkit |
Blink |
|
Opera |
-o 換成-webkit |
Persto 換成blink，原先已棄用 |
|
Safria |
-webkit |
webkit |
偽類after before
|
:before和:after的作用就是在指定的元素內容（而不是元素本身）之前或者之後插入一個包括content屬性指定內容的行內元素 :before 偽元素在元素之前加入內容 默認地。這個偽元素是行內元素。只是能夠使用屬性 display 改變這一點。 |
[html] view plaincopyprint?
- 實現簡單代碼
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Testing</title>
- <style>
- .wrap:before {
- content: ‘‘;
- width: 100px;
- height: 50px;
- display: block;
- background: #F00;
- }
- .wrap:after {
- content: ‘‘;
- width: 100px;
- height: 50px;
- display: block;
- background: #Fa0;
- }
- </style>
- </head>
- <body>
- <div class="wrap"></div>
- <script></script>
- </body>
- </html>
偽類清浮動：
|
.clearfix:after {content:"\200B";display:block;height:0;clear:both;} .clearfix {*zoom:1;} |
項目期復習總結1：背景圖合並，hack，瀏覽器內核前綴，偽類after before