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. hdu 5493 Queue（线段树）

    Problem Description N people numbered to N are waiting in a bank for service. They all stand in a qu ...

  2. 使用公用表表达式(CTE)

    本文来自:http://blog.csdn.net/songjie521/article/details/3321030 通用表表达式(CTEs)是SQL Server 2005的一项新功能.它们类似 ...

  3. ORM框架Hibernate (一) 对DAO封装和抽象

    说明 前面已经给大家介绍了Struts这个框架,Struts是对Web项目的表示层进行了封装,而Hibernate是对Web项目中DAO层进行封装,也即是.NET中我们常用到的D层封装,即对访问数据库 ...

  4. C++中如何建立一个顺序表

    准备数据 #define MAXLEN 100 //定义顺序表的最大长度 struct DATA { char key[10]; //结点的关键字 char name[20]; int age; }; ...

  5. ff与ie 的关于js兼容性

    FF的FIREBUG,不仅能测试JS还能检查CSS错误,是一般常用的.但它主要检查FF方面的错误,对IE就无能为力了.要测试IE,就用ieTester,它可以测试IE几乎所有版本(1.0恐怕也用不到测 ...

  6. iframe 重新加载闪过白块问题

    在使用iframe时,iframe背景为白块,刷新时也会闪过白块.如果刷新时间长,就会一直出现白块,让人很烦恼,通过网上搜资料,测试最终解决方法如下所示,注意主要针对IE浏览器测试. 一.iframe ...

  7. dojo.declare

    参考:http://www.ibm.com/developerworks/cn/web/1203_xiejj_dojodeclare/

  8. bootstrap之 formgroup表单布局样式

    <form class="form-horizontal" role="form"> <fieldset> <legend> ...

  9. c++对文件操作的支持(一)

    #include <stdio.h> #include <iostream> #include <fstream> using namespace std; voi ...

  10. Centos7安装JDK

    以下是gz包方式: 1,将jdk-8u51-linux-x64.tar.gz放到/usr/java目录下 2,用tar -zxvf jdk-8u51-linux-x64.tar.gz 解压到当前目录 ...