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. UE是什么意思？用户体验设计师与UE设计是什么关系？

    本文来自:http://blog.sina.com.cn/s/blog_a6bebb3f01015h47.html 什么是UE(UE——UE就是用户体验度) 你会发觉他的使用很人性化:功能强大但操作简 ...

  2. Error:Execution failed for task &#39;:app:dexDebug&#39;. &gt; com.android.ide.common.process.ProcessException

    异常Log: Error:Execution failed for task ':app:dexDebug'. > com.android.ide.common.process.ProcessE ...

  3. ios应用view之间数据传递的方式

    对于不同的viewcontroller之间数据的共享和处理 采用代理的方式,子viewcontroller设计代理协议,并定义协议接口,父viewcontroller实现协议接口,实现子视图控制器退出 ...

  4. SSH框架-Caused by: org.hibernate.MappingException: column attribute may not be used together with <column> subelement

    昨晚修改了一些表关系,在相关的hbm.xml文件中做了改动,今天早上起来启动tomcat后,发现项目启动不了,控制台报错: 2015-6-14 9:09:42 org.apache.catalina. ...

  5. error: ‘for’ loop initial declarations are only allowed in

    使用gcc,出现如下错误: thread_join.c:7:5: error: 'for' loop initial declarations are only allowed in C99 mode ...

  6. Serializable在C#中的作用——.net中的对象序列化

    序列化是指将对象实例的状态存储到存储媒体的过程,在此过程中,先将对象的公共字段和私有字段以及类的名称(包括类所在的程序集)转换为字节流,然后再把字节流写入数据流,在随后对对象进行反序列化时,将创建出与 ...

  7. ASP.NET在实际开发中验证码的用法

    在网上有看到很多关于验证码的代码,很多都只是生成一张验证码图片,然而在实际登陆验证模块,验证码要怎么添加进去或者说怎么运用.和实际项目开发中要怎么使用验证码,我自己总结了几点. 一.在实际开发登陆模块 ...

  8. ajax 分页完全代码整理

    /* ajax分页 */ var page_cur = 1; //当前页 var total_num, page_size, page_total_num;//总记录数,每页条数,总页数 functi ...

  9. QTableWidget嵌入QpushButton后定位QpushButton

    问题: 有时候会遇到这样的情况,在QTableWidget中我们需要嵌入一个QpushButton按钮,但是如何确定是哪个Button按下的呢? 解决: 一般地,一个按钮按下后会连接到一槽函数,那么在 ...

  10. js中一些常用的基本函数

    如何使用jquery刷新当前页面下面介绍全页面刷新方法:有时候可能会用到window.location.reload()刷新当前页面.parent.location.reload()刷新父亲对象(用于 ...