HTML、CSS、meta共通コード
HTML
1、最初の大文字を閉じる(HTML)
2、疑似類:active失効
body class="" onmousemove="" ontouchstart=""
3、H 5ページテンプレート
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)を起動または無効にする
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}
常用接続borderで三角形を作るCSSオンラインAPI-1CSSオンラインAPI-2metaラベル拡張