css公共样式 | 标签元素初始化
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" 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>
css公共样式 | 标签元素初始化的更多相关文章
- CSS公共样式模版
CSS文件命名为global.css,一般此CSS文件是用于装全站主要框架CSS样式代码和初始化的CSS样式. 通常会放初始化CSS代码如下: body, div, ul, ol, dl, dt, d ...
- css公共样式,初始化
/* CSS Document */ body, button, select, textarea, input, label, option, fieldset, legend{font-famil ...
- 项目初始化CSS公共样式
/*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document =========== ...
- CSS 公共样式分享
global.css | reset.css(格式化样式) common.css(公共组件样式) layout.css(当前页面样式) 清除全站所有页面的浏览器默认样式,保证在初始样式在所有浏览器下一 ...
- CSS 公共样式
global.css | reset.css(格式化样式) common.css(公共组件样式) layout.css(当前页面样式) 清除全站所有页面的浏览器默认样式,保证在初始样式在所有浏览器下一 ...
- css公共样式
/* ==================================================================== @ set browser style ======== ...
- 利用link标签的disabed属性大面积的对其他标签元素的CSS样式进行替换操作
由于平时对元素样式的控制基本上只是3,4个,所以一般用Jquery的时候直接使用$(element).css();这个方法,或者使用$(element).addClass()方法完成样式操作.对于小范 ...
- CSS.02 -- 样式表 及标签分类(块、行、行内块元素)、CSS三大特性、背景属性
样式表书写位置 内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...
- 从零开始学习前端开发 — 9、标签嵌套规则及CSS常用样式覆盖
1. 块级元素可以包含内联元素或某些块级元素,但内联元素却不能包含块级元素,它只能包含其它的内联元素: <div><h1></h1><p></p& ...
随机推荐
- HDU 3338:Kakuro Extension(脑洞大开的网络流)
http://acm.hdu.edu.cn/showproblem.php?pid=3338 题意:在一个n*m的地图里面,有黑方块和白方块,黑方块可能是“XXXXXXX”或者“YYY/YYY”,这里 ...
- zeroMQ 4 java
自己最开始是在cloud foundry中接触过消息服务器(nats),或者说是消息中间件,也算是初步知道了一个消息服务器对于分布式的网络系统的重要性,后来自己也曾想过在一些项目中使用它,尤其是在一些 ...
- 阿里云域名的ssl证书申请与腾讯服务器域名的证书安装
阿里云域名中的SSL证书申请,腾讯云服务器中的证书安装: 因为公司的与域名都在阿里云上面,服务器却用的是腾讯云的.记得前2年用阿里云管理平台的时候,域名的SSL证书都很好找,也许是长时间不用,找SSL ...
- 走近Java之幕后的String
前几天,有个同事问了我一个表面看起来显而易见的问题,是关于String的,我们一起来看一下(如果有说的不正确的地方,欢迎大家指正). java中,字面量在编译期计算,并且String字面量作为常量,存 ...
- 学习 Vue ,从入门到放弃
最近项目刚完成,手上工作稍微轻松些,准备储备下技术,为未来挑战做好准备. 之前项目用的较多的是angulajs,不过版本较老,还停留在1.5x系,虽然结合了webpack,es2015等前沿技术,但理 ...
- MyBatis:choose标签的用法
<!-- 4.2 choose用法 需求: 在已有的sys_user表中,除了主键id外,我们认为user_name也是唯一的, 所有的用户名都不可以重复.现在进行如下查询:当参数id有值的时候 ...
- [opengl] 画一个可移动的自行车 二维几何变换(平移、旋转、缩放)
#include <cmath> #include "glut.h" #include "iostream" using namespace std ...
- c实现哲学家进餐问题。WINDOWS下。
// 解决哲学家就餐问题// 每个哲学家可用一个线程来模拟.// 设有5个哲学家,5只筷子,每个哲学家吃饭时间为一个随机值,哲学家吃饭后的思考时间也是一个随机值.#include <Window ...
- hdu6383 p1m2(二分答案)
p1m2 题目传送门 解题思路 因为x都是非负数,且每一次操作其实就是把总和减少了1,所以可以得出最后都可以到达稳定.最后稳定的数的下界是0,最大也不会超过其初始数的最大值,所以可以用二分答案来求解. ...
- TP 5.0 架构 简介
TP 5.0 架构 简介 thinkphp 5.0 为API开发而设计的的高性能框架,是与以往thinkphp5.0以下版本大不相同的新型框架,病对以颠覆和重构版本,采用全新的架构思想,引入了更多的P ...