web开发经验推荐-新网站项目中的8个有用片段
作为Web开发人员的工作，往往需要尝试新的学习。某些代码在我们的开发当中是非常头疼的，比方说Clearfix的清除，全CSS3渐变，自定义@ font-face等等这些特殊的样式，因为他们对IE的支持不是很好，每次遇到我们都需要花费很长的时间去思考，调试。
在这篇文章中，我想与大家分享的8个任何Web开发人员可以使用非常有用的代码，。这些代码块包含了典型的HTML5和一些中等水平的CSS3的解决方案为各种网站的布局。你可以将这些片段保存，以便应用到任何的项目当中
1。基本的HTML（HTML5）页面模板
此代码段有明显的DOCTYPE标签，以及一些额外的头部脚本。
这里引用2个在谷歌托管的代码。第一个是jQuery 1.8.2，这是最新版本。然后第二个是包括HTML5shiv的文件，让旧版本的Internet Explorer可以识别新的HTML5元素。
1 <!doctype html> 2 <html lang="en-US"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>Default Page Title</title> 6 <link rel="shortcut icon" href="favicon.ico"> 7 <link rel="icon" href="favicon.ico"> 8 <link rel="stylesheet" type="text/css" href="styles.css"> 9 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 10 <!--[if lt IE 9]> 11 <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> 12 <![endif]--> 13 </head> 14 15 <body> 16 17 </body> 18 </html>
2。Clearfix CSS
大多数Web开发人员了需要知道clearfix对网站布局的影响，并且要添加清除浮动的规则代码。
下面的代码复制你可以复制到任何CSS文件当中，用到在布局中有漂浮的时候使用。
1 .clearfix:before, .container:after { content: ""; display: table; } 2 .clearfix:after { clear: both; } 3 4 /* IE 6/7 */ 5 .clearfix { zoom: 1; }
3。CSS浏览器复位
每个Web浏览器有一套标准规则的样式文件。默认情况下，如果你没有其他的CSS规则，标准字体，边距等样式，他会使用默认的。
通常情况下，Web开发人员要删除这些预设值，使每个浏览器呈现的网页完全一样的。margin和padding是一个很大的区域，
1 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 { 2 margin: 0; 3 padding: 0; 4 border: 0; 5 font-size: 100%; 6 font: inherit; 7 vertical-align: baseline; 8 outline: none; 9 } 10 html { height: 101%; } /* always display scrollbars */ 11 body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, Verdana, sans-serif; } 12 13 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } 14 ol, ul { list-style: none; } 15 16 blockquote, q { quotes: none; } 17 blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } 18 strong { font-weight: bold; } 19 20 input { outline: none; } 21 22 table { border-collapse: collapse; border-spacing: 0; } 23 img { border: 0; max-width: 100%; } 24 25 a { text-decoration: none; } 26 a:hover { text-decoration: underline; }
4。全CSS3渐变（CSS3 Gradients）
下面的代码创建CSS3梯度，兼容几乎所有的Web浏览器。他必须符合CSS前缀替代的渲染引擎！这些代码记住他们很难，你可以复制下来，下次直接使用。
1 background-color: #000; 2 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#000'); 3 background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#000)); 4 background-image: -webkit-linear-gradient(top, #bbb, #000); 5 background-image: -moz-linear-gradient(top, #bbb, #000); 6 background-image: -ms-linear-gradient(top, #bbb, #000); 7 background-image: -o-linear-gradient(top, #bbb, #000); 8 background-image: linear-gradient(top, #bbb, #000);
5。CSS3转换（CSS3 Transforms）
这是一个很少被使用的代码，因为缺乏在旧版本的浏览器支持。但是现在只需要转换短短的几行代码，开发人员就可以使用css渐变来创建丰富的界面。当然，你可以用它生成自定义工具提示和自定义形状。
1 -webkit-transform: perspective(250) rotateX(45deg); 2 -moz-transform: perspective(250) rotateX(45deg); 3 -ms-transform: perspective(250) rotateX(45deg); 4 -o-transform: perspective(250) rotateX(45deg); 5 transform: perspective(250) rotateX(45deg);
6。自定义@ font-face的印刷术
已经有很多的教程，说明如何将您自己的自定义字体，@font-face 能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。【微软的IE 5已经是开始支持这个属性，但是只支持微软自有的.eot (Embedded Open Type) 格式，而其他浏览器直到现在都没有支持这一字体格式。然而，从Safari 3.1开始，网页重构工程师已经可以设置.ttf(TrueType)和.otf(OpenType)两种字体做为自定义字体了。】如果你想包括自己的字体拷贝到您的CSS代码加载一个独特的字体，使用这个代码段。
1 @font-face{ 2 font-family: 'MyFont'; 3 src: url('myfont.eot'); 4 src: url('myfont.eot?#iefix') format('embedded-opentype'), 5 url('myfont.woff') format('woff'), 6 url('myfont.ttf') format('truetype'), 7 url('myfont.svg#webfont') format('svg'); 8 } 9 10 h1 { font-family: 'MyFont', sans-serif; }
请注意，您仍然需要设置任何你需要的元素，采用这种字体的font-family属性。此外，你要提供至少支持所有CSS3基于浏览器的文件支持。理想情况下，你应该附上OTF，TTF，EOT，WOFF和SVG字体。
有一个奇妙的工具在线网站Font2Web，这实际上可以为你做这种转换。这个网站被限制为每天请求次数，但它是一个最好的免费解决方案来生成您的字体的副本。
7。为响应布局的HTML Meta标签（移动网站建立所需要的标签）
移动的响应性的Web设计已经成为非常流行。现在，你只需要加入下面的标签，就能够支持移动浏览器，您可以添加到您的文档<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">
viewport的视口标签是唯一的一个需要响应的布局标签。这将在所有屏幕上设置一个1×1的纵横比。智能手机的浏览器，可以使网站观看全视图，并允许用户放大，这将删除默认的功能。其他两个标签中支持移动IE和较旧的智能手机浏览器，但对移动布局不会造成影响
8。HTML5嵌入式媒体（HTML5 Embedded Media）
新的<video>，<AUDIO>标签对经常与数字媒体。图像开发的人员来说提供了最直接的方便
1 <video poster="images/preview.png" width="1280" height="720" controls="controls" preload="none"> 2 <source src="media/video.mp4" type="video/mp4"></source> 3 <source src="media/video.webm" type="video/webm"></source> 4 <source src="media/video.ogg" type="video/ogg"></source> 5 </video> 6 7 <audio controls="controls" preload="none"> 8 <source src="music.ogg" type="audio/ogg"> 9 <source src="music.mp3" type="audio/mpeg"> 10 </audio>
结论
在这篇文章中，我提出这个集合给Web开发人员构建一个非常基本的入门代码。这是一些令人惊异的解决方案，用于创建杀手HTML5/CSS3网站。
你可以随意复制和分享这篇文章在网络上的任何地方。此外，您应该备份这些代码片段，下次遇到的时候能够及时拿出来使用
ddfd
