国产一级a片免费看高清,亚洲熟女中文字幕在线视频,黄三级高清在线播放,免费黄色视频在线看

這里總結(jié)的CSS技巧，對(duì)前端工程師有很大的幫助，雖然這些技巧都很基本，但如果你或你的團(tuán)隊(duì)還不太了解或還沒開始使用，可以參考下面文章介紹的內(nèi)容。

1. 用 firebug 或 console 來調(diào)試

在 Firefox 還沒有推出 Developer Tools 時(shí)，大家一定是用 Firebug 來調(diào)試，2006 年 Firebug 第一版 release 出來，讓 web 開發(fā)者可以更快速的了解網(wǎng)站調(diào)試，也可以通過 Firebug 來了解網(wǎng)站的性能。但是現(xiàn)今，F(xiàn)irefox 推出了自家 Developer Tools，而Chrome 也是有很多好用的 技巧 及強(qiáng)大的 Workspace，對(duì) Workspace 不熟悉的，可以參考原文作者文章：Coding on workspace of Chrome Developer tools。

2. Float 或 Inline-Block css

先來看看范例1，中間有三個(gè) column，分別用 float: left 方式來排列：

<div class="wrapper">    <div class="column">test</div>    <div class="column">test</div>    <div class="column">test</div></div>

CSS 寫法：

.wrapper {    width: 400px;    min-height: 50px;    background-color: red;} .column {    float: left;    width: 100px;    height: 100px;    background-color: blue;    margin-left: 20px;}

會(huì)發(fā)現(xiàn)背景紅色 .wrapper 區(qū)塊被砍了一半，原因就是沒使用 clear: both，正確解法請(qǐng)看范例2，如果不是用此解法，也可以將 float 取代成 display: inline-block，解法請(qǐng)看范例3。上述兩種解法是最常見的，終極解法可以通過 pseudo-class :after 來解決此問題。

3. 用 CSS animation 取代 Javascript

原文作者寫了一篇 CSS3 Transitions to replace JavaScript animations 文章，就是要告訴前端工程師盡可能將原本使用的 jQuery animation 取代成 CSS 作法，原因在于 CSS animation 的性能遠(yuǎn)大于 JavaScript Native Language 性能，請(qǐng)參考http://www.cssanimate.com/ 網(wǎng)站。

4. Form 表單請(qǐng)使用 Label input

上面的例子，只要點(diǎn)選 Name 或 Email 會(huì)發(fā)現(xiàn)瀏覽器光標(biāo)自然會(huì)移動(dòng)到 text input 字段上，設(shè)置方式很簡(jiǎn)單，只要將 label 的 for attribute 設(shè)置為 input id 即可：

<label for="username">Name:</label><input type="text" id="username" /><label for="email">Email:</label><input type="text" id="email" />

5. 性能：Spiriting everything

每個(gè)網(wǎng)站一定會(huì)有很多小 icon 圖，不管是直接使用在 html 或者是寫在 CSS 內(nèi)，在網(wǎng)絡(luò)傳輸?shù)臅r(shí)候，如果 10 張 icon 就會(huì)建立 10 條 connection，然而 css_spite 就是解決了此問題，將所有的小圖集結(jié)成一張大圖，通過 css 設(shè)置來減少網(wǎng)絡(luò)連接數(shù)，網(wǎng)絡(luò)上很多工具來達(dá)成此目的，像是 CSS Sprite Generator，如果熟悉 Compass 工具，可以直接使用 Spriting with Compass：

.my-icons-sprite,.my-icons-delete,.my-icons-edit,.my-icons-new,.my-icons-save   { background: url('/images/my-icons-s34fe0604ab.png') no-repeat; } .my-icons-delete { background-position: 0 0; }.my-icons-edit   { background-position: 0 -32px; }.my-icons-new    { background-position: 0 -64px; }.my-icons-save   { background-position: 0 -96px; }

6. 不要直接修改 image width 和 height 屬性

這點(diǎn)其實(shí)蠻重要的，現(xiàn)在網(wǎng)站架構(gòu)的瓶頸，說實(shí)在的 80% 以上都是在讀取圖片文件，有時(shí)候 UI 設(shè)計(jì)師切出一張大圖，前端工程師拿去使用，結(jié)果圖文件很大，工程師就直接通過 css width height 修改圖片大小，這樣看起來是沒問題，但是網(wǎng)站就開始很慢，使用者開始不爽，網(wǎng)站自然就不會(huì)有人繼續(xù)用。正確方式就是將 image resize 成各種版本，可以直接參考這篇 Tools for image optimization：

• 生產(chǎn)多分辨率圖像：grunt-responsive-images
• Clowncar 技巧：grunt-clowncar

7. 使用 max width 和 height 來調(diào)整 image 比例

這招其實(shí)還蠻好用的，我們先來看看例子：

我們看到這張圖本來的比例大小為寬 228 高 320，但是經(jīng)過下面 CSS 語法

img {    width: 228px;    height: 228px;}

圖片就變成上述的例子，但是如果我們把 CSS 改成底下呢：

img {    max-width: 228px;    max-height: 228px;}

出來的結(jié)果就是：

8. 善用 :before 和 :after

在前面有提到 float: left 后要加上一個(gè) element clear: both 現(xiàn)在我們可以通過 :after 來解決這問題（示例地址）：

.wrapper:after {    content: ' ';    clear:both;    display:block;}

9. 減少 CSS 程序代碼

這部份就是減少不必要的程序代碼

.class {    margin-top:5px;    margin-right:10px;    margin-bottom:15px;    margin-left:20px;}

可以寫成

.class {    margin:5px 10px 15px 20px;}

CSS color 部分 #RRGGBB 可以寫成 #RGB

10. 使用 SASS 或 Compass

團(tuán)隊(duì)內(nèi)尚未使用 SASS 或 Compass 嗎？個(gè)人建議盡快使用這兩套工具，還不熟悉這兩套工具，建議將底下幻燈片看完：

• 淺談 SASS ＆ 可維護(hù)性 CSS
• Sass + Compass 101 Workshop
• Recreating Subtle Design Details Using Sass

原文： KidsIL Blog / 編譯：wu-boy