通用初始化样式 / 憋错料

通用初始化样式


通用初始化样式
-------

body{ margin: 0;padding: 0;font-family: "微软雅黑";overflow: hidden;}
body,html{-webkit-text-size-adjust: none;width: 100%;height: 100%;}
*{text-decoration: none;list-style: none;}
img{border: 0px;}
ul,li,dl,dd,dt,p,ol,h1,h2,h3,h4,h5{font-size: 12px;font-weight: 100;padding: 0;margin: 0;}
.wrap{margin: 0 auto;}
.fl{float: left;}
.fr{float: right;}
.index{overflow: hidden;}
.clr{clear:both; height:0px; width:100%; font-size:1px; line-height:0px; visibility:hidden; overflow:hidden;}
.pointer{cursor:pointer;}
a,input,button{ outline:none; }
::-moz-focus-inner{border:0px;}
/*a:link {color:#0f0;text-decoration:none;}
a:visited {color: #FFFF00; text-decoration:none;}
a:hover {color: #00FF00; text-decoration:underline;}
a:active {color: #0000FF; text-decoration:underline;}*/
a{color: #000;}
.wrapper{clear: both;width: 100%;}
table { border-collapse:collapse; }
word-break:break-all /*文字换行*/
/*white-space:nowrap 文字不换行*/

/*默认滚动条样式修改ie9 google Firefox 等高版本浏览器有效*/
/*::selection {background: #D03333;color: white;text-shadow: none;}
::-webkit-scrollbar-track-piece{width:10px;background-color:#f2f2f2}
::-webkit-scrollbar{width:10px;height:6px}
::-webkit-scrollbar-thumb{height:50px;background-color:rgba(0,0,0,.3);}
::-webkit-scrollbar-thumb:hover{background:#cc0000}*/

/*渐变*/
/*background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ff4f02), color-stop(1, #8f2c00)); Saf4+, Chrome
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#c6ff00‘, endColorstr=‘#538300‘, GradientType=‘0‘); IE*/

另一种通用化样式

/* CSS Document */
html, body, div, span, object, iframe,h1, h2,
h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn,
em, img, ins,kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd,
ol, ul, li,fieldset, form, label, legend,table, caption, tbody,
tfoot,thead,tr, th, td,article, aside, canvas, details, figcaption,
figure, footer, header, hgroup, menu, nav, section, summary,time, mark,
audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    outline-style:none;/*FF*/
}

body {
    line-height:1;
}

a{
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;

}
a:hover,a:focus{
    text-decoration:none;
    bblr:expression(this.onFocus=this.blur());/*IE*/
    outline-style:none;/*FF*/
    }
table {
    border-collapse:collapse;
    border-spacing:0;
}

input, select {
    vertical-align:middle;
}

/*css为clearfix，清除浮动*/
.clearfix::before,
.clearfix::after{
    content: "";
    height: 0;
    line-height: 0;
    display: block;
    visibility: hidden;
    clear: both;
}
.clearfix:after{clear:both;}
.clearfix{
    *zoom:1;/*IE/7/6*/
}


雅虎工程师提供的CSS初始化示例代码
------------------

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin:0; padding:0; }
body { background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; }
td,th,caption { font-size:14px; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-size:100%; }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal;}
a { color:#555; text-decoration:none; }
a:hover { text-decoration:underline; }
img { border:none; }
ol,ul,li { list-style:none; }
input, textarea, select, button { font:14px Verdana,Helvetica,Arial,sans-serif; }
table { border-collapse:collapse; }
html {overflow-y: scroll;} 

.clearfix:after {content: "."; display: block; height:0; clear:both; visibility: hidden;}
.clearfix { *zoom:1; }

腾讯官网 样式初始化
----------

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word} 

新浪官网 样式初始化
----------

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div{margin:0;padding:0;border:0;}
body{background:#fff;color:#333;font-size:12px; margin-top:5px;font-family:"SimSun","宋体","Arial Narrow";} 

ul,ol{list-style-type:none;}
select,input,img,select{vertical-align:middle;} 

a{text-decoration:none;}
a:link{color:#009;}
a:visited{color:#800080;}
a:hover,a:active,a:focus{color:#c00;text-decoration:underline;} 

淘宝官网 样式初始化
----------

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
网易官网 样式初始化
html {overflow-y:scroll;}
body {margin:0; padding:29px00; font:12px"\5B8B\4F53",sans-serif;background:#ffffff;}
div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,p{padding:0; margin:0;}
table,td,tr,th{font-size:12px;}
li{list-style-type:none;}
img{vertical-align:top;border:0;}
ol,ul {list-style:none;}
h1,h2,h3,h4,h5,h6{font-size:12px; font-weight:normal;}
address,cite,code,em,th {font-weight:normal; font-style:normal;} 

下面顺便给出admin10000.com 的html模板，用于每次新开发页面使用。
-----------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-cn">
    <head>
    　　<title>网站标题 - Admin10000.com </title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="Content-Language" content="zh-CN" />
        <meta name="Author" content="网页作者" />
        <meta name="Copyright" content="网站版权" />
        <meta name="keywords" content="网站关键字" />
        <meta name="description" content="网站描述" />
        <link rel="Shortcut Icon" href="网站.ico图标路径" />
        <link type="text/css" rel="stylesheet" href="CSS文件路径" />
        <script type="text/javascript" src="JS文件路径"></script>
    </head>
    <body>

    </body>
</html>

原文地址：https://www.cnblogs.com/lsongyang/p/9281342.html

时间： 2024-10-11 01:07:17

通用初始化样式的相关文章

css通用初始化样式

body{ margin: 0;padding: 0;font-family: "微软雅黑";overflow: hidden;}body,html{-webkit-text-size-adjust: none;width: 100%;height: 100%;}*{text-decoration: none;list-style: none;}img{border: 0px;}ul,li,dl,dd,dt,p,ol,h1,h2,h3,h4,h5{font-size: 12px;fon

recent.css常用的页面初始化样式

通用table样式

<html> <head> <title>通用table样式</title> <style type="text/css"> body, table { font-size: 12px; } table { table-layout: fixed; empty-cells: show; border-collapse: collapse; margin: 0 auto; } td { height: 30px; } h1, h

0、初始化样式

初始化样式,非原创,仅供个人学习参考<link href="base.css"> /* CSS Document */html, body, div, span, object, iframe,h1, h2,h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn,em, img, ins,kbd, q, samp,small, strong, sub, sup, var,b, i,dl, d

通用 css 样式库 rich.css

日期: 25 Dec 2018 ?? rich.css 用创新的方式,实现了动态的,可定制的,全覆盖的 css 样式库.无需开发 css 样式,也无需在 css html js 间切换,实现了样表库的名称编程. 传统的方式与问题 web base app 样式开发主要依赖 css 实现,css 的技术和高度定制要求开发者,必须有效组织大量的 css 文件和设计 css 对象.在页面众多的大型项目上,不得不编写大量 css 类,或者根据元素 id 定制 css 样式,甚至用内联在 html 上的样

CSS初始化样式

为什么要初始化CSS? CSS初始化是指重设浏览器的样式.不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一.如果没对CSS初始化往往会出现浏览器之间的页面差异.每次新开发网站或新网页时候通过初始化CSS样式的属性,为我们将用到的CSS或html标签更加方便准确,使得我们开发网页内容时更加方便简洁,同时减少CSS代码量,节约网页下载时间. CSS初始化示例代码 /* css reset www.admin10000.com */ body,div,dl,dt,dd,u

PC端和移动端网页的初始化样式

pc端样式重置 *{ margin:0; padding:0;} body{ font-size:14px; font-family:微软雅黑;font-style:normal;} a{ text-decoration:none} a,a:hover{ transition:background 0.5s linear;-webkit-transition:background 0.5s linear;-moz-transition:background 0.5s linear;-o-tra

目前公司用到的PC端和移动端的初始化样式

基础的页面初始化样式

/* 清除IE的叉号和眼睛 */ ::-ms-clear, ::-ms-reveal{display: none;} html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,input,form,textarea,p,th,td,hr,button{ margin:0; padding:0; border: none; box-sizing: border-box; outline: none; } table{ border-collapse:col