常规的HTML+CSS页面模板及代码片段

 HTML5页面模板下面是一个常用的HTML5默认模板，就像你用Dreamweaver新建一个HTML文件时的代码，只不过现在这个是HTML5的。代码为了兼容IE浏览器，所以加入Google托管的HTML5shiv文件，也可以下载到本地进行调用。...

HTML5页面模板

下面是一个常用的HTML5默认模板，就像你用Dreamweaver新建一个HTML文件时的代码，只不过现在这个是HTML5的。代码为了兼容IE浏览器，所以加入Google托管的HTML5shiv文件，也可以下载到本地进行调用。

常规的HTML+CSS页面模板及代码片段 html5模板格式化清除浮动渐变 css 特效 css3 图1

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Default Page Title</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/Jquery/1.8.1/jQuery.min.js"></script>
<!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]-->
</head>

<body>
</body>
</html>

CSS RESET

格式化/复位CSS文件

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 {
   margin: 0;
   padding: 0;
   border: 0;
   font-size: 100%;
   font: inherit;
   vertical-align: baseline;
   outline: none;
 }
 html { height: 101%; } /* always display scrollbars */
 body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, Verdana, sans-serif; }
 
 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
 ol, ul { list-style: none; }
 
 blockquote, q { quotes: none; }
 blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
 strong { font-weight: bold; } 
 
 input { outline: none; }
 
 table { border-collapse: collapse; border-spacing: 0; }
 img { border: 0; max-width: 100%; }
 
 a { text-decoration: none; }
 a:hover { text-decoration: underline; }

Clearfix清除浮动

.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }

/* IE 6/7 */
.clearfix { zoom: 1; }

CSS3 渐变（CSS3 Gradients）样式格式

以下是比较全面的浏览器兼容的CSS3渐变代码，下次使用直接Copy就可以了

background-color: #000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#000');
background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#000));
background-image: -webkit-linear-gradient(top, #bbb, #000);
background-image: -moz-linear-gradient(top, #bbb, #000);
background-image: -ms-linear-gradient(top, #bbb, #000);
background-image: -o-linear-gradient(top, #bbb, #000);
background-image: linear-gradient(top, #bbb, #000);

附带CSS3渐变在线生成工具：CSS3 Gradient Generator、colorzilla

CSS3 Transforms

CSS3 Transforms（转换变形）效果也是非常强大。

-webkit-transform: perspective(250) rotateX(45deg);
-moz-transform: perspective(250) rotateX(45deg);
-ms-transform: perspective(250) rotateX(45deg);
-o-transform: perspective(250) rotateX(45deg);
transform: perspective(250) rotateX(45deg);

CSS3 Transforms在线工具：http://westciv.com/tools/transforms/index.html