有用的HTML+CSS片段
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导航栏自动调间距,HTML CSS导航栏间距[通俗易懂]
- html 简单的table样式
- HTML中document的作用,html中的document对象是什么?一篇文章让你了解document对象
- html css 分页样式,css中分页样式
- html超链接悬浮,下列css代码,能控制鼠标悬浮其上的超链接样式
- js数据转换为html,JavaScript怎么进行类型转换?「建议收藏」
- HTML添加背景图片_html背景图片铺满网页
- Java Web(三)HTML和CSS
- 【说站】吃掉坤坤网页游戏html源码
- 如何用html+css+js做一个跳跃逃离坍塌房子
- 网页内容---HTML后续
- 【CSS教程】紫色渐变登陆布局html+css代码
- WordPress 主题教程 #9:Style.css 和 CSS 介绍
- html设置文本框的大小
- 使用html+css+js实现3D相册详解编程语言
- The Shapes of CSS(css的形状)详解编程语言
- 让Linux灵活运行HTML:简单有效的方法(linux运行html)
- Linux下学习HTML:必备工具推荐(linuxhtml工具)
- HTML <label> 标签
- HTML 表格
- 用javascript动态注释掉HTML代码
- XML中显示HTML的小技巧
- CSS规则层叠的应用css必须要注意的几点
- asp中去除html中style,javascript,css代码
- HTML长文本截取含有HTML代码同样适用的两种方法