css公共样式 | 标签元素初始化

2023-11-07 19:48•css•阅读 2361

PC参考样式1：

@charset "utf-8";
html{background:#fff;overflow:auto;}
body{min-width:1200px;font:12px/18px "Microsoft Yahei";font-weight:lighter;color:#333; -webkit-font-smoothing: antialiased; }
a{color:#333; text-decoration:none; cursor:pointer; outline: 0 none;}
a:hover{ text-decoration:none;color:#ff4f20;}
a:focus{-moz-outline-style:none; border:0px;blr:expression(this.onFocus=this.blur());}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,p,blockquote,th,td{margin:0; padding:0;}
header,footer,article,aside,section,nav,menu,hgroup,details,dialog,figure,figcaption{display:block}
ol,li,ul,dl,dt,dd{list-style:none;}
fieldset,img {border:0}
button,submit,input,select { vertical-align:middle;}
button,submit { cursor:pointer;}
h1,h2,h3,h4,h5,h6{font-size:inherit; font-weight:lighter;}
table{border-collapse:collapse; border-spacing:0;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
select,button{font-family:inherit; font-size:inherit; font-weight:inherit; outline-style:none; outline-width:0pt; padding: 0; margin: 0;}
b,em,i{display:inline-block; font-weight:normal; font-style:normal;}
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden;} .clearfix{ zoom:1;}
.container { width:1200px; position:relative; margin:0 auto;}
.fl{float:left;}
.fr{float:right;}

PC参考样式2：

*{ 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-transition:background 0.5s linear;}
em, i{font-style: normal;}
ul, ol, li{list-style: none;}
img{ border:none;vertical-align:middle;}
input,select,textarea{outline:none;border:none;background:none;}
textarea{resize:none;}
p{line-height:22px;}
.fl{float: left;}
.fr{float: right;}
.clear{ clear:both; height:0px; width:100%; overflow:hidden;}
.position{position:relative;}

移动端参考样式：

/* CSS Document */
*{margin:0;padding:0;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-text-size-adjust:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;font-family:Arial, "微软雅黑";}
img{border:none;max-width:100%;vertical-align:middle;}
body,p,form,input,button,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6{margin:0;padding:0;list-style:none;overflow-x:hidden}
h1,h2,h3,h4,h5,h6{font-size:100%;}
input,textarea{-webkit-user-select:text;-ms-user-select:text;user-select:text;-webkit-appearance:none;font-size:1em;line-height:1.5em;}
table{border-collapse:collapse;}
input,select,textarea{outline:none;border:none;background:none;}
a{outline:0;cursor:pointer;*star:expression(this.onbanner=this.blur());}
a:link,a:active{text-decoration:none;}
a:visited{text-decoration:none;}
a:hover{color:#f00;text-decoration:underline;}
a{text-decoration:none;-webkit-touch-callout:none;}
em,i{font-style:normal;}
li,ol{list-style:none;}
html{font-size:10px;}
.clear{clear:both;height:0;font-size:0;line-height:0;visibility:hidden; overflow:hidden;} 
.fl{float:left;}
.fr{float:right;}
body{ margin:0 auto;max-width:640px; min-width:320px;color:#555; padding-bottom:8%;background:#fef9f1;height:100%;}
 
 
底部
@media screen and (max-width:320px){body,input,select{font-size:10px}}
@media screen and (min-width:320px){body,input,select{font-size:11.25px}}
@media screen and (min-width:400px){body,input,select{font-size:12.5px}}
@media screen and (min-width:480px){body,input,select{font-size:13.75px}}
@media screen and (min-width:560px){body,input,select{font-size:15px}}
@media screen and (min-width:600px){body,input,select{font-size:16.25px}}
@media screen and (min-width:640px){body,input,select{font-size:18px}}
 
 
2.在HTML源文件中的头部head加入：
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes">

/************************************************************************************************************************************************************************************************/

各大网站初始化样式参考：

雅虎工程师提供的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" >
    <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>

上一篇 »Spring代码分析一:加载与初始化
下一篇 »12Java基础_数组定义格式/动态初始化/静态初始化

css公共样式 | 标签元素初始化

相关推荐

css 初始化样式

webpack前置知识2，JavaScript项目初始化

Java 初始化

Linux启动初始化配置文件

JAVA中初始化及默认值，包装类与基本类型

css初始化，淘宝

html初始化

java数组定义及初始化+print打印问题