Html5+CSS+Less
html开发手册
文章目录
- html开发手册
-
- 一、html
- 二、标签
-
- 1、必须标签
- 2、head内部标签
- 3、body内部标签
-
- 1、基础标签
- 2、列表标签
- 3、表格
- 4、表单
- 5、边框文字
- 6、输入框
- 7、下拉框
- 8、文本框
- 9、video和audio
- 10、track
- 11、滚动
- 12、iframe
- 13、样式标签
- 14、新标签
- 三、选择器
- 四、样式
-
- 1、字体font
- 2、字段text
- 3、换行(空白操作)
- 4、强行换行
- 5、省略号
- 6、字体问题
- 7、列表ul
- 8、表格table
- 9、内外边距
- 10、宽高
- 11、边框border
- 12、轮廓outline
- 13、标准盒宽/高宽
- 14、浮动设置
- 15、背景设置
- 16、透明度/隐藏
- 17、盒阴影
- 18、溢出overflow
- 19、滚动条样式
- 20、⭐定位
- 21、鼠标指针
- 22、多列
- 23、伪类元素
- 24、盒display
- 25、弹性盒
-
- 1、设置
- 2、弹性盒样式
- 3、灵活元素设置
- 4、弹性盒应用
- 26、grid网格
-
- 1、设置为网格布局
- 2、设置固定列宽，行高
- 3、排列方式
- 4、自适应列宽，行高
- 5、最小最大值
- 6、子元素占位设置
- 7、层级
- 8、间隔
- 9、复合：
- 10、了解：
- 27、移动端布局
- 28、媒体查询
- 29、vw
- 30、bfc布局
-
- 1、描述：
- 2、作用：
- 1、bfc的触发规则
- 2、触发条件：
- 3、资料
- 4、作用效果：
- 31、原生icon
- 32、可继承属性
- 33、input框样式
- 34、文本框样式
- 五、函数
-
- 1、`attr()`函数
- 2、`calc()`函数
- 3、`repeat`函数
- 4、`cubic-bezier()`函数
- 5、`linear-gradient`
- 6、`radial-gradient`
- 7、`clip-path`
- 8、filter(滤镜)
- 六、css动画
-
- 1、变化时间
- 2、颜色渐变
-
- 1、线性渐变
- 2、径向渐变
- 3、重复渐变
-
- 1、重复型线型渐变
- 2、重复型径向渐变
- 3、两种不同背景颜色
- 4、特殊技巧
- 3、2D动画
-
- 1、transform
- 2、transform的复合
- 3、div的变形
-
- 1、div变箭头
- 2、div变三角（transparent透明属性）
- 4、动画使用
-
- 1、==关键词==
- 2、创建动画@keyframes
- 3、调用动画animation
- 4、复合使用
- 5、步进动画
- 5、注意事项
- 例：
- 4、3D动画
-
- 1、景深（近大远小）perspective
-
- 1、父元素设
- 2、子元素设
- 2、景深中心点
- perspective-origin
- 3、3D空间定义
- 4、3d位移
- 5、3d旋转
- 6、放缩
- 5、使用Animate.css
- 七、less
-
- 1、安装转换
- 2、使用
- 3、定义变量
- 4、函数(`mixin`)
- 5、其他
- 6、继承
- 7、less导入
- 8、变量计算
- 9、逻辑计算
- 八、常用的Ui
- 九、简单部署
- 十、样式初始化
- 十一、常用方法
-
- 1、去掉数字框上下按键
- 2、邮票花边纹
- 3、凹凸文字
- 4、图片底部缝隙
- 5、文字左右对齐
- 6、字体颜色渐变
- 7、进度条
- 8、自动填充背景
- 9、12px一下的文字
- 10、行内块元素间隙
- 11、中心放大
- 12、绘制斜线
一、html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html教学title>
head>
<body>注释内容
页面内容
body>
html>
-
以上是html文件最基本的内容
-
用代码编辑器打开或者txt后缀文件打开
-
将后缀改为html，双击即可运行
-
注释代码如下，用
包裹， 页面那里都可以填写
二、标签
1、必须标签
-
超文本标记头
DOCTYPE html> -
html标签：用来包裹全部文件元素
<html>html> -
head标签：用来包裹描述网页信息
<head>head> -
body标签：用来包裹页面内容
<body>body>
以上为一个html必须拥有的标签
2、head内部标签
-
meta标签：用来描述页面信息，必须写在head标签里面
https://juejin.cn/post/6844903543766253575
- 定义文档字符编码
- 编写页面作者，关键字，描述，版权
- 定义索引向导(搜索引擎爬虫)，渲染内核
- 移动端浏览器刘海，移动端适配
- 浏览器缓存
- 页面定时刷新
<meta charest="utf-8">
<meta keyword="关键字">
<meta name="author" content="作者">
<meta name="description" content="desc">
<meta name="keywords" content="关键1, 关键2">
<meta name="robots" content="all">
<meta name="renderer" content="webkit">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width;initial-scale=1">
<meta name="viewport" content="width=device-width;initial-scale=1;user-scalable=no;shrink-to-fit=no">
<meta name="format-detection" content="email=no">
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="refresh" content="" />
- title标签：浏览器tab内容
<title>浏览器tab内容title>
- link标签：外联资源，网页之外的加载资源
- 引入css资源
- 修改页签图标
- 预加载图片，视频资源
<link rel="" type="" href="" size="">
3、body内部标签
1、基础标签
-
概念一
块元素：拥有宽度，高度，无法于其他元素同行存在
文字块元素(p,h1)不能包含块元素，否则会出现bug
行内元素：没有宽度，高度，如现在的字体，可以一行存在
行内元素不能包含块元素，否则行内元素会变成块元素
行内快元素：有宽度，有高度，还能和其他元素一行存在
-
概念二
正常块元素盒(标准盒模型)
拥有自身宽高，边框宽度，对边框外面其他元素的距离(margin)，对边框内部内容的距离(padding)
内外边距
-
元素标签
<div>内容div>
<p>用来填写文字的元素p>
<span>行内文字标签span>
<img src="图片地址" alt="图片描述文字" title="提示文本">
<a href="链接地址/元素id" target="_self/blank" title="提示文本" download="下载文件的保存路径">点击跳转的链接文本a>
2、列表标签
有序列表ol：例如
- 有序列表1…
- 有序列表2…
<ol type="1" start="1">
<li>有序列表1.....li>
<li>有序列表2.....li>
ol>
无序列表ol：例如
- 无序列表1…
- 无序列表2…
<ul type="">
<li>无序列表1......li>
<li>无序列表2......li>
ul>
级别列表dl, dt, dd
<dl>
<dt>名称dt>
<dd>蒲坝站dd>
<dt>级别dt>
<dd>四等车站dd>
<dt>业务dt>
<dd>办理旅客乘降dd>
<dd>办理行李，包裹托运dd>
<dd>办理整车货物发到dd>
dl>
3、表格
<table border="2" rule="all">
<caption>表格标题caption>
<thead>
<tr>
<th>表头1th>
<th>表头2th>
<th>表头3th>
tr>
thead>
<tbody>
<tr>
<td rowspan="2">1,2行1列td>
<td colspan="2">2行2,3列td>
tr>
<tr>
<td>2行2列td>
<td>2行3列td>
tr>
tbody>
table>
4、表单
<form name="表单名称" method="post/get" action="路径" enctype="multipart/form-data">form>
5、边框文字
<fieldset>
<legend align="left">边框上文字legend>
<div>内部内容div>
fieldset>
6、输入框
<fieldset>
<legend>你的legend>
<label for="">namelabel>
<input type="text" placeholder="文字提示" disabled>
<label>passwordlabel>
<input type="password" placeholder="文字提示">
<input type="submit" value="登录">
<input type="reset" value="重置">
<input type="button" value="按钮">
<input type="checkbox">多选1
<input type="checkbox">多选2
<input type="radio" name="radio">单选1
<input type="radio" name="radio">单选2
<input type="file" multiple>
<input type="text" list="data">
<input type="hidden" name="id" value="id01" />
<datalist id="data">
<option value="1">option>
<option value="2">option>
datalist>
fieldset>
7、下拉框
<select name="">
<option value="1">option>
<option value="2">option>
<option value="3" disabled>option>
select>
8、文本框
<textarea name="" id="" cols="30" rows="10">2134567textarea>
9、video和audio
<video src="视频路径" controls poster="图片路径">
<source src="路径" type='video/mp4'>
<source src="路径" type='video/ogg'>
<source src="路径" type='video/webm'>
video>
<audio src="音频路径" controls poster="图片路径">
<source src="路径" type='video/mp3'>
<source src="路径" type='video/ogg'>
audio>
备注：
js获取video元素后控制：如 元素.play()
js控制播放：play();js控制暂停：pause();js控制音量变量：volumejs控制进度变量：currentTimejs播放速度变量：playbackRatejs播放器全屏/退出全屏：- webkit:
e.webkitRequestFullScreen()/document.webkitCancelFullScreen() - Firefox:
e.mozRequestFullScreen()/document.mozCancelFullScreen() - W3C:
e.requestFullscreen()/document.exitFullscreen()
- webkit:
10、track
11、滚动
<marquee behavior="" direction="">marquee>
- behavior:alternate(晃动)&scroll(滚动)&slide(到边停)
- direction:四个方向
- height
- width
hspace=''设置水平边距。vspace=''以像素或百分比值设置垂直边距。- loop=‘数’（次数）
scrollamount='数px'（滚动长度，默认6）scrolldelay='数'（滚动间隔，单位毫秒）
12、iframe
- 插入其他页面
- 跨域
<iframe
src="网站"
frameborder="0/1" (周围边框)
scrolling="yes/no"(滚动条)
name=""
height=""
width=""
>
iframe>
13、样式标签
<b>b>:加粗
<i>i>:斜线
<u>u>:下划线
<del>del>:删除线
<mark>mark>:高亮
<sup>sup>:上标
<sub>sub>:下标
<br/>：换行；
<hr/>:空标记，一条长长的横线；
：空格；
> :>右大于号
< :<左小于号
© ：网页版权所有
14、新标签
-
：定义页面独立的内容区域。 -
：定义页面的侧边栏内容。 -
-
元素的标题 -
:定义页脚，就是 -
-
:高亮 -
-
:定义导航，就是class="nav" -
:任务进度条 -
：拼音注释<ruby> 汉 <rp>(rp><rt>Hanrt><rp>)rp> 字 <rp>(rp><rt>zirt><rp>)rp> ruby> -
:就是一个div
三、选择器
标签写完了，给标签添加样式
-
内敛写法
<body> <div style="color: red; font-size: 12px">123div> body> -
在style标签里单独写
<style> div { color: red; font-size: 12px; } /* css的注释 */ style> <body> <div>123div> body> -
写在.css后缀文件里面，用link标签引入使用
/* 这是index.css文件 */ div { color: blue; font-size: 20px; }<head> <link rel="stylesheet" type="text/css" href="./index.css"> head> <body> <div>123div> body>
此时就会出现问题，多个div怎么分辨，就需要打上标记，用过滤器筛选处理
-
*通配符选择器：
* {}：匹配所有元素 -
元素选择器：
div {}：选中所有div元素，其他元素也一样 -
交集选择器：
p.one {}：选择 类名位one的p元素 -
群组(并集)选择器：
html, body { }多个过滤器一起使用，用逗号隔开 -
后代选择器：
h1 em {}：选中h1下面全部的em -
*父子选择器：
ul > li { }：选择ul下面的li，父>子>孙，可以准确筛选 -
兄弟选择器：
E+F：选择E元素后面的第一个相邻的F元素 -
兄弟们选择器：
E~F：选择E元素后面的所有相邻的F元素 -
*id选择器：
#id名 {}：一个元素只能设置一个id，且id名不能重复<style> #div { color: red } style> <div id="div">123div> -
*class选择器：
.class名 {}
<style>
.box { color: red }
.div { font-size: 20px }
style>
<body>
<div class="box">123div>
<div class="box div">456div>
body>
-
*多个相同标签且相邻选择器—同一个父元素
-
E:first-child{} -
E:last-child{} -
E:nth-child(数字/odd/even/函数式){}正向查询 -
E:nth-last-child(数字/odd/even/函数式){}逆向查询案例：
div:nth-child(1) {} span:nth-child(odd) {} /* 选择所有奇数 */ p:nth-child(even) {} /* 选择所有偶数 */ s:nth-child(n) {} /* 选择所有元素 */ i:nth-child(2n) {} /* 选择2n元素 -- 函数式 */ a:nth-child(2n-1) {} /* 选择2n-1元素 -- 函数式 */ img:nth-child(3n) {} /* 选择3n元素 -- 函数式 */ -
*多个相同标签不相邻选择器—同一个父元素
将child换成of-type即可，of-type完全可替代child
-
*伪类选择器
1、
a:link{}：选择前2、
a:visited{}：选择后3、
a:hover{}：鼠标悬浮4、
a: hover 子元素{}：通过父元素的hover效果控制子元素4、
a:active{}：鼠标点击5、
div,a:hover{}：div为默认点击的效果6、
a:focus{}：被激活的选择器7、
input:focus-within：它或者它子节点获取焦点后选择器8、
E:not(#id名){}：除自己外的所有元素注：这是所有元素都能使用，不仅是a标签。
-
锚点选中标签：
:target {} -
伪类选择器
E:enabled{}：可选中的inputE:disabled{}：不可选中的inputE:checked{}：选则被点击的E::selection{}：选择被选中的option或者文字E::first-letter {}：选择第一个文字E::first-line {}：选择第一行文字
-
属性选择器
- 判断是否含有属性：
E[title] { color: red } - 判断属性是固定值：
E[title='box'] { color: red } - 判断属性以固定值开头：
E[title^="bo"] { color: red } - 判断属性以固定值结尾：
E[title$="ox"] { color: red } - 判断属性包含固定值：
E[title*='o'] { color: red }
- 判断是否含有属性：
-
权重，就是那个过滤器更厉害
内联>style>外联
内联>id选择器>class选择器>标签选择器>通配符选择器。
1000>0100>0010>0001>0000
四、样式
1、字体font
-
大小：
font-size:16px;(一般默认16px) -
字形：
font-family:'微软雅黑';外部引入字形
@font-face { font-family: Lata; src: url(字体路径) } /* 这样就可以是使用外部引入的字体了 */ div { font-family: 'Lata'; } -
倾斜：
font-style:italic;(italic/oblique为倾斜，normal为默认正常) -
加粗：
font-weight:500;(bold为加粗，normal为正常，或100到900整百调整) -
大写字母小型：
font-variant:small-cap; -
复合：
font: [italic] [bold] 16px/16px ‘’; -
颜色：
color:red;(或rgba/rgb或#fff) -
行间距：
ling-height:16px; -
间距：中文：
letter-spacing:1px;英文：word-spacing:1px; -
防止选取：
user-select: auto|none|text|all；跟随浏览器|不可选取|可选取|单击选取 -
unicode字体：
font-family: '\5B8B\4F53'字体名称 英文名称 uniCode编码 宋体 SimSun \5B8B\4F53 微软雅黑 Micosoft YaHel \5FAE\8F6F\96C5\9ED1
2、字段text
-
居中对齐：
text-algin:center;(center为居中，left为左对齐，right为右对齐，justify为两端对齐) -
垂直居中：
vertical-align: middle; -
大小写：
text-transform:none;(uppercase为大写，lowercase为小写，capitalize为首大写，none为正常) -
下划线：
text-decoration:none;(underline为下划线，overline为上划线，line-line-through为删除线，none为正常) -
缩进：
text-indent: 1em;(缩进，单位：1em = 1个字符，数值为负时隐藏) -
省略：
text-overflow:clip;clip为不显示省略号,仅溢出隐藏；ellipsis为溢出且显示省略
-
文本阴影：
text-shadow: 2px 2px 2px red;水平 垂直 模糊度 阴影颜色
多阴影设置：凹凸文字
3、换行(空白操作)
white-space
- 默认值：
white-space: normal; - 不换行(对换行符无效)：
white-space: nowrap; - 保留代码换行空格，代码每行内容不换行：
white-space: pre; - 保留空格换行：
white-space: pre-wrap; - 文字前的空白合并：
white-space: pre-line; - 继承父元素：
white-space: inherit;
4、强行换行
word-break
-
粗暴换行：
word-break:break-all;直接按顺序排列内容，超出部分直接换行
-
智能换行：
word-break:keep-all;先尝试把内容放下一行，放不下时才换行
5、省略号
单行省略号
width: 100px; /* 必须由宽度 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
多行省略号
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 4; /* 设置显示行数 */
-webkit-box-orient: vertical;
6、字体问题
-
图片比字体高：图片设置浮动
-
线上文字(线上元素同理)：
<style> .hrBox > hr { width: 47%; float: left; } .hrBox > span { float: left; } style> <div class="hrBox"> <hr/><span>123span><hr/> div>
7、列表ul
- 形状：
list-style-type: none;(disc默认，circle空心圆，square方) - 图片形状：
list-style-image: url(); - 形状位置：
list-position: outside;(outside在li外，inside在里) - 清空样式：
list-style: none;
8、表格table
- 合并边框为单边框：
border-collapse: collapse; - 间距：
border-spacing: 0px; (单值: 格间距，0px 0px列间距 行间距) - 无内容格隐藏：
empty-cells: hide/show/inherit;（隐藏/显示/继承） - 格宽度分配：
table/layout: auto/fixed;(自动/固定)
9、内外边距
- 外边距：margin;
- 内边距：padding;
- 元素实际宽度 = width + padding + width
- 元素实际高度 = width + padding + height
margin-left: 1px; (只设置左margin，其他top, right, bottom, left)margin: 1px;上下左右都设置margin 为1pxmaring: 1px 2px;上下设置1px, 左右设置2pxmaring: 1px 2px 3px;上1px 左右2px 下3pxmargin: 1px 2px 3px 4px;上1px 右2px 下3px 左4pxpadding: 同maringmargin: 0 auto;: 上下0px，左右自动，实现水平居中(浮动元素无效)- 行内元素尽量不要设置上下内外边距
10、宽高
-
宽度设置：
width: 100px;(单位：px, %, 其他)-
填充父元素宽度：
width: fill-availabl;行内块元素宽度填充元素，又能使用
line-height垂直居中 -
根据内容宽度变化：
width: fit-content;宽元素宽度由内容宽度撑开，但不浮动
-
-
高度设置：
height: 100px;(单位：px, %, 其他)
11、边框border
-
边宽设置：
border-width: 1px; -
边框颜色：
border-color: red; -
边框样式：
border-style: solid;(值：solid(实线)，dashed(虚线)，dotted(点线)，double(双线)) -
取消边框：
border: none; -
边框复合设置：
border: 1px solid #000;(宽度 样式 颜色) -
单个设置：
border-bottom: 1px;(其他：top, rigth, bottom, left) -
单个复合设置：
border-bottom: 1px solid red; -
单个取消：
border-bottom: none; -
边框弧度设置：
border-radius: 50% ;(单位：px, %) -
弧度多个设置：
border-radius: 20px 10px 30px 40px;1个值是4个角， 2个值: 第一(左上)(右下), 第二(右上)(左下)
3个值: 1(坐上), 2(右上)(左下), 3(右下), 4个值：四个角
-
单个边设置：
border-top-width: 1px solid red; -
单个角设置：
border-top-left-radius: 5px; -
相贴的两条边合并：
border-collapse: collapse(合并)/separate(分开 默认)表格table可以通过这个合并边框
-
border-image：略
12、轮廓outline
占据maring的位置，不会影响元素的布局位置
-
轮廓颜色：
outline-color: red; -
轮廓样式：
outline-style: none;值 描述 none 默认。定义无轮廓。 dotted 定义点状的轮廓。 dashed 定义虚线轮廓。 solid 定义实线轮廓。 double 定义双线轮廓。双线的宽度等同于 outline-width 的值。 groove 定义 3D 凹槽轮廓。此效果取决于 outline-color 值。 ridge 定义 3D 凸槽轮廓。此效果取决于 outline-color 值。 inset 定义 3D 凹边轮廓。此效果取决于 outline-color 值。 outset 定义 3D 凸边轮廓。此效果取决于 outline-color 值。 inherit 规定应该从父元素继承轮廓样式的设置。 -
轮廓宽度：
outline-width: 5px;
13、标准盒宽/高宽
- 占位宽度：div实际渲染宽度，在页面渲染使用宽度
- width/height：设置的是盒子内容的宽/高
- 设置盒宽度：盒占位宽度 = margin + border + padding + 设置width
- 未设置宽度：盒占位宽度 = margin + border + padding + 内容宽度
- 高度同理
14、浮动设置
浮动由来：为了让图片或其他行内块元素和文字实现文字环绕效果
-
设置：
float: left;（left为左浮动，right为右浮动） -
效果1：没有设置宽度的元素: 宽度=内容宽+padding+border
-
效果2：会覆盖未浮动和绝对定位元素上面
-
效果3：浮动元素父元素未设高：父元素高=未浮动元素高累加，高度塌陷
-
解决3：高度塌陷解决：父元素设置：
overflow: hidden; -
清除浮动：
clear:left(值：left/rigth/both)父元素的浮动子元素后面添加一个空元素，空元素css设置
clear: both;/* 清除浮动，解决高度塌陷 */ .fatherDiv::after { content: ''; display: 'table'; clear: both; } /* 封装统一的clearfix */ .clearfix::before, .clearfix::after { content: ''; display: 'table'; } .clearfix::after { clear: both; } -
解决图片和文字行高问题：图片设置：
float: left;
15、背景设置
-
颜色：
background-color: 颜色值; -
背景图片：
background-image: url(图片链接); -
背景图片渲染：
background-repeat: repeat;repeat(平铺重复,默认)，no-repeat，repeat-x(水平重复)，repeat-y -
背景图片位置：
background-position: 0px 0px;值1水平，值2垂直。单位：px, %。还可以为单词：
center, left -
背景固定：
background-attachment: scroll;值:
scroll(背景图随其他子元素一起滚动), fixed(背景图不滚动) -
背景图片大小：
background-size: 100% 100%;一个值：
background-size: 最长边;设置图片最长边宽度，等比例缩放，可以是100px；也可以是50% 收缩未图片本身的50%两个值：
background-size: 宽 高;一个关键词：
background-size: cover;图片等比例放大到填充满全部背景，放大多余的部分被裁剪掉。background-size: contain;图片等比例放大到填充背景，图片保持完整的在背景部分。
-
直接使用：
background: red; -
背景裁剪：
background-clip，可以设置不包含padding的背景border-box，padding-box, content-box
-
复合使用：
background: 颜色 图片 平铺 背景固定 背景定位/图片大小 -
多背景设置
注：背景颜色必须在最后一个设置
backgrount: url(test1.jpg) no-repeat scroll 10px 20px/10px 10px, url(test2.jpg) no-repeat scroll 20px 30px/10px 10px, url(test3.jpg) no-repeat scroll 30px 40px/10px 10px #f3f3f3; -
运用：特殊技巧
-
其他：还有其他的背景属性设置，略
16、透明度/隐藏
- 仅背景：
rgba(0, 0, 0, 0.5); - 背景及内容：
opacity: 0.6;值范围：[0, 1] - 设置值
border: transparent;border颜色透明 - 设置
visibility: hidden;效果和opacity: 0;一样，占位隐藏。
17、盒阴影
box-shadow 的原理是：元素添加新的层（layer），这一层位于元素本身下，并且仅有阴影（没有内容）。它是一个半透明的，且可以调整大小及颜色的影子
-
效果：
box-shadow: 0px 0px 0px 0px red inset/outset水平 垂直 模糊度 阴影大小 阴影颜色 内外阴影
-
多个配置：
box-shadow: 0px 0px 0px 0px red outset, 0px 0px 0px 0xp red outset;多个配置和其他多个配置顺序一样。
-
月牙特性：
.box { width: 400px; height: 400px; background-color: #456685; box-shadow: -81px -53px 0px 0px yellow inset; border-radius:50%; } -
loading动画
参考《html基础知识、核心技术与前沿案例》9.2.4章节
18、溢出overflow
- 默认：
overflow: visible; - 超出隐藏：
overflow: hidden; - 显示滚动条：
overflow: scroll; - 仅超出显示滚动条：
overflow: auto; - 仅水平超出显示滚动：
overflow-x: auto; - 仅垂直超出显示滚动：
overflow-y: auto;
19、滚动条样式
- ::-webkit-scrollbar 滚动条整体部分，可以设置宽度高度背景颜色啥的
- ::-webkit-scrollbar-button 滚动条两端的按钮样式
- ::-webkit-scrollbar-track 外层轨道
- ::-webkit-scrollbar-track-piece 内层滚动槽
- ::-webkit-scrollbar-thumb 滚动的滑块
- ::-webkit-scrollbar-corner 边角
- ::-webkit-resizer 定义右下角拖动块的样式
链接文档
链接文档2
20、⭐定位
-
相对定位：
position: relative; (占位) -
绝对定位：
position: absolute;(不占位，类浮动) -
固定定位：
position: fixed;(不占位) -
粘性定位：
position: sticky; -
取消定位：
position: static; -
定位元素层级：
z-index: 1;默认为1, 图层级别大于其他元素。可为负数
-
定位位置：
top: 1px; right: 1px; bottom: 1px; left: 1px通过设置上下左右位置调整定位位置
-
问题：父元素不设置定位，子元素设置绝对定位的参考系= 从父元素向上寻找，直到body元素。由元素设置定位，则以此定位元素为参考系，没有找到则以body元素为参考系。
-
建议在网上观看视频教程理解
-
水平垂直居中：
div { width: 100px; height: 100px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } /* 通过绝对定位，上下左右都设置为0，margin设置为auto */ -
设置宽度
div { position: absolute; left: 0; right: 0; top: 0; bottom: 50%; } /* 此时元素宽等于父元素宽，元素高为父元素一半，且在上半部分 */ -
inset简写
inset可以简写上下左右。
单值：表示设置四个值。双值：第一个上下，第二个左右。其他和margin一样
-
特别注意
当给一个元素加上transform属性的时候，这个元素就会具有relative的特性,所以若一个元素的父元素拥有tranform属性，那么子元素在使用定位属性的时候要注意。
21、鼠标指针
- 其他形状链接：
cursor: url(链接); - 默认：
cursor: default; - 十字光标：
cursor: crosshair; - 手指：
cursor:pointer; - 移动光标：
cursor: move; - 文字光标(input框)：
cursor: text; - loading等待：
cursor: wait; - 帮助help：
cursor: help; - 不可选择：
cursor: not-allowed;
22、多列
-
分列数：
column-count: 数字; -
列之间距离：
column-gap: 1px -
列之间的线：
column-rule: 1px solid red -
每列高度是否一杨：
column-fill: balance值：balance(默认不一样)，auto(一样)
-
列宽度：
column-width: 20px列宽度会与列数发生冲突
23、伪类元素
-
解释：就是
div或替他元素前后添加一个内容或者样式 -
值：before(盒前面)，after(盒后面)
-
使用案例(after同理)
div::befort { content: '内容'; /* content定义伪元素里面的内容 */ /* 然后就可以定义其他内容描述这个伪元素 */ display: inline-block; color: red; } -
使用场景：
- 需要文字左边加自定义图案，符号等等
- 需要加一定长度的边框
- 文字右边加图案，符号等等
24、盒display
-
标准盒：盒宽 = margin + border-width + padding + 盒内容width
-
标准盒块元素：
display: block; -
标准盒行内元素：
display: inline; -
标准盒行内块元素：
display: inline-block; -
怪异盒：盒内容width会将padding和margin和border包含在内
设置：
box-sizing: border-box;恢复标准盒：
box-sizing: content-box
25、弹性盒
1、设置
- 设置为弹性盒：
display: flex; - 父元素设置弹性盒，子元素就称为灵活元素。
2、弹性盒样式
-
灵活元素主排列方向：
flex-direction: row;值：row(左到右, 默认); row-reverse(右到左);
值：columns(上到下); columns-reverse(下到上)
影响: 灵活元素副排序方向不设置长度, 则默认填充100%
-
主排序方式：
justify-content: flex-start;值：flex-start(从头开始, 默认); flex-end(从尾开始)
值：center(居中); space-between(两端对齐); space-around(自动分配); space-evenly(均匀分布)
-
副排序方式：
align-content: flex-start;值：flex-start(从头开始, 默认); flex-end(从尾开始)
值：center(居中); space-between(两端对齐); space-around(自动分配)
-
主轴换行：
flex-wrap: nowrap;值：nowrap(不换行, 默认); wrap(自动换行);
值：wrap-reverse(换行, 换行后反序)
注意：灵活元素副排序方向需要设置长度
-
换行后副排序方式：
align-items: flex-start;值：flex-start(从头开始,); flex-end(从尾开始)
值：center(居中) ; stretch(拉神填充, 默认); baseline(中心线对齐)
-
复合设置：
flex-flow: 主排列方向 是否换行;例：
flex-flow: row nowrap;
3、灵活元素设置
-
某一项灵活元素单独主排序方式设置：
align-self: auto;值：auto(自动); flex-start(从头开始,); flex-end(从尾开始)
值：center(居中) ; stretch(拉神填充, 默认); baseline(中心线对齐)
-
填充：
flex: 1; -
排序：
order: 1;设置灵活元素排列顺序，值为数字
4、弹性盒应用
-
在移动端大量应用，以配合移动端适配
-
宽度或高度填充
填充 "topBox Box">"top">"bottom">"rightBox Box">"right">"left">"bottomBox Box">"bottom">"top">"leftBox Box">"left">"right"> -
坑：填充元素内部再写子元素高100%，则无法让子元素滚动
滚动需要给子元素固定高
26、grid网格
像表格一样的，把页面进行布局。简化flex/栅格布局 计算。可以随意合并行和列
1、设置为网格布局
- 通过
dispaly: grid;设置为网格布局 - 此时当前元素的所以子元素就变成了网格元素
2、设置固定列宽，行高
已经知道，grid其实就是表格，所以表格的每列的宽度，每行的高度都是可以设置的
-
通过
grid-template-columns: 100px 100px;设置列数，列宽。设置几个就是有几列的宽度被设置了，其他列宽度自动平分。
如：
grid-template-columns: 100px 100px 100px;设置3列宽度 -
通过
grid-template-rows: 100px 100px;设置行数，行高。同上
-
特殊值：
grid-template-columns: 1fr 1fr;1fr为一个比例占位混合使用：
grid-template-columns: 150px 1fr 2fr; -
副作用：
固定的列宽和行高，超出不会自动换行
3、排列方式
- 通过
grid-auto-flow: column/row;设置排序是行(左 > 右)/列(上 > 下)，默认column - 排列方式为行时，
- 设置列宽有几列，就会有几列。不会超出设置列数
- 设置行高有几行，只要设置的那几行有指定行高，其他的会平均分配行高
- 排列方式为列时，同理
4、自适应列宽，行高
- 通过
grid-auto-columns: 100px;设置列宽，可以设置多个值，但会自动排除超出的列 - 通过
grid-auto-rows: 100px;设置行高，可以设置多个值，但会自动排除超出的行
5、最小最大值
-
可以通过
grid-auto-rows: minmax(100px, 200px);设置最小最大此时行高最小为100px, 最大200px
6、子元素占位设置
-
通过
grid-column-start: 1;定义子元素从那条列边开始 -
通过
grid-column-start: 3;定义子元素从那条列边结束此时就可以得到一个占位2列的子元素
-
通过
grid-row-start: 1;定义子元素从那条列边开始 -
通过
grid-row-start: 3;定义子元素从那条列边结束原理同上
7、层级
- 重复的网格覆盖在一起了，就需要设置那个网格在上面。
- 通过
z-index设置每个网关的层级
8、间隔
-
通过
grid-column-gap: 20px：设置列间隔 -
通过
grid-row-gap: 20px：设置行间隔 -
通过
grid-gap: 10px;设置间隔和margin、padding一样，设置多个值。规则也一样
9、复合：
可以通过grid: 1fr;直接复合设置，教程跳转连接
10、了解：
- 根据定义名称排序
grid-template-area: 'a a' - 已经不知道咋形容了
grid-area: ;
27、移动端布局
-
宽度自适应
两边设宽度，中间设
flex: 1;, 父设弹性盒 -
悬挂
第一个灵活元素加
align-self: flex-start;效果如定位，但比定位好。 -
流式布局：略。
28、媒体查询
-
解释：查询设备屏幕大小，进行页面文字大小适配
-
设置：
@media all and () {} -
示例：
@media all and (max-device-width: 320px){ /* 320px宽度的设备 */ html{ font-size: 12px; } } @media all and (min-device-width: 321px) and (max-device-width: 375px){ /* 321px-375px宽度的设备 */ html{ font-size: 14px; } } @media all and (min-device-width: 376px){ /* 375px以上宽度的设备 */ html{ font-size: 16px; } } -
其他：search(平板或电脑)，print(打印机)
max-width: 指的是设备的最大宽度
max-device-width：指的是浏览器的最大宽度
29、vw
-
解释：更加动态的适应不同屏幕的大小下文字的大小
-
dpr概念：设计像素 / 物理像素 = dpr1080px设计像素的dpr=3750px设计像素的dpr=2640px设计像素的dpr=2
-
vw和vh：相对于当前窗口的百分比 100vw为窗口的宽 -
rem：em是相对于父元素的一个文字大小，rem是相对于html -
使用示例：如果当前为750px；（设计像素）
-
750的dpr = 2
-
750px / 2 = 375px (实际物理像素)
也就是我们开发是，设计稿是750px的宽，我们设置是设置为375px
-
所以也得到 100vw = 375px
-
所以设置 html的font-size 为100px所占用的对应vw
即 font-size = 26.67vw
-
此时就优化的算法
-
假如有个全屏750px的设计稿元素，设置的时候就可以设置 width = 3.75rem；
整除100 * dpr就是我们设置的实际宽度了。
-
配合媒体查询，就完成了不同设备适配。
-
30、bfc布局
1、描述：
块级格式化上下文
2、作用：
- 形成独立的渲染区域
- 内部元素的渲染不会影响外界
- 如：子元素的margin-top会传递给父元素，影响外界。父元素添加overflow变成bfc，就消除了子元素margin-top的影响
1、bfc的触发规则
1.浮动的元素，浮动元素的父元素没有设置高度时，高度为0，需要清除浮动或添加overflow
2.绝对定位元素, position 是 absolute 或 fixed, 父元素没有相对定位，定位元素就会以其他元素定位
6.两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC）
2、触发条件：
1.float的值不为none
2.overflow的值不为visible（副作用最小）
3.display的值为table-cell、tabble-caption和inline-block之一
4.position的值不为static或则releative中的任何一个
5.根元素：html
3、资料
圣杯
- 圣杯简单总结
- 首先是浮动，先设置浮动。
- 给左右的浮动元素设置margit负数，左边左偏负100%，右边右偏负自己宽度
- 然后父元素设置左右padding，所有子元素设置相对定位
- 左右元素设置定位偏移负数，左边左偏负自己宽度，右边右偏负自己宽度
双飞燕
瀑布流布局：利用多列属性实现
4、作用效果：
- 浮动元素无法撑起父元素
- 不会浮动元素
- bfc解决高度塌陷
31、原生icon
-
从阿里icon图标库下载icon
-
或将icon添加到项目
- 将选中的icon添加到项目
- 点击资源管理 => 我的项目 => 选中自己的项目
- 点击下载到本地，解压下载文件
- 把获取到的全部文件放在自己项目里面。自己找个文件夹重命名
- 将其中的iconfont.css引入到项目
-
注意的是，每个class名称前需要添加
iconfont类目，否则不生效
32、可继承属性
font, font-family, font-weight, font-size, font-style, font-variant, font-stretch, font-size-adjust
text-indent, text-align, text-shadow, line-height, word-spacing, letter-spacing, text-transform, direction, color
caption-side, border-collapse, empty-cells.
list-style-type, list-style-image, list-style-position, list-style
cursor
visiblity
这样就可以只设置父组件，子组件直接继承样式，减少代码量
33、input框样式
-
可用样式：
imput:enabled {} -
不可用样式：
imput:disabled {} -
必填样式：
input:required {} -
选填样式：
input:optional {} -
验证不通过样式：
input:valid {} -
验证通过样式：
input:invalid {}valid，invalid和required比，权限required最高 -
混合使用：
input:required:valid {}
34、文本框样式
-
文本框拖拽：
resize: none;值：none(禁止拖拽)，both(可以拖拽修改宽高)，
值：horizontal(仅修改宽)， vertical(仅修改高)
五、函数
1、attr()函数
用于获取标签属性值，如获取a标签的href
<style> a:after{ content: "("attr(href)")" } style>
<body> <a href="www.baidu.com">后面加hrefa> body>
2、calc()函数
用于设置宽度，如比100%少一100px，用函数进行计算控制
支持加减乘除算法
div{width: calc(100vh - 100px)}
3、repeat函数
重复设置值
margin: repeat(4, 20px)
/* 等同 */
margin: 20px 20px 20px 20px;
/* 函数介绍 */
repeat(个数, 重复代码); repeat(3, 20px 30px)
/* 函数不知道个数, auto-fill自动填充 */
repeat(auto-fill, 100px);
4、cubic-bezier()函数
设置贝塞尔曲线用于控制css动画
动态选取网站：https://cubic-bezier.com/#.08,.64,.97,.05
5、linear-gradient
实现背景颜色渐变，css3渐变
实用网站：http://tools.jb51.net/code/css_generator
6、radial-gradient
实现背景颜色渐变，css3渐变
实用网站：http://tools.jb51.net/code/css_generator
7、clip-path
实用网站：http://tools.jb51.net/code/css3path
画面裁剪
作用一：绘制斜线
.salary {
width: 100px;
height: 50px;
background-color: #bbb;
position: relative;
}
.salary::before {
content: '';
display: block;
width: 100%;
height: 100%;
background-color: #eee;
clip-path: polygon(0px 0.5px, 0px 100%, calc(100% - 0.5px) calc(100% + 0.5px));
position: absolute;
top: 0;
}
.salary::after {
content: '';
display: block;
width: 100%;
height: 100%;
background-color: #eee;
clip-path: polygon(100% calc(100% - 0.5px), 100% 0px, 0px -0.5px);
position: absolute;
top: 0;
}
8、filter(滤镜)
案例：重大日期，全屏添加灰色滤镜
-
默认值：
filter: none; -
模糊度：
filter: blur(px);默认1px，数值越大越模糊
-
亮暗：
filter: brightness(%);默认100，数值越小越暗，越大越亮
-
蒙层：
filter: contrast(%);默认100，数值越小蒙层越暗，越大越亮
-
灰度：
filter: grayscale(%);默认0，数值越大，灰度颜色越灰
-
应用色相旋转：
filter.hue-rotate(deg);默认0，不是旋转页面，是颜色
-
反转输入：
filter: invert(%);默认0
-
透明度：
filter: opacity(%)默认100%
-
饱和度：
filter: saturate(%)默认100%
-
换为深褐色：
filter: sepia(%)默认0%
-
多个属性设置，用空格隔开：
filtet: opacity(50%) sepia(50%);
六、css动画
1、变化时间
-
动画过度：
transition: all 0s 0s ease; -
值1：all(全部属性)，width(如宽度单一属性)
-
值2：动画时间，从原状态 =》变化到 =》指定状态 ==需要的时间
-
值3：延迟时间，延迟变化的时间
-
值4：变化的速度：ease(渐慢), ease-in(加速), ease-out(减速),
ease-in-out(先加后减)，linear(匀速)，贝塞尔曲线
-
常见使用案例：
transiton: 2s;设置2s动画 -
多个动画
transition: width 1s 1s ease, height 1s 2s ease;
2、颜色渐变
1、线性渐变
通过linear-gradientcss3函数实现
background: linear-gradient( to+变化方向，颜色1，颜色2，。。);
2、径向渐变
通过radial-gradient css3函数实现
background: radial-gradient( 渐变中心，形状，大小，颜色1，颜色2，。。。)；
center：渐变中心（top left),或（15px 30px）
shape：circle 圆，ellipse 椭圆 ，
size:
closest-side;最近边；
closest-corner：最近角；
fathest-corner：最远角；
fathest-corner；最远边；
shape和size只能存在一个。
3、重复渐变
1、重复型线型渐变
background:linear-gradient( to+变化方向，颜色1，颜色2 20%， 颜色3 %。。。)；（不设置方向默认从上到下）
兼容的和线型一样。
2、重复型径向渐变
background:-webkit-repeating-radial-gradient( 渐变中心，形状，大小，颜色1，颜色2 20%， 颜色3 30%，。。。)；
3、两种不同背景颜色
background:linear-grandient(颜色1 50%，颜色2 50%)；
4、特殊技巧
breakground + linear-grandient实现边框花纹等。
参考：https://blog.csdn.net/weixin_33919950/article/details/88584263
参考示例：
background: radial-gradient(circle at left bottom, transparent 20rpx, #fff 0) top left / 50% 75% no-repeat,
radial-gradient(circle at right bottom, transparent 20rpx, #fff 0) top right / 50% 75% no-repeat,
radial-gradient(circle at left top, transparent 20rpx, #fff 0) bottom left / 50% 25% no-repeat,
radial-gradient(circle at right top, transparent 20rpx, #fff 0) bottom right / 50% 25% no-repeat;
3、2D动画
特别注意
当给一个元素加上transform属性的时候，这个元素就会具有relative的特性,所以若一个元素的父元素拥有tranform属性，那么子元素在使用定位属性的时候要注意。
1、transform
translate(水平，垂直)；移动，根据自己原来的位置移动
%为单位时是自己的宽度%，可配合定位的中心放大使用；
translate-X（水平）；
translate-Y（垂直）；
scale（水平，垂直） 自身倍数缩放（默认中心放大）0是隐藏,没有了
scale-X（）
scale-Y（）
rotate(0deg) 旋转，单位度（deg）
默认中心旋转
rotate-X（）中心x轴旋转
rotate-Y（）中心y轴旋转
skew（x轴deg，y轴deg）倾斜（长方形变平行四边形）
transform-origin：（左右，上下）设置(旋转的)中心点
可设置单词也可设置数值
旋转后背面是否显示，是否占位：backface-visibility: visible(默认) / hidden;
2、transform的复合
transform:{属性1 属性2 。。}用空格隔开
3、div的变形
1、div变箭头
设置左边框和上边框，用transform：rotate（45deg），变成箭头
2、div变三角（transparent透明属性）
不设宽高，用边框宽度将div撑起来，给需要的方向的变上色，其他边设置透明属性：transparent；
/* 上三角 */
#triangle-up {
width: 0; height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
/* 下三角 */
#triangle-down {
width: 0; height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
/* 左删减 */
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
/* 顶点三角 */
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
4、动画使用
ie9以上才兼容
1、关键词
创建动画：@keyframes
触发动画：animation
2、创建动画@keyframes
1、@keyframes name{form{初始状态} ...to{结束状态}}
2、@keyframes name{0%{初始状态} ...100%{结束状态}}
name必须写，用于调用
3、调用动画animation
animation-
name:动画的名字;，必写
duration: 2s;动画的执行时间 ，必写timing-function: linear; 过度速度 值同transition
delay: 2s;延迟时间
iteration: 2;执行次数：数字或infinite（无限循环）direction：运动的规律
normal;正常
alterbnate；交替运行
alterbnate-reverse；反交替
fill-mode：动画完成后效果
none；默认
both/forword；动画完成后，保留最后在最后一帧画面。
backwords；动画完成后，回到起点
play-state：动画时的状态，与hover配合使用。
runing;运动
paused；暂停
4、复合使用
animation: run 9s ease 2s infinite normal both;
动画名称，动画时间，动画速度，动画延迟，动画次数，动画规律，动画完成后
5、步进动画
指定了时间函数中的间隔数量（步长）。有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）。 第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。含义分别如下：
- start：表示直接开始。
- end：默认值，表示戛然而止。
- steps用于替换动画时间
animation: run 9s steps(4, start) 2s infinite normal both;
动画分解为4步，直接从第一步开始。
5、注意事项
- animation动画是根据元素的宽高进行计算绘制，行内元素没有宽度和高度，无法执行动画
例：
/* 定义一个run动画 */
@keyframes run{
/* 0%{left: -200px;} */
0%{left: 0px;}
35%{left: 400px;}
50%{left: 400px;
transform: rotate(2deg);
}
55%{
left: 300px;
transform: rotate(0deg);
}
60%{
left:350px;
transform: rotate(-5deg)
}
/* 60%{left: 400px;} */
100%{left: 100%;}
/* 100%{left: 100%;} */
}
.xr{
width: 200px;
position: absolute;
left: -200px;
bottom: 0px;
/* 绑定触发动画 */
animation: run 4s;
}
/* 运动/暂停 */
.xr:hover{
animation-play-state: paused;
}
4、3D动画
1、景深（近大远小）perspective
与3D一起使用才能出效果
1、父元素设
perspective:1200px;每个子元素的效果不同
2、子元素设
transform: perspective(1200px);每个子元素效果一样
2、景深中心点
perspective-origin
perspective-origin:x轴, y轴; 默认为50%；
3、3D空间定义
transform-style: preserve-3d;
必须写，不写不出效果
4、3d位移
transform: translateZ(2px);只改z轴，其他同理
transform: translate3d(x, y, z) 改变三个轴。
5、3d旋转
transform: rotate3d(x, y, z, a)
（x， y， z）为旋转中心点，a为旋转的角度。
6、放缩
transform：scale3d(x, y, z)
5、使用Animate.css
使用Animate.css插件。这就是一个css文集，可以下载下来使用。
文档网站
文件链接：https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css
- 可以打开链接，然后复制代码到自己创建的
Animate.min.css。然后引入使用 - 也可以直接通过link标签的src属性，直接链接这个文件。
使用方式：
- animate_animated必须添加，和使用icon一样。
- 第二个class是文档上的
- 两个都写好后，这个元素每次创建的时候就可以看到动画效果
- 动态绑定css，就可以完成动画
七、less
1、安装转换
环境：需要安装nodejs
安装命令：cnpm install -G less，进行全局(您随意)安装
使用：lessc 文件名.less
此时就可以将less文件转换位css文件进行使用
2、使用
- 和
css一样语法使用 - 不同，子元素可以写在父元素内部，如
div{
background: red;
p{
color: blue;
font: 18px/20px '';
}
}
3、定义变量
@colorer: red; // 此时定义了一个color变量
@Name: 'Header';
div{
background-color: @colorer; // 使用color这个变量
}
@{Name} {// 使用变量命名
color: @colorer;
}
4、函数(mixin)
.test(@wd : 100px){ // 定义一个less函数
widget: @wd;
height: 120px;
}
div{
.test(20); // 调用上面的函数
background-color: red;
}
5、其他
&：表示父元素
div{
p &{
background: red;
}
}
// 此时div和p都定义了背景为红色
div /deep/ p{ // 使用样式穿透
color: red;
}
6、继承
.text{
background: red;
}
div:extend(.text){}
// 此时就是div继承了text, 注意text不能是函数
// text的hover效果继承需要加all
div:extend(.text all) {}
7、less导入
@import '文件路径'
8、变量计算
.test(@wh) {
width: calc(100px - @wh);
height: calc(100vh - @wh);
padding: calc(100% - @wh);
}
// 通过calc函数进行变量样式计算，其中100vh为浏览器宽度
9、逻辑计算
.test(@f) when (@f) { //if语句 f==true执行
background: red;
}
.test(@a) when (iscolor(@a)) { // 类型判断if
background: @a;
}
// isnumber() 数值类型检测
// ispixel(), px单位检测； ispercentage(), %单位检测；
.test(@num) when (@num > 50) and (@num = 50) {}
.test(@num) when not (@num < 50) {}
八、常用的Ui
elementUi：https://element.eleme.cn/#/zh-CN
iview：https://www.iviewui.com/docs/introduce
antDesignUi：https://ant-design.gitee.io/index-cn
taroUi：https://taro-ui.jd.com/#/
NutUI：https://nutui.jd.com/#/
uni-ui：https://hellouniapp.dcloud.net.cn/pages/component/view/view
vuetify：https://vuetifyjs.com/zh-Hans/
九、简单部署
使用nginx进行简单部署
-
下载nginx：http://nginx.org/en/download.html
-
选择
nginx/window的版本下载 -
解压下载文件，将文件夹放在纯英文路径下
-
进入解压的
nginx文件 -
将静态资源文件夹，(包含，html，css，less，js，图片等等)，放入当前文件夹
-
vscode打开
当前文件夹/conf/nginx.conf -
找到
server配置，模板如下server { listen 8000; # 端口号 server_name somename alias another.alias; location / { root html; # nginx文件内，静态资源文件夹名称 index index.html index.htm; # 静态资源文件夹内，入口html文件 } location /api/ { # 进行服务器代理，进行跨域请求 proxy_pass http://localhost:3001/; } } -
server可以多个配置，注意端口号不要被占用
十、样式初始化
腾讯大厂的样式初始化，尽量使不同浏览器显示样式大体一致
建议根据：https://guide.aotu.io/index.html 指定初始化样式
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px"宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#2d374b;text-decoration:none}
a:hover{color:#cd0200;text-decoration:underline}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}
十一、常用方法
1、去掉数字框上下按键
/* 去掉数字框上下键 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{
-webkit-appearance: none;
margin: 0;
}
/* 兼容火狐 */
input[type="number"]{
-moz-appearance: textfield;
}
2、邮票花边纹
background: radial-gradient(circle at left bottom, transparent 20rpx, #fff 0) top left / 50% 75% no-repeat,
radial-gradient(circle at right bottom, transparent 20rpx, #fff 0) top right / 50% 75% no-repeat,
radial-gradient(circle at left top, transparent 20rpx, #fff 0) bottom left / 50% 25% no-repeat,
radial-gradient(circle at right top, transparent 20rpx, #fff 0) bottom right / 50% 25% no-repeat;
3、凹凸文字
<style>
body {
background: #ccc;
}
div {
color: #ccc;
}
div:first-child {
text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
}
div:last-child {
text-shadow: -1px -1px 1px #000, 1px 1px 1px #fff;
}
style>
<body>
<div>凸起的文字div>
<div>凸陷的文字div>
body>
4、图片底部缝隙
老版本浏览器会出现底部缝隙，主要是行内块元素，所有图片会有底部缝隙
- 图片转块元素
- 图片基线对齐：
vertical-align: baseline;或vertical-align: top;
5、文字左右对齐
-
设置属性
text-align: justify -
同时还有给包裹文字的块元素里面添加一个行内块原素
<div style="width: 100px;text-align: justify;"> 左右<span style="display: inline-block;padding-left: 100%">span> <div> -
行内块原素还需要添加paddingleft设置100%
6、字体颜色渐变
span {
font-size: 24px;
background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
/* 还可以添加动画效果 */
animation: textAnimation 1s linear infinite;
}
/* 文字动画 */
@keyframes textAnimation {
to { filter: hue-rotate(360deg) }
}
7、进度条
效果一:
<div class="progress">
<div class="progress_bar">div>
div>
<style>
/* 文字动画 */
@keyframes textAnimation {
to { filter: hue-rotate(360deg) }
}
/* 进度条一
--------------------------------------- */
.progress {
width: 260px;
height: 6px;
border-radius: 3px;
background-color: #e1e4e8;
overflow: hidden;
}
.progress_bar {
height: 100%;
width: 0%;
background: linear-gradient(90deg,#ffd33d,#ea4aaa,#b34bff,#01feff);
animation-name: progressAnimation, textAnimation;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: 1, infinite;
animation-fill-mode: forwards, none;
}
@keyframes progressAnimation {
to { width: 100%; }
}
style>
效果二：
<div class="nprogress">
<div class="nprogress_bar">div>
div>
<style>
.nprogress {
width: 260px;
height: 6px;
border-radius: 3px;
background-color: #e1e4e8;
overflow: hidden;
}
.nprogress_bar {
height: 100%;
width: 0;
background-color: rgb(21, 176, 248);
background-image: linear-gradient(
135deg,
#ffd33d 0%,
#ffd33d 25%,
transparent 25%,
transparent 50%,
#ffd33d 50%,
#ffd33d 75%,
transparent 75%,
transparent
);
background-size: 20px 20px;
animation-name: progressAnimation, progressAnimation2;
animation-duration: 2s, 2s;
animation-timing-function: linear;
animation-delay: 0s, 2s;
animation-iteration-count: 1, infinite;
animation-fill-mode: forwards, none;
}
/* 进度条动画二 */
@keyframes progressAnimation2 {
to { background-position: 20px 0; }
}
style>
8、自动填充背景
- 产生原因：由于Chrome默认会给自动填充的input表单加上 input:-webkit-autofill 私有属性造成的
- 解决方案1：在form标签上直接关闭了表单的自动填充：autocomplete=“off”
- 解决方案2：input:-webkit-autofill { background-color: transparent; }
9、12px一下的文字
.shrink{
-webkit-transform:scale(0.8);
-o-transform:scale(1);
display:inline-block;
}
10、行内块元素间隙
- 原因：行内块元素之间 换行或空格分割的情况下 会出现
- 非行内块元素，设置inline-block也会有水平间隙
- 可以借助
vertial-align: top消除垂直间隙 - 可以在父级元素加
font-size: 0;子元素设置字体大小消除间隙
11、中心放大
12、绘制斜线
.salary {
width: 100px;
height: 50px;
background-color: #bbb;
position: relative;
}
.salary::before {
content: '';
display: block;
width: 100%;
height: 100%;
background-color: #eee;
clip-path: polygon(0px 0.5px, 0px 100%, calc(100% - 0.5px) calc(100% + 0.5px));
position: absolute;
top: 0;
}
.salary::after {
content: '';
display: block;
width: 100%;
height: 100%;
background-color: #eee;
clip-path: polygon(100% calc(100% - 0.5px), 100% 0px, 0px -0.5px);
position: absolute;
top: 0;
}
perspectivevisible