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

相关推荐

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

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

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

WEB前端 2021.03.15 0 145

如何通过css3给自己网站logo添加闪光效果

如何通过css3给自己网站logo添加闪光效果

通过css3给自己网站logo添加闪光效果,感觉效果还不错,可以提升用户对网站或企业的品牌印象。具体实现方法如下:找到自己网站logo外面层的盒子(元素),并给该元素添加以下css代码/*首先我们需...

WEB前端 2021.01.14 2 512

纯css简单实现角标样式

纯css简单实现角标样式

纯css实现角标效果,通常在置顶,推荐,热门等需要特殊标注的场景中可以应用到,这里主要用到transform:rotate(-30deg...

WEB前端 2020.10.16 0 1379

发布评论

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi

感谢您的支持