首页 建站教程 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

打赏
海报

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

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

相关推荐

纯css实现列表自动添加序号

纯css实现列表自动添加序号

我们写样式代码时偶尔会用到数字排行榜的设计,按序号罗列排名,例如:优美mipCms主题中的热门/热评排行:如果用li元素配合list-s...
WEB前端 2021.07.18 0 109
Js简单实现复制指定内容到粘贴板

Js简单实现复制指定内容到粘贴板

通过以下代码,点击按钮可直接把input或者textarea里的值复制到粘贴板里,此方法不依赖jquery框架,实现简单粗暴希望对大家有所帮助。<!DOCTYPE html>...
WEB前端 2021.04.14 0 411
Js实现双击鼠标自动滚动页面效果

Js实现双击鼠标自动滚动页面效果

主要介绍了Js实现双击鼠标自动滚动页面的示例代码,在特定的页面也许可以用的的上例如小说或一些资讯类型的网站,需要的朋友可以试一试。操作比较简单把以下代码加在网站的页面中,就可以实现双击鼠标实现自动滚屏...
WEB前端 2021.03.15 0 507
发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
感谢您的支持