HTML、CSS、meta經常使用代碼

時間 2019-11-16

標籤 html css meta 經常使用代碼欄目 HTML 简体版

原文原文鏈接

HTML

一、關閉首個字母大寫（HTML）css

<input type="text" autocapitalize="off"/>

二、僞類:active失效html

body class="" onmousemove="" ontouchstart=""

三、H5頁面模板jquery

<!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"/>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link rel="shortcut icon" href="favicon.ico">
    <title>Title</title>
</head>
<body class="" onmousemove="" ontouchstart="">
    <div class="main"></div>
</body>
</html>

CSS

一、取消 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;}

七、重寫佔位符樣式

input[type=search]::-webkit-input-placeholder{
color: blue;
}

二、禁止選中複製文本（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
}

三、input和button 消除觸摸陰影（CSS）

-webkit-tap-highlight-color: transparent;

四、取消button的默認樣式

-webkit-tap-highlight-color: transparent;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0;
outline: 0;

五、改變webkit表單輸入框placeholder的顏色值

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

六、媒體查詢（CSS）

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

七、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;}

八、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}

經常使用鏈接
用border作三角形
 CSS在線API--1
CSS在線API--2
meta標籤擴展

相關標籤/搜索

經常使用