HTML5页面模板

现在国外很多制作新网站直接使用了HTML5代码，当然我们也得跟上，下面是一个常用的HTML5默认模板，就像你用Dreamweaver新建一个HTML文件时的代码，只不过现在这个是HTML5的。这个代码为了兼容IE浏览器，所以加入Google托管的HTML5shiv文件。其次是我们经常用到的最新的jQuery 1.8.2库。

<!doctype html>

<html lang="en-US">

<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 Reset我想很多人都使用，他是CSS浏览器复位样式代码，下面这个已经是支持HTML5的Reset了，所以不要再使用旧的CSS RESET文件了哦。

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清除浮动

清除浮动是前端人员必须知道的哦，延伸学习：http://www.qianduan.net/new-clearfix.html

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

.clearfix:after { clear: both; }

/* IE 6/7 */

.clearfix { zoom: 1; }

CSS3 渐变（CSS3 Gradients）

CSS3渐变真的很好用，但是它容易记住，下面是比较全面的浏览器兼容的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

延伸学习教程：http://css-tricks.com/examples/CSS3Gradient/、http://www.w3cplus.com/content/css3-gradient（中文）

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

延伸学习教程：http://sev7n.net/index.php/473.html(中文)

@Font-Face

这个主要是用于嵌入字体的模块，一般适用于嵌入文件较小的字体，中文字体很大，所以很少被嵌入。

@font-face{

  font-family: 'MyFont';

  src: url('myfont.eot');

  src: url('myfont.eot?#iefix') format('embedded-opentype'),

    url('myfont.woff') format('woff'),

    url('myfont.ttf') format('truetype'),

    url('myfont.svg#webfont') format('svg');

}

h1 { font-family: 'MyFont', sans-serif; }

延伸学习教程：http://www.w3cplus.com/content/css3-font-face（中文）

HTML Meta标签（用于响应性布局）

如果你已经制作了响应性布局，哪么加入下面代码到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">

HTML5嵌入媒体 (HTML5 Embedded Media)

新的<video>，<audio>标签给开发人员提供方便的嵌入媒体方式，这个日后必定很实用。

<video poster="images/preview.png" width="1280" height="720" controls="controls" preload="none">

	<source src="media/video.mp4" type="video/mp4"></source>

	<source src="media/video.webm" type="video/webm"></source>

	<source src="media/video.ogg" type="video/ogg"></source>

</video>

<audio controls="controls" preload="none">

	<source src="music.ogg" type="audio/ogg">

	<source src="music.mp3" type="audio/mpeg">

</audio>

有用的HTML+CSS片段的更多相关文章

  1. 20个非常有用的Java程序片段

    下面是20个非常有用的Java程序片段,希望能对你有用. 1. 字符串有整型的相互转换 String a = String.valueOf(2); //integer to numeric strin ...

  2. 整理：20个非常有用的Java程序片段

    下面是20个非常有用的Java程序片段,希望能对你有用. 1. 字符串有整型的相互转换 String a = String.valueOf(2); //integer to numeric strin ...

  3. 有用的Python代码片段

    我列出的这些有用的Python代码片段,为我节省了大量的时间,并且我希望他们也能为你节省一些时间.大多数的这些片段出自寻找解决方案,查找博客和StackOverflow解决类似问题的答案.下面所有的代 ...

  4. [前端开发] 8 个很有用的免费CSS的UI工具箱

    搞web开发的不能不提到前端,下面就和大家分享下8个很有用的免费CSS的UI工具箱 1) UI CSS ui.css 是一个用来创建简洁的 Web 用户界面的工具,下载的文件只包含一个 css 文件. ...

  5. 收集的20个非常有用的Java程序片段

    下面是20个非常有用的Java程序片段,希望能对你有用. 1. 字符串有整型的相互转换 String a = String.valueOf(2); //integer to numeric strin ...

  6. 20个非常有用的Java程序片段--转

    原文地址:http://geek.csdn.net/news/detail/236591 下面是20个非常有用的Java程序片段,希望能对你有用. 1. 字符串有整型的相互转换 String a = ...

  7. 有用的css片段

    1.背景渐变动画 CSS中最具诱惑的一个功能是能添加动画效果,除了渐变,你可以给背景色.透明度.元素大小添加动画.目前,你不能为渐变添加动画,但下面的代码可能有帮助.它通过改变背景位置,让它看起来有动 ...

  8. 一些非常有用的html,css,javascript代码片段(持久更新)

    1.判断设备是否联网 if (navigator.onLine) { //some code }else{ //others code } 2.获取url的指定参数 function getStrin ...

  9. 一些比较实用的css片段

    新看了一个帖子,里面好多实用的css代码块,可拿出来当做功能库.先附上该文地址http://segmentfault.com/a/1190000002773955 里面的内容很多我挑了几个经过我验证的 ...

随机推荐

  1. 事关Animation Tree的工作随笔（一）

    最近的业务上,又回到Animation Tree这块了. 众所周知的是Animation Tree这些概念已经提出很久了,但是使用有着AT支持的CE引擎的项目,却依然义无反顾地没有使用AT,而且,连某 ...

  2. Android开发最佳学习路线图

          为了帮助大家更好的学习Android开发的相关知识,尚观4G智能操作系统研究室(www.up4g.com)为大家制作下面学习路线图:希望能帮助到广大的android爱好者. 在開始之前我们 ...

  3. Oracle Golden Gate - 概念和机制 (ogg)

    Golden Gate(简称OGG)提供异构环境下交易数据的实时捕捉.变换.投递. OGG支持的异构环境有: OGG的特性: 对生产系统影响小:实时读取交易日志,以低资源占用实现大交易量数据实时复制 ...

  4. 使用html5中video自定义播放器必备知识点总结以及JS全屏API介绍

    一.video的js知识点: controls(控制器).autoplay(自动播放).loop(循环)==video默认的: 自定义播放器中一些JS中提供的方法和属性的记录: 1.play()控制视 ...

  5. Audio-支持多个音频文件格式

    通过使用 audio 元素或对象支持多个音频格式,你可以将更多的听众从多个浏览器吸引到你的网页上. 使用源元素指定多个音频格式 在将 HTML5 audio 元素添加到代码时,可以指定一条在浏览器不支 ...

  6. WLW 截屏插件

    转载:http://www.xtit.net/post/1030/ 一直以来用WLW更新博客,刚刚在DailyApps看到一个关于Windows Live Writer的截屏插件,相当不错. 是由MS ...

  7. c# 面相对象1-概括

    面向对象和面向过程的区别 面向过程就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候一个一个依次调用就可以了.  面向对象是把构成问题事务分解成各个对象,建立对象的目的不是为 ...

  8. IOS--工作总结－－post上传文件（以流的方式上传）

    1.添加协议 <NSURLConnectionDelegate> 2.创建 @property (nonatomic,retain) NSURLConnection* aSynConnec ...

  9. Lua编程入门-学习笔记2

    第6章 深入函数 函数是一种“第一类值(First-Class Value)”,他们具有特定的词法域(lexical scoping) 将表达式“function(x) <body> en ...

  10. 开发网站相关知识html和javascript

    1.html 布局 https://github.com/bramstein/jlayout/ http://welcome.totheinter.net/columnizer-jquery-plug ...