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、`clip-path`
- 六、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、复合使用
    - 例：
  - 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、图片底部缝隙

一、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标签里面

<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">
<!-- robots的属性描述有：all none index noindex follow nofollow -->
<meta name="renderer" content="webkit">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width;initial-scale=1">
<!-- viewport: 用于处理非pc端页面适配问题 -->
<!-- width=device-width device-width是设备默认宽度，可以填整数-->
<!-- height 同上 -->
<!-- 其他属性：minimum-scale, maximum-scale, user-scalable -->
<!-- viewport-fix=cover, 处理手机刘海问题 -->
<!-- 处理经典案例 -->
<meta name="viewport" content="width=device-width;initial-scale=1;user-scalable=no;shrink-to-fit=no">

title标签：浏览器tab内容

<title>浏览器tab内容</title>

link标签：外联资源，网页之外的加载资源

<link rel="" type="" href="" size="">
<!-- rel值：icon, stylesheet, preload, prefetch -->
<!-- type值：icon, text/css, image/png, video/mp4 -->
<!-- href值：外接资源地址 -->
<!-- size值：icon大小 -->
<!-- rel和href是必须的 -->
<!-- rel="icon" 作用是设置浏览器tab上的icon图标 -->
<!-- rel="preload" 作用是预先加载网页需要的图片或其他资源，进行优化 -->
<!-- rel="prefetch" 作用是预先加载网页即将使用的资源，进行优化 --><!-- rel="dns-prefetch" DNS预解析 -- 'https://www.jb51.net/web/421998.html' -->

3、body内部标签

1、基础标签

概念一

块元素：拥有宽度，高度，无法于其他元素同行存在

_{文字块元素(p,h1)不能包含块元素，否则会出现bug}

行内元素：没有宽度，高度，如现在的字体，可以一行存在

_{行内元素不能包含块元素，否则行内元素会变成块元素}

行内快元素：有宽度，有高度，还能和其他元素一行存在
概念二

正常块元素盒(标准盒模型)

拥有自身宽高，边框宽度，对边框外面其他元素的距离(margin)，对边框内部内容的距离(padding)

内外边距
元素标签

<div>内容</div>
<!-- 最普遍运用最多最基础的元素，块元素 --><p>用来填写文字的元素</p>
<!-- 自带margin的元素，块元素 --><span>行内文字标签</span>
<!-- 宽高由内容撑起，行内元素 --><img src="图片地址" alt="图片描述文字" title="提示文本">
<!-- title属性在那个元素都可以使用 -->
<!-- 行内快元素 --><a href="链接地址/元素id" target="_self/blank" title="提示文本" download="下载文件的保存路径">点击跳转的链接文本</a>
<!-- 跳转其他页面，跳转当前页面某元素，下载网络链接资源 -->
<!-- 行内元素 -->
<!-- href="元素id" 页面跳转滚动到指定id元素位置-->
<!-- target="_self" 点击后在本页面进行跳转 -->
<!-- target="blank" 点击后跳转新页面 -->
<!-- download="./image/aa.png" 下载文件的保存路径 --><!-- contenteditable="contenteditable" div或span变成可编辑 -->

2、列表标签

有序列表ol：例如

有序列表1…
有序列表2…

<ol type="1" start="1"><li>有序列表1.....</li><li>有序列表2.....</li>
</ol>
<!-- type值：数字1，i I a A，用什么类型，不写默认数字 -->
<!-- start值：从低级个开始，不写默认为1 -->

无序列表ol：例如

无序列表1…
无序列表2…

<ul type=""><li>无序列表1......</li><li>无序列表2......</li>
</ul>
<!-- type值: circle圆圈 aquare正方形 -->

3、表格

<table border="2" rule="all"><caption>表格标题</caption><thead><tr><th>表头1</th><th>表头2</th><th>表头3</th></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>
<!-- border: 表格边框线宽度 -->
<!-- rules: all:单线，rows:只有行线，col:只有列线，none:无线 -->
<!-- th: 表头必须是用th包裹 -->
<!-- rowspan:合并的行数，colspan:合并的列数 -->

4、表单

<form name="表单名称" method="post/get" action="路径" enctype="multipart/form-data"></form>
<!-- enctype="multipart/form-data":下载时必须需要 -->

5、边框文字

<fieldset><legend align="left">边框上文字</legend><div>内部内容</div>
</fieldset>

6、输入框

<fieldset><legend>你的</legend><label for="">name</label><input type="text" placeholder="文字提示" disabled><label>password</label><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>
<!-- name: 提交表单时对应的key值 -->
<!-- type:text文本, password密码, number数字, color颜色, file文件, range进度条, search搜索, time, month, week -->
<!-- checkbox多选框, radio单选框(多个单选框需要定义同一个name才能实现单选) -->
<!-- type:hidden, 表示隐藏 -->
<!-- value:input值；placeholder:文字提示；size:数字'；patten:正则；maxlength:最大字数；min="" max="" step="精度" -->
<!-- checked(默认选中)；disabled(禁止使用) readonly(只读) required(必填) multiple(多值,多文件)-->
<!-- list="id"(下拉提示,配合datalist使用,list与datalist定义的id匹配) --><!-- type:submit; formnovalidate: 不进行验证如<input type="submit" formnovalidate />novalidate: 进行验证(不填默认)如<input type="suubmit" />
--><!-- input控件的属性: validity。详情百度 -->

7、下拉框

<select name=""><option value="1"></option><option value="2"></option><option value="3" disabled></option>
</select>
<!-- name: 提交表单时对应的key值 -->
<!-- select的value值为选中的option的value值 -->
<!-- multiple: 多选状态。 如：multiple="multiple" -->
<!-- size: 设置多选的可选个数 -->

8、文本框

<textarea name="" id="" cols="30" rows="10">2134567</textarea>
<!-- cols="每列字数" rows="多少行" 值用标签包裹,不是value-->

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>
<!-- src:资源链接地址，control:视频进度条，poster="展示图片路径" -->
<!-- loop:循环播放，muted:静音，autoplay:自动播放 -->
<!-- preload: auto(一起), metadata(仅加载视频), none(不加载视频) -->

备注：

js获取video元素后控制：如元素.play()

js控制播放：play();
js控制暂停：pause();
js控制音量变量：volume
js控制进度变量：currentTime
js播放速度变量：playbackRate
js播放器全屏/退出全屏：
1. webkit: e.webkitRequestFullScreen()/document.webkitCancelFullScreen()
2. Firefox: e.mozRequestFullScreen()/document.mozCancelFullScreen()
3. W3C: e.requestFullscreen()/document.exitFullscreen()

10、track

11、滚动

<marquee behavior="" direction=""></marquee>

behavior:alternate(晃动)&scroll(滚动)&slide(到边停)

direction:四个方向

height

width

hspace=''设置水平边距。

vspace=''以像素或百分比值设置垂直边距。

loop=‘数’（次数）

scrollamount='数px'（滚动长度，默认6）

scrolldelay='数'（滚动间隔，单位毫秒）

12、iframe

<iframesrc="网站" frameborder="0/1" (周围边框)scrolling="yes/no"(滚动条)name=""height=""width=""
>
</iframe>

13、样式标签

<!-- 样式标签 -->
<b></b>:加粗
<i></i>:斜线
<mark></mark>:高亮
<sup></sup>:上标
<sub></sub>:下标
<br/>：换行；
<hr/>:空标记，一条长长的横线；
&nbsp;：空格；
&gt;   :>右大于号
&lt;   :<左小于号
&copy;  ：网页版权所有

14、新标签

<article></article>：定义页面独立的内容区域。
<aside></aside>：定义页面的侧边栏内容。
<figure></figure>:规定独立的流内容（图像、图表、照片、代码等等）。
<figcaption></figcaption>:定义

元素的标题
<footer></footer>:定义页脚，就是<div class="footer"></div>
<header></header>:定义页头，就是<div class="header"></div>
<mark></mark>:高亮
<meter></meter>:进度条
<nav></nav>:定义导航，就是<div> class="nav"</div>
<progress></progress>:任务进度条

<ruby></ruby>：拼音注释

<ruby>汉 <rp>(</rp><rt>Han</rt><rp>)</rp>字 <rp>(</rp><rt>zi</rt><rp>)</rp>
</ruby>

<section></section>:就是一个div

三、选择器

标签写完了，给标签添加样式

内敛写法

<body><div style="color: red; font-size: 12px">123</div><!-- 设置div里面字123的字体颜色为红色，大小为12像素 -->
</body>

在style标签里单独写

<style>div {color: red;font-size: 12px;}/* css的注释 */</style>
<body><div>123</div>
</body>

写在.css后缀文件里面，用link标签引入使用

/* 这是index.css文件 */
div {color: blue;font-size: 20px;
}

<head><link rel="stylesheet" type="text/css" href="./index.css">
</head>
<body><div>123</div>
</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">123</div>
```
*class选择器：.class名 {}

<style>.box { color: red }.div { font-size: 20px }</style>
<body><div class="box">123</div><div class="box div">456</div>
</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 {}
伪类选择器
1. E:enabled{}：可选中的input
2. E:disabled{}：不可选中的input
3. E:checked{}：选则被点击的
4. E::selection{}：选择被选中的option或者文字
5. E::first-letter {}：选择第一个文字
6. 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-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-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:break-word;

先尝试把内容放下一行，放不下时才换行

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>123</span><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 为1px
maring: 1px 2px; 上下设置1px, 左右设置2px
maring: 1px 2px 3px; 上1px 左右2px 下3px
margin: 1px 2px 3px 4px; 上1px 右2px 下3px 左4px
padding: 同maring
margin: 0 auto;: 上下0px，左右自动，实现水平居中(浮动元素无效)
行内元素尽量不要设置上下内外边距

10、宽高

宽度设置：width: 100px; (单位：px, %, 其他)
1. 填充父元素宽度：width: fill-availabl;
  
  行内块元素宽度填充元素，又能使用line-height垂直居中
2. 根据内容宽度变化：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

轮廓颜色：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;
解决图片和文字行高问题：图片设置：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: 宽高;

一个关键词：
1. background-size: cover; 图片等比例放大到填充满全部背景，放大多余的部分被裁剪掉。
2. 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: 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%;
}

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%;
}
/* 此时元素宽等于父元素宽，元素高为父元素一半，且在上半部分 */

特别注意

当给一个元素加上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;
}

使用场景：
1. 需要文字左边加自定义图案，符号等等
2. 需要加一定长度的边框
3. 文字右边加图案，符号等等

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、弹性盒应用

在移动端大量应用，以配合移动端适配

宽度或高度填充

<!DOCTYPE html>
<html lang="zh"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>填充</title>
</head>
<style>.Box {float: left;margin-right: 50px;width: 300px;height: 400px;border: 2px solid blue;display: flex;}.topBox {flex-direction: column;}.topBox>.top {height: 30px;width: 100%;background-color: red;}.topBox>.bottom {flex: 1;background-color: yellow;}.rightBox {flex-direction: row-reverse;}.rightBox>.right {height: 100%;width: 30px;background-color: red;}.rightBox>.left {flex: 1;background-color: yellow;}.bottomBox {flex-direction: column-reverse;}.bottomBox>.bottom {height: 30px;width: 100%;background-color: red;}.bottomBox>.top {flex: 1;background-color: yellow;}.leftBox {flex-direction: row;}.leftBox>.left {height: 100%;width: 30px;background-color: red;}.leftBox>.right {flex: 1;background-color: yellow;}
</style><body><div class="topBox Box"><div class="top"></div><div class="bottom"></div></div><div class="rightBox Box"><div class="right"></div><div class="left"></div></div><div class="bottomBox Box"><div class="bottom"></div><div class="top"></div></div><div class="leftBox Box"><div class="left"></div><div class="right"></div></div>
</body></html>

坑：填充元素内部再写子元素高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
排列方式为行时，
1. 设置列宽有几列，就会有几列。不会超出设置列数
2. 设置行高有几行，只要设置的那几行有指定行高，其他的会平均分配行高
排列方式为列时，同理

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 (min-width: 320px){/* 320px宽度的设备 */html{ font-size: 12px; }
}
@media all and (min-width: 321px) and (max-width: 375px){/* 321px-375px宽度的设备 */html{ font-size: 14px; }
}
@media all and (min-width: 376px){/* 375px以上宽度的设备 */html{ font-size: 16px; }
}

其他：search(平板或电脑)，print(打印机)

29、vw

解释：更加动态的适应不同屏幕的大小下文字的大小
dpr概念：设计像素 / 物理像素 = dpr
1. 1080px设计像素的dpr=3
2. 750px设计像素的dpr=2
3. 640px设计像素的dpr=2
vw和vh：相对于当前窗口的百分比 100vw为窗口的宽
rem：em是相对于父元素的一个文字大小，rem是相对于html
使用示例：如果当前为750px；（设计像素）
1. 750的dpr = 2
2. 750px / 2 = 375px (实际物理像素)
  
  也就是我们开发是，设计稿是750px的宽，我们设置是设置为375px
3. 所以也得到 100vw = 375px
4. 所以设置 html的font-size 为100px所占用的对应vw
  
  即 font-size = 26.67vw
5. 此时就优化的算法
6. 假如有个全屏750px的设计稿元素，设置的时候就可以设置 width = 3.75rem；
  
  整除100 * dpr就是我们设置的实际宽度了。
7. 配合媒体查询，就完成了不同设备适配。

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、资料

圣杯

4、作用效果：

浮动元素无法撑起父元素
不会浮动元素
bfc解决高度塌陷

31、原生icon

从阿里icon图标库下载icon
或将icon添加到项目
- 将选中的icon添加到项目
- 点击资源管理 => 我的项目 => 选中自己的项目
- 点击下载到本地，解压下载文件
- 把获取到的全部文件放在自己项目里面。自己找个文件夹重命名
- 将其中的iconfont.css引入到项目
注意的是，每个class名称前需要添加iconfont类目，否则不生效

<i class="iconfont i-search" />

32、可继承属性

font, font-family, font-weight, font-size, font-style, font-variant, font-stretch, font-size-adjusttext-indent, text-align, text-shadow, line-height, word-spacing, letter-spacing, text-transform, direction, colorcaption-side, border-collapse, empty-cells.list-style-type, list-style-image, list-style-position, list-stylecursorvisiblity

这样就可以只设置父组件，子组件直接继承样式，减少代码量

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">后面加href</a> </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动画

5、`linear-gradient`

实现背景颜色渐变，css3渐变

6、`clip-path`

画面裁剪

作用一：绘制斜线

.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;
}

六、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、径向渐变

background:-webkit-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;

动画名称，动画时间，动画速度，动画延迟，动画次数，动画规律，动画完成后

例：

/* 定义一个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属性，直接链接这个文件。

使用方式：

<div class="animate__animated animate__bounce">hello world</div>

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)) { // 类型判断ifbackground: @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;

Html5+CSS+Less相关推荐

html中井号的作用,html5 css选择器井号, 句点的区别
一.理解CSS的样式组成CSS里的样式表是有规则组成的,每条规则有三个部分组成: 1.选择器(如下面例子中的:"body"),告诉浏览器文档的哪个部分受规则影响: 2.属性(如实例 ...
html框架有什么作用,使用HTML5+CSS+JS框架有那些好处
使用HTML5+CSS+JS框架有那些好处 2017-12-08 相信很多程序猿朋友都用过框架,不过你是否知道你用的是HTML框架.CSS框架还是JS框架,其实这都不重要,重要的是使用框架的目的是什么 ...
html css实现登录注册页面,基于HTML5+css+JS_的精美登陆注册界面
[实例简介] 基于HTML5+css+JS的精美登陆注册界面------------------------------- [实例截图] [核心代码] login4 ├── index.html ├─ ...
HTML5+CSS大作业——蓝色的异清轩个人博客(6页) 个人博客模板源码异清轩博客
HTML5+CSS大作业--蓝色的异清轩个人博客(6页) 个人博客模板源码异清轩博客常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞 ...
HTML5+CSS大作业——三八女人节主题设计(1页)
HTML5+CSS大作业--三八女人节主题设计(1页) 常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. ...
HTML5+CSS期末大作业：运动体育网站设计主题——体育铅球(5页)带注册期末作业HTML代码
学生网页课程设计期末作业下载 web网页设计制作成品- 详情介绍常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. ...
HTML5+CSS期末大作业：运动体育网站设计主题——体育铅球(5页)带注册期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制作成品...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
web学生网页设计作业源码 HTML5+CSS大作业——三八女人节主题设计(1页)
HTML5+CSS大作业文章目录 HTML5+CSS大作业一.作品展示二.文件目录三.代码实现一.作品展示二.文件目录三.代码实现 <!DOCTYPE html><ht ...
html5/css登录注册网页模板
html5/css登录注册网页模板免费下载地址:https://www.html5tricks.com/9-useful-html5-css3-login-form.html
视频教程-线上培训上课实录整站设计制作开发全能培训-HTML5/CSS
线上培训上课实录整站设计制作开发全能培训粉丝已经近2万人.传课网业余讲师. 彭亮 ¥39.00 立即订阅扫码下载「CSDN程序员学院APP」,1000+技术好课免费看 APP订阅课程,领取优惠,最 ...

Html5+CSS+Less