移动端公共样式

 对于刚接触html,css的童鞋来说，这个无非给你入门提供了一些帮助。往后涉及到框架，代码压缩什么的，框架里面基本包括这些，so就不需要这个了。

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,a,abbr,address,big,em,img,q,small,strike,strong,
sub,sup,tt,var,i,dl,dt,dd,ol,ul,li,form,fieldset,label,table,caption,tbody,thead,tfoot,tr,th,td,article,
aside,canvas,details,figure,figcaption,header,footer,hgroup,menu,nav,output,section,time,mark,audio,
video,input,select,button{margin:0;padding:0;border:0;font-family:'微软雅黑',Arial;font-size:16px;}
/*去除默认样式*/
ul,ol,li{list-style:none;}
/*表格边框合并，边框距零*/
table{border-collapse:collapse;border-spacing:0;}
/*继承父元素的字体系列样式*/
input,select,textarea,button{font-family:inherit;}
/*清除浮动*/
.fl{float:left;}
.fr{float:right;}
.cf{zoom:1;}
.cf:after{content:"";display:table;clear:both;overflow:hidden;}
/*a链接*/
a{text-decoration:none;color:#000;}
a:hover{text-decoration:none;}
/*去除点击高亮效果*/
a,button,input,select,img,label{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;outline:medium none;}
input::-moz-focus-inner{border:none;padding:0;}
select, input{vertical-align:middle;}
/*去掉苹果的默认UI来渲染按钮*/
input[type="submit"],input[type="reset"],input[type="button"],button,select{-webkit-appearance:none;}
/*placeholder文本颜色*/
input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{
color:#ccc;
}
input:-moz-placeholder,textarea:-moz-placeholder{
color:#ccc;
}
/*html5标签*/
header,footer,section,article,aside,nav,figure{display:block;}
/*长英文字母 数字 换行*/
p{word-break:break-all;word-wrap:break-word;}
/*去除默认样式*/
h1,h2,h3,h4,h5,h6,strong,i,em,address, caption, cite, code, dfn, th, var{font-weight:normal;font-style:normal;}
fieldset, img{border:none;display:block;}
/*去除长按a链接弹框*/
html,body{-webkit-touch-callout:none;}
/* 设置为100是方便用rem单位计算 */
@media screen and (max-width: 319px) {
    html {
        /*font-size: 85.33333px;*/
        font-size: 90px;
    }
}
@media screen and (min-width: 320px) and (max-width: 359px) {
    html {
        //font-size: 85.33333px;
        font-size: 90px;
    }
}
@media screen and (min-width: 360px) and (max-width: 374px) {
    html {
        font-size: 96px;
    }
}
@media screen and (min-width: 375px) and (max-width: 383px) {
    html {
        font-size: 100px;
    }
}
@media screen and (min-width: 384px) and (max-width: 399px) {
    html {
        font-size: 102.4px;
    }
}
@media screen and (min-width: 400px) and (max-width: 413px) {
    html {
        font-size: 106.66667px;
    }
}
@media screen and (min-width: 414px) {
    html {
        font-size: 110.4px;
    }
}
@media screen and (min-width: 600px) {
    html {
        font-size: 120px;
    }
}

<object> 标签用于包含对象，比如图像、音频、视频、Java applets、ActiveX、PDF 以及 Flash;

iframe一般用来包含别的页面，例如我们可以在我们自己的网站页面加载别人网站的内容，为了更好的效果，可能需要使iframe透明效果.

iframe透明主要是使用了 allowtransparency="true" style="background-color=transparent" ;

<abbr> 标签指示简称或缩写，比如 "WWW" 或 "NATO",<abbr title="xxxxxxx">xxx</abbr>;

<address> 标签定义文档或文章的作者/拥有者的联系信息。如果 <address> 元素位于 <body> 元素内，则它表示文档联系信息。如果 <address> 元素位于 <article> 元素内，则它表示文章的联系信息。

<address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行；

浏览器显示包含在 <big> 标签和其相应的 </big> 标签之间的文字时，其字体比周围的文字要大一号。但是，如果文字已经是最大号字体，这个 <big> 标签将不起任何作用。更妙的是，可以嵌套 <big> 标签来放大文本。每一个 <big> 标签都可以使字体大一号，直到上限 7 号文本，正如字体模型所定义的那样。但是使用 <big> 标签的时候还是要小心，因为浏览器总是很宽大地试图去理解各种标签，对于那些不支持 <big> 标签的浏览器来说，它经常将其认为是粗体字标签;相反；

<q>标签定义短的引用；

<strike> 标签可定义加删除线文本定义；

 标签可定义下标文本。包含在 标签和其结束标签 中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的;下标。

posted @ 2015-06-24 16:53 xqr_scl 阅读(3347) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

xqr_scl

移动端公共样式

公告