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. Linux MySql安装步骤

    本文将以MySQL 5.5.47为例,以CentOS 6.5为平台,讲述MySQL数据库的安装和设置. 源码包方式安装 1.新建MySql用户和用户组 groupadd mysql useradd - ...

  2. 如何煉成NET架構師

    微软的DotNet 开发绝对是属于那种入门容易提高难的技术.而要能够成为DotNet 架构师没有三年或更长时间的编码积累基本上是不可能的.特别是在大型软件项目中,架构师是项目核心成员,承上启下,因此 ...

  3. 让你的javascript函数拥有记忆功能，降低全局变量的使用

    考虑例如以下场景:假如我们须要在界面上画一个圆,初始的时候界面是空白的.当鼠标移动的时候,圆须要尾随鼠标移动.鼠标的当前位置就是圆心.我们的实现方案是:假设界面上还没有画圆,那么就新创建一个:假设已经 ...

  4. Winpcap网络编程九之Winpcap实战,ARP协议获得MAC表及主机通信

    大家好,本次我们须要完毕的任务是: 完毕两台主机之间的数据通信(数据链路层) 仿真ARP协议获得网段内主机的MAC表 使用帧完毕两台主机的通信(Hello! I'm -) 声明:本文章的目的是为大家的 ...

  5. ibatis错误汇总

    1) 错误:The prefix "context" for element "context:property-placeholder" is not bou ...

  6. linux C连接mysql

    linux 环境下C语言连接数据库首先要配置环境 1,确定你的linux下安装mysql我们可以做个测试. 打开你的终端,在终端下输入:service mysqld status [root@bogo ...

  7. linux查看用户登录信息2-who命令

    who命令与w命令相似,但要比w命令显示更加详细的信息.[root@rusky opt]# man who WHO(1) User Commands WHO(1) NAME who - show wh ...

  8. angular在ie8下的一个bug

    昨天拿项目在ie8下测试,发现不少bug,其中有一个bug让我很不解,报了一个thead开头的bug,因为已经切回到linux下了,我就不报具体是什么bug了,鼓捣了半天,发现引用angular的应用 ...

  9. pureftpd的搭建

    1,安装purefptd软件 ftp(file transfer protocol) 文件传输协议 cd  /usr/local/src  wget https://download.pureftpd ...

  10. for循环删除集合陷阱

    首先看下面的代码: import java.util.LinkedList;import java.util.List; public class DeleteCollection {         ...