HTML、CSS、meta常用代码
HTML
1、关闭首个字母大写(HTML)
<input type="text" autocapitalize="off"/>
2、伪类:active失效
body class="" onmousemove="" ontouchstart=""
3、H5页面模板
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"> <meta name="description" content=""/> <meta name="keywords" content=""/> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <meta name="format-detection" content="telephone=no, email=no,date=no,address=no"/> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/> <meta name="apple-mobile-web-app-capable" content="yes"/> <title>Title</title> </head> <body class="" onmousemove="" ontouchstart=""> <div class="main"></div> </body> </html>
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) {}
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
<body class="" onmousemove="" ontouchstart=""> <div class="main"> <div class="main-son">顶部</div> </div> <div class="foo">底部--页面没有超出固定在底部,超出则正常显示</div> </body>
css
css reset body,html{height:100%} .main{min-height:100%;margin-bottom:-30px} .main-son{padding-bottom:30px}
相关推荐
opspider 2020-06-28
百年da孤独 2020-03-27
柳永法的个人 2020-02-13
qsdnet我想学编程 2020-01-29
wwwxuewen 2020-01-19
yanweiqi 2019-12-12
WebVincent 2019-11-19
书虫媛 2019-10-29
scdn 2015-06-12
galilajiao00 2015-06-03
ZHANGRENXIANG00 2020-06-28
明瞳 2020-06-10
lanzhusiyu 2020-06-09
HSdiana 2020-06-03
PengQ 2020-05-26
lengyu0 2020-05-20
HSdiana 2020-05-11
haidaoxianzi 2020-04-18