经常使用整理

时间  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教程