边距
不同的浏览器默认的边距不同，有的认为是内边距，有的是外边距。而且距离的大小在不同的浏览器默认值也不相同。如何调整内边距和外边距？
关键词 reset.css（清楚浏览器默认样式的差距）
css 的应用方式，写在独立的.css 文件中，在<head>中调用
想让框居中，因为不知道用户显示器分辨率，所以选择 auto,减去框的宽除以二。
width:1000px;
margin-left：auto；
margin-right:auto；
可以综合为
width:1000px;margin: 0 auto;/*上下为 0，左右外边距为自动*/
在设置边的样式和角的样式时，先写统一的四条边的集合语句，再写单独的某一边的设定，不然会被覆盖。
背景
设置背景图像
会默认在上一级的画布重复
ol li{
background-image:url(1.png)
background-repeat: no-repeat;
padding-left:30px;/ /*左侧内边距*/
所以需要设置 背景图片的位置，大小。前提是设置一个框，填到框里面就可以
这种传统方式太过朴素，可以尝试使用新的技术和一站式生成 AI 技术来辅助。
毕竟按照现在的情况来看，这种古法编程效率低下且人工内容太繁琐，使用现成的美术素材来拼图可能效果更好。
web经验技巧
知识点来源 MDN
关键词 ：：hover
1. 用户动作 伪类可以加给任何 html 元素，鼠标 悬停（hover),激活（按下不松开 active。
<style>,
box{ width:200px;
height:200px;
border:1px solid #f00;}
.box:hover{ border:10px solid blue;}.
box:active{ border:10px solid green;}
</style>#鼠标放上去变蓝色，按住变绿色。
2.在实际效果中，无论看起来是有序列表还是无序列表，都按无序列表。ul
如果是无序列表的话，为什么可以显示正常数字。
其实无论有序还是无序，都没办法通过 css 修饰列表的标志。（如无需列表的圆圈，有序列表的数字等，因为不是自己写的，是浏览器自己生成的）。所以一般是先通过 css 样式将有序无序列表的标志去掉，然后再通过造假的方式实现。
<style>
ul,ol{list-style:none;}
</style>#定义去掉前面的数字圆圈
或者是在文本行内填入 class 类来单独定义每个标题的颜色，标记 first，second，third。然后统一定义 1 到 3 的加粗字体样式。
例如
ul .first{color:#fe350;}
ul .second{color:# ;}
ul .first,ul .second{font-weight}
