html 自动变换调用样式,HTML、CSS、meta常用代码

HTML

1、关闭首个字母大写(HTML)

2、伪类:active失效

body class="" οnmοusemοve="" ontouchstart=""

3、H5页面模板

content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

Title

meta

1、设置页面的编码(HTML)

2、禁止手机放大或缩小(HTML)

content="width=device-width,

initial-scale=1.0,

minimum-scale=1.0,

maximum-scale=1.0,

user-scalable=no"/>"

2、删除默认的苹果工具栏和菜单栏，默认全屏(HTML)

3、启动或禁用自动识别页面中的电话号码，邮箱、地址(HTML)

content="telephone=no, email=no,date=no,address=no"/>

4、文档兼容模式 -- IE以最高级模式渲染文档(HTML)

5、顶部状态栏背景色(HTML)

6、页面的关键字、描述--搜索引擎使用(HTML)

7、winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉

CSS

1、取消 input search 的close(CSS)

input[type=search]::-webkit-search-cancel-button{

-webkit-appearance: none; //此处只是去掉默认的小×

}

::-webkit-search-cancel-button {

display:none;

}

input[type="search"]{-webkit-appearance:none;}

7、重写占位符样式

input[type=search]::-webkit-input-placeholder{

color: blue;

}

2、禁止选中复制文本(CSS)

-webkit-touch-callout: none;

-webkit-user-select: none;

-khtml-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;

[contenteditable=true], input, textarea {

-webkit-touch-callout: auto !important;

-webkit-user-select: auto !important;

-khtml-user-select: auto !important;

-moz-user-select: auto !important;

-ms-user-select: auto !important;

user-select: auto !important

}

3、input和button 消除触摸阴影(CSS)

-webkit-tap-highlight-color: transparent;

4、取消button的默认样式

-webkit-tap-highlight-color: transparent;

-webkit-appearance: none;

-moz-appearance: none;

appearance: none;

border: 0;

outline: 0;

5、改变webkit表单输入框placeholder的颜色值

input::-webkit-input-placeholder{color:#AAAAAA;}

input:focus::-webkit-input-placeholder{color:#EEEEEE;}

6、媒体查询(CSS)

(@media screen and (max-width: 330px) and (min-width: 311px) {}

7、CSS模板

@charset "UTF-8";a,body,button,div,form,h1,h2,h3,h4,h5,h6,header,html,input,nav,p,section,table,textarea，dl,dt,ol,ul,li{margin:0;padding:0;outline:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

body,html{width:100%;font-family:Helvetica,Arial,'Microsoft YaHei',sans-serif;background-color:#f2f2f2;font-size:100px;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}

a,button,input,textarea{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;text-decoration:none;border:0}

dl,dt,ol,ul,li{list-style:none}

[contenteditable=true],input,textarea{-webkit-touch-callout:auto!important;-webkit-user-select:auto!important;-khtml-user-select:auto!important;-moz-user-select:auto!important;-ms-user-select:auto!important;user-select:auto!important}

.ellipsis{overflow:hidden;-ms-text-overflow:ellipsis;white-space:nowrap;text-overflow:ellipsis}

.ellipsis-clamp-3{overflow:hidden;-ms-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}

other

autocapitalize 首字母自动大写

autocorrect 自动改正

autocomplete 自动输入

$(this).data('hello');

$(this).attr('data-hello')

display:flex;flex-direction:column;justify-content:center 通讯录 字母导航样式

e.currentTarget.dataset.xxx与e.target.dataset.xxx

e.currentTarget.options.selectedIndex 与 e.currentTarget.value

http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

.clearfix:after, .clearfix:before{content:"";display:table;}

.clearfix:after{clear:both;}

8、CSS sticky-footer布局

html

顶部

底部--页面没有超出固定在底部，超出则正常显示

css

css reset

body,html{height:100%}

.main{min-height:100%;margin-bottom:-30px}

.main-son{padding-bottom:30px}