作為Web開發人員的工作，往往需要嘗試新的學習。某些代碼在我們的開發當中是非常頭疼的，比方說Clearfix的清除，全CSS3漸變，自定義@ font-face等等這些特殊的樣式，因為他們對IE的支持不是很好，每次遇到我們都需要花費很長的時間去思考，調試。
在這篇文章中，我想與大家分享的8個任何Web開發人員可以使用非常有用的代碼，。這些代碼塊包含了典型的HTML5和一些中等水平的CSS3的解決方案為各種網站的布局。你可以將這些片段保存，以便應用到任何的項目當中
1。基本的HTML（HTML5）頁面模板
此代碼段有明顯的DOCTYPE標簽，以及一些額外的頭部腳本。
這里引用2個在谷歌托管的代碼。第一個是jQuery 1.8.2，這是最新版本。然后第二個是包括HTML5shiv的文件，讓舊版本的Internet Explorer可以識別新的HTML5元素。
1 <!doctype html> 2 <html lang="en-US"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>Default Page Title</title> 6 <link rel="shortcut icon" href="favicon.ico"> 7 <link rel="icon" href="favicon.ico"> 8 <link rel="stylesheet" type="text/css" href="styles.css"> 9 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 10 <!--[if lt IE 9]> 11 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 12 <![endif]--> 13 </head> 14 15 <body> 16 17 </body> 18 </html>
2。Clearfix CSS
大多數Web開發人員了需要知道clearfix對網站布局的影響，並且要添加清除浮動的規則代碼。
下面的代碼復制你可以復制到任何CSS文件當中，用到在布局中有漂浮的時候使用。
1 .clearfix:before, .container:after { content: ""; display: table; } 2 .clearfix:after { clear: both; } 3 4 /* IE 6/7 */ 5 .clearfix { zoom: 1; }
3。CSS瀏覽器復位
每個Web瀏覽器有一套標准規則的樣式文件。默認情況下，如果你沒有其他的CSS規則，標准字體，邊距等樣式，他會使用默認的。
通常情況下，Web開發人員要刪除這些預設值，使每個瀏覽器呈現的網頁完全一樣的。margin和padding是一個很大的區域，
1 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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { 2 margin: 0; 3 padding: 0; 4 border: 0; 5 font-size: 100%; 6 font: inherit; 7 vertical-align: baseline; 8 outline: none; 9 } 10 html { height: 101%; } /* always display scrollbars */ 11 body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, Verdana, sans-serif; } 12 13 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } 14 ol, ul { list-style: none; } 15 16 blockquote, q { quotes: none; } 17 blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } 18 strong { font-weight: bold; } 19 20 input { outline: none; } 21 22 table { border-collapse: collapse; border-spacing: 0; } 23 img { border: 0; max-width: 100%; } 24 25 a { text-decoration: none; } 26 a:hover { text-decoration: underline; }
4。全CSS3漸變（CSS3 Gradients）
下面的代碼創建CSS3梯度，兼容幾乎所有的Web瀏覽器。他必須符合CSS前綴替代的渲染引擎！這些代碼記住他們很難，你可以復制下來，下次直接使用。
1 background-color: #000; 2 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#000'); 3 background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#000)); 4 background-image: -webkit-linear-gradient(top, #bbb, #000); 5 background-image: -moz-linear-gradient(top, #bbb, #000); 6 background-image: -ms-linear-gradient(top, #bbb, #000); 7 background-image: -o-linear-gradient(top, #bbb, #000); 8 background-image: linear-gradient(top, #bbb, #000);
5。CSS3轉換（CSS3 Transforms）
這是一個很少被使用的代碼，因為缺乏在舊版本的瀏覽器支持。但是現在只需要轉換短短的幾行代碼，開發人員就可以使用css漸變來創建豐富的界面。當然，你可以用它生成自定義工具提示和自定義形狀。
1 -webkit-transform: perspective(250) rotateX(45deg); 2 -moz-transform: perspective(250) rotateX(45deg); 3 -ms-transform: perspective(250) rotateX(45deg); 4 -o-transform: perspective(250) rotateX(45deg); 5 transform: perspective(250) rotateX(45deg);
6。自定義@ font-face的印刷術
已經有很多的教程，說明如何將您自己的自定義字體，@font-face 能夠加載服務器端的字體文件，讓客戶端顯示客戶端所沒有安裝的字體。【微軟的IE 5已經是開始支持這個屬性，但是只支持微軟自有的.eot (Embedded Open Type) 格式，而其他瀏覽器直到現在都沒有支持這一字體格式。然而，從Safari 3.1開始，網頁重構工程師已經可以設置.ttf(TrueType)和.otf(OpenType)兩種字體做為自定義字體了。】如果你想包括自己的字體拷貝到您的CSS代碼加載一個獨特的字體，使用這個代碼段。
1 @font-face{ 2 font-family: 'MyFont'; 3 src: url('myfont.eot'); 4 src: url('myfont.eot?#iefix') format('embedded-opentype'), 5 url('myfont.woff') format('woff'), 6 url('myfont.ttf') format('truetype'), 7 url('myfont.svg#webfont') format('svg'); 8 } 9 10 h1 { font-family: 'MyFont', sans-serif; }
請注意，您仍然需要設置任何你需要的元素，采用這種字體的font-family屬性。此外，你要提供至少支持所有CSS3基於瀏覽器的文件支持。理想情況下，你應該附上OTF，TTF，EOT，WOFF和SVG字體。
有一個奇妙的工具在線網站Font2Web，這實際上可以為你做這種轉換。這個網站被限制為每天請求次數，但它是一個最好的免費解決方案來生成您的字體的副本。
7。為響應布局的HTML Meta標簽（移動網站建立所需要的標簽）
移動的響應性的Web設計已經成為非常流行。現在，你只需要加入下面的標簽，就能夠支持移動瀏覽器，您可以添加到您的文檔<HEAD>部分。
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
viewport的視口標簽是唯一的一個需要響應的布局標簽。這將在所有屏幕上設置一個1×1的縱橫比。智能手機的瀏覽器，可以使網站觀看全視圖，並允許用戶放大，這將刪除默認的功能。其他兩個標簽中支持移動IE和較舊的智能手機瀏覽器，但對移動布局不會造成影響
8。HTML5嵌入式媒體（HTML5 Embedded Media）
新的<video>，<AUDIO>標簽對經常與數字媒體。圖像開發的人員來說提供了最直接的方便
1 <video poster="images/preview.png" width="1280" height="720" controls="controls" preload="none"> 2 <source src="media/video.mp4" type="video/mp4"></source> 3 <source src="media/video.webm" type="video/webm"></source> 4 <source src="media/video.ogg" type="video/ogg"></source> 5 </video> 6 7 <audio controls="controls" preload="none"> 8 <source src="music.ogg" type="audio/ogg"> 9 <source src="music.mp3" type="audio/mpeg"> 10 </audio>
結論
在這篇文章中，我提出這個集合給Web開發人員構建一個非常基本的入門代碼。這是一些令人驚異的解決方案，用於創建殺手HTML5/CSS3網站。
你可以隨意復制和分享這篇文章在網絡上的任何地方。此外，您應該備份這些代碼片段，下次遇到的時候能夠及時拿出來使用
ddfd