（用前段做一个盒子）
一开始要在桌面创建一个文件夹，文件夹里面再创建一个文件夹，名字叫css，还有很多文件夹，这里我就不做介绍了。如图：
首先要知道做前段需要什么软件，然后怎么创建文件。
软件是用Adobe Dreamweaver CC 2019简称DW，然后点击进入进去，再然后ctrl+n就会弹出一个窗口，在这个窗口什么有一个叫HTML的文件，点击就可以创建了。
如图：
创建进来以后是这样的，保存一下就可以了，然后就用这个刚刚创建的HTML文件来做盒子，图片中写盒子的地方是可以更改文字的，然后这对标签里面是写代码的，在这里还需要去创建一个样式表也就是css表，同样的方法Ctrl+n弹出窗口，然后再窗口里面找到CSS表，
如图：
然后点击创建就可以了，css表跟HTML不一样，css创建好了以后是这样的：
，所以创建的时候一定要区分开。
创建好以后全部的进行保存，ctrl+s保存到刚刚新建的文件夹里面，在这里要注意一下因为HTML是加载文件，css是样式文件，所以保存的时候文件也要在一个文件夹里面，而且保存的文件也不一样。
如图：
图一：
这是HTML文件。
图二：
这是css文件。
把刚刚保存好的css文件进行引入到HTML里面：
图中数字1的地方是写css样式引入的地方，数字2就不用说了，写引入css样式的代码为：，前面的rel为样式，后面的href为路径。
下面在图中数字2里面写做盒子的代码:
盒子
意思：div为盒子的模型，然后class是类的意思。
HTML这边写好了盒子的代码，就去css样式那边去写盒子的样式，写法：
Width为：宽 ，height为：高, background为：背景颜色，
最后的效果：