首页 建站教程 WEB前端 正文

常规的HTML+CSS页面模板及代码片段

HTML5页面模板下面是一个常用的HTML5默认模板,就像你用Dreamweaver新建一个HTML文件时的代码,只不过现在这个是HTML5的。代码为了兼容IE浏览器,所以加入Google托管的HTML5shiv文件,也可以下载到本地进行调用。...

HTML5页面模板

下面是一个常用的HTML5默认模板,就像你用Dreamweaver新建一个HTML文件时的代码,只不过现在这个是HTML5的。代码为了兼容IE浏览器,所以加入Google托管的HTML5shiv文件,也可以下载到本地进行调用。

常规的HTML+CSS页面模板及代码片段 html5模板 格式化 清除浮动 渐变 css 特效 css3 图1

<!doctype html>
<html>
<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文件

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清除浮动

.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }

/* IE 6/7 */
.clearfix { zoom: 1; }

CSS3 渐变(CSS3 Gradients)样式格式

以下是比较全面的浏览器兼容的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 Generatorcolorzilla

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

打赏
海报

本文由优美主题原创或收集发布

转载请注明本文地址:https://www.umtheme.com/web/57.html

相关推荐

CSS心形缠绕转动效果

CSS心形缠绕转动效果

CSS心形缠绕转动效果是一种有趣的动画效果,能够给网页带来浪漫而动感的氛围。这个效果将一个心形图案无限旋转,并且同时绕着一个中心点缠绕旋...
WEB前端 2023.09.13 0 2888
制作h5常用的css3动画效果

制作h5常用的css3动画效果

css3提供了许多强大的特效,可以用来实现各种各样的效果,下面是我总结的一些常用的css3效果,有需要的可以直接引用:1.悬浮时放大:.one{transition:All 0.4s&nb...
WEB前端 2023.09.13 1 2834
发布评论

感谢您的支持