經常使用整理

時間  2019-12-06
標籤 經常 使用 整理 简体版
原文   原文鏈接

hey ~ 我是肥陽，後期會持續更新，請記得點贊支持喲
此文爲平常項目的所用整理，互相學習，多多指教javascript

  • HTML 模板

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>文檔標題</title>
<!--[if lt IE 9]>
    <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
複製代碼

  • H5新標籤

<header>頭部</header>
<nav>導航</nav>
<footer>底部</footer>
<section>區域</section>
<main>主體部分</main>
<article>文章</article>
<aside>側邊導航、廣告位</aside>
<mark>高亮選中</mark>
<time>時間</time>
<progress max="100" value="50"></progress> 滾動條
複製代碼

  • meta

優先使用最新版本 IE 和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
禁止ios自動識別手機號
<meta name="format-detection" content="telephone=no">
禁止用戶對頁面進行縮放
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
複製代碼

  • flex 平均分佈且能夠換行

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
ul{
width: 100%;
display: flex;
flex-wrap: wrap;
li {
flex: 1;
width: 25%;
min-width: 25%;（關鍵代碼）
max-width: 25%;（關鍵代碼）
｝
複製代碼

  • 三角形

<div class="triangle bottom"></div>
<div class="triangle top"></div>
<div class="triangle left"></div>
<div class="triangle right"></div>

.triangle{
display:inline-block;
border:solid 10px transparent;
}
/*下*/
.triangle.bottom{
border-top-color: green;
}
/*上*/
.triangle.top{
border-bottom-color: green;
}
/*左*/
.triangle.left{
border-right-color: green;
}
/*右*/
.triangle.right{
border-left-color: green;
}

複製代碼

  • 強制換行

{
width: 100%;（兼容IOS必備條件）
white-space: pre-wrap;
word-wrap: break-word;
word-break: break-all;
}
複製代碼

  • 兩端對齊

{
text-align: justify;
text-align-last: justify; (最後一行若不滿一行也兩端對齊)
}
複製代碼

  • font-family 經常使用字體

font-family: -apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
複製代碼

  • media適配

@media screen and (min-width: 1200px) { css-code; }
@media screen and(min-width: 960px) and (max-width: 1199px) { css-code;}
@media screen and(min-width: 768px) and (max-width: 959px) { css-code; }
@media screen and(min-width: 480px) and (max-width:767px) { css-code; }
@media screen and (max-width: 479px) { css-code; }
複製代碼

  • 兼容IOS溢出沒法滾動（設置爲彈性滾動）

{
overflow-y:auto; 
-webkit-overflow-scrolling : touch;
}
複製代碼

  • box-shadow

box-shadow: {20px 20px 10px 0px rgba(0,0,0,0.5) inset}
box-shadow: {x軸上陰影的位置 y軸上陰影的位置 隱形的模糊半徑 陰影的尺寸 顏色值 位置}
複製代碼

  • 兼容IOS input、select等設置爲只讀後仍獲取焦點的問題

input：{
outline:none;
user-select:none;
-webkit-user-select:none;
}
複製代碼

  • 禁止文字選擇user-select應用

body{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
複製代碼

  • 移動端點擊元素去除默認邊框

-webkit-tap-highlight-color: rgba(255,255,255,0);
複製代碼

  • input placeholder修改默認設置

input::-webkit-input-placeholder{
color: green;
background-color: #F9F7F7;
font-size: 14px;
}
input::-moz-input-placeholder{
color: green;
background-color: #F9F7F7;
font-size: 14px;
}
input::-ms-input-placeholder{
color: green;
background-color: #F9F7F7;
font-size: 14px;
}
複製代碼

  • border-bottom 1px 安卓/IOS 兼容寫法

div {
position:relative
};
div:after{
display: block;
content: " ";
box-sizing: border-box;
border-bottom: 1px solid #d7d7d7;
-webkit-transform: scaleY(0.5);
-ms-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
複製代碼

  • 背景過渡色

background-image: linear-gradient(to top,#ff6e15 0,#ff3800 100%);
background-image: -webkit-linear-gradient(linear,left bottom, left top,color-stop(0, #ff3800),to(#ff3800));
background-image: -o-linear-gradient(linear,left bottom, left top,color-stop(0, #ff3800),to(#ff3800));
background-image: -moz-linear-gradient(linear,left bottom, left top,color-stop(0, #ff3800),to(#ff3800));
background-repeat: repeat-x;
複製代碼

  • 清除浮動

.clearfix{
zoom: 1;
}
.clearfix:after{
display:block;
content:'';
clear:both;
visibility:hidden;
height:0;
}
複製代碼

  • 垂直水平居中

絕對定位方式且已知寬高
{
position: absolute;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -70px;
width: 140px;
height: 60px;
}

絕對定位 ＋ 未知寬高 ＋ translate
{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}

未知寬高 ＋ flex 輕鬆搞定水平垂直居中
{
display: flex;
align-items: center;
justify-content: center;
}
複製代碼

  • 文本溢出顯示省略號

單行文本 ＋ 寬度固定
{
width:100px;//寬度固定是必要條件
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

多行以及移動端顯示 ＋ 寬度不固定
{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}

微信端不兼容時，添加
{
line-height:16px;
height:48px;
}
（高度可自定設置，此處height:48px;爲3行時的高度）
複製代碼

  • 製造文本的模糊效果

{
color: transparent;
text-shadow:0 0 2px rgba(0,0,0,.5);
}
複製代碼

  • 簡潔loading動畫效果 【打點動畫】

<div class="loading"></div>

.loading:after{
display: inline-block;
overflow: hidden;
vertical-align: bottom;
content: '\2026';
-webkit-animation: ellipsis 2s infinite;
}
@-webkit-keyframes ellipsis{
from{
width: 2px;
}
to{
width: 15px;
}
}
複製代碼

  • 鼠標指針放在一個元素邊界範圍內時所用的光標形狀

cursor:default;    默認光標（一般是一個箭頭）
cursor:auto;       默認。瀏覽器設置的光標。
cursor:crosshair;  光標呈現爲十字線。
cursor:pointer;    光標呈現爲指示連接的指針（一隻手）
cursor:move;       此光標指示某對象可被移動。
cursor:e-resize;   此光標指示矩形框的邊緣可被向右（東）移動。
cursor:ne-resize;  此光標指示矩形框的邊緣可被向上及向右移動（北/東）。
cursor:nw-resize;  此光標指示矩形框的邊緣可被向上及向左移動（北/西）。
cursor:n-resize;   此光標指示矩形框的邊緣可被向上（北）移動。
cursor:se-resize;  此光標指示矩形框的邊緣可被向下及向右移動（南/東）。
cursor:sw-resize;  此光標指示矩形框的邊緣可被向下及向左移動（南/西）。
cursor:s-resize;   此光標指示矩形框的邊緣可被向下移動（南）。
cursor:w-resize;   此光標指示矩形框的邊緣可被向左移動（西）。
cursor:text;       此光標指示文本。
cursor:wait;       此光標指示程序正忙（一般是一隻表或沙漏）。
cursor:help;       此光標指示可用的幫助（一般是一個問號或一個氣球）。
複製代碼

  • 修改鼠標選中時默認的顏色

注意：只能修改兩個屬性: 一、字體顏色; 二、選中背景顏色
p::selection{
color: green;
background-color: pink;
}
p::-moz-selection{
color: green;
background-color: pink;
}
複製代碼

  • 文本首字下沉

<p>文本</p>
p:first-letter{
float:left;
color:green;
font-size:30px;
}
複製代碼

  • 圖片加濾鏡

<img src="" width="" height="" alt="">

filter: grayscale(1); /*灰度*/
filter: sepia(1);/*褐色*/
filter: saturate(500%);/*飽和度*/
filter: hue-rotate(180deg);/*色相反轉*/
filter: invert(1);/*反色*/
filter: opacity(.3);/*透明度*/
filter: brightness(250%);/*亮度*/
filter: contrast(200%) drop-shadow(2px 3px 5px rgba(0,0,0,.5));/*對比度*/
filter: blur(2px);/*模糊度*/
filter: drop-shadow(2px 3px 5px rgba(0,0,0,.5));/*陰影*/
複製代碼

  • CSS3動畫

<div class="react"></div>
.react {
position: absolute;
width: 100px;
height: 100px;
background: #f00;
animation: react-run 3s linear 0s infinite;
}
@keyframes react-run {
0% { top: 0px;left: 0px;}
25% {top: 0px;left: 200px;}
50% {top: 200px;left: 200px;}
75% {top: 200px;left: 0px;}
100% {top: 0px;left: 0px;}
}
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程