乐趣区

HTML、CSS、meta常用代码

HTML
1、关闭首个字母大写(HTML)
<input type=”text” autocapitalize=”off”/>
2、伪类:active 失效
body class=”” onmousemove=”” ontouchstart=””
meta
1、设置页面的编码(HTML)
<meta charset=”UTF-8″>
2、禁止手机放大或缩小(HTML)
<meta name=”viewport”
content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”/>”
2、删除默认的苹果工具栏和菜单栏,默认全屏(HTML)
<meta name=”apple-mobile-web-app-capable” content=”yes”/>
3、启动或禁用自动识别页面中的电话号码,邮箱、地址(HTML)
<meta name=”format-detection”
content=”telephone=no, email=no,date=no,address=no”/>
4、文档兼容模式 — IE 以最高级模式渲染文档(HTML)
<meta http-equiv=”X-UA-Compatible” content=”IE=Edge, chrome=1″>
5、顶部状态栏背景色(HTML)
<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent”/>

6、页面的关键字、描述 – 搜索引擎使用(HTML)
<meta name=”description” content=””/>
<meta name=”keywords” content=””/>
7、winphone 系统 a、input 标签被点击时产生的半透明灰色背景怎么去掉
<meta name=”msapplication-tap-highlight” content=”no”>

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) {}
常用连接用 border 做三角形 CSS 在线 API–1CSS 在线 API–2meta 标签扩展

退出移动版