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. 【转】DynDNS使用随笔

    暂且小结一下: 1.下载编译客户端代码并交叉编译 首先,按照网上提示的步骤,在www.dyndns.com注册了帐号,并申请了域名,绑定了IP; 然后,在站点中找到客户端源码,其中ddclient是p ...

  2. Java对象在JVM中的生命周期

          当你通过new语句创建一个java对象时,JVM就会为这个对象分配一块内存空间,只要这个对象被引用变量引用了,那么这个对象就会一直驻留在内存中,否则,它就会结束生命周期,JVM会在合适的时 ...

  3. BCD码、十六进制与十进制互转

    在做嵌入式软件的设计中,常常会遇到十六进制.BCD码与十进制之间的转换,近期做M1卡的应用中,涉及了大量的十六进制.BCD码与十进制之间的转换.通过对BCD码.十六进制 权的理解,轻松的实现了他们之间 ...

  4. 改变页面选择文字颜色和背景颜色----selection伪元素

    div::selection{color:#fff;background: #E83E84;text-shadow:none}  

  5. Ribbon1: 在Office菜单中添加项目

    Office菜单就是应用程序窗口左上角的一个小的应用程序按钮,这个按钮被称作Office按钮,包含一些通用的操作或命令,例如打印.保存和发布.定制Office菜单时,其下的命令将影响整个文档,而不是文 ...

  6. 计算一个数组里的重复值并且删去(java)

    主要思想: 数组可以无序 假设数字里的值都为正 循环判断数组 如果与前面的数字相同则变为-1 然后记录-1的个数算出重复值 然后重新new一个减去重复值长度的新数组 和原数组判断 不为-1的全部复制进 ...

  7. WCF方式调用asmx设置cookie

    以前旧的方式去调用web service, 可以通过CookieContainer去设置cookie,改用WCF方式去调用,则必须配置allowCookies属性为true <system.se ...

  8. 【SSH进阶之路】Hibernate基本原理（一）

    在开始学Hibernate之前,一直就有人说:Hibernate并不难,无非是对JDBC进一步封装.一句不难,难道是真的不难还是眼高手低? 如果只是停留在使用的层面上,我相信什么技术都不难,看看别人怎 ...

  9. HDU 3306 - Another kind of Fibonacci

    给你 A(0) = 1 , A(1) = 1 , A(N) = X * A(N - 1) + Y * A(N - 2) (N >= 2). 求 S(N) = A(0) 2 +A(1) 2+……+ ...

  10. C++程序设计实践指导1.3求任意整数降序数改写要求实现

    改写要求1:动态生成单链表存储 #include <cstdlib> #include <iostream> using namespace std; struct LinkN ...