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--1
CSS在線API--2
meta標籤擴展

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章