图片中的抒写过程

1.先创建其大小，宽和高，因为要考虑到其中的内边距padding，所以宽和高的值要比实际值小，加上内边距padding的值才是完整的大小。
2.在html中使用ul li a来书写图片中的特殊符号和文字内容，这样可以使用同一个class名来设置位置。其次，把这个整体分成6个部分来书写，也就是6个ul li来看待，设置时，需要算出来每一个的宽和高，还需要设置内边距padding，这样分成6个方块来设置比较简化
3.在a标签中设置其宽和高为100%，为后面设置中间的分割线时做准备，还要设置成块级元素，display：block，为了让其居中，text-align：center
4.如果需要设置每一个内容在鼠标放上时：hover，也可以设置，最好时在a中设置
5.现在可以单独设置特殊符号和字体内容了。除了设置符号的大小、颜色，还有就是通过绝对定位来设置其位置，主要是为看的顺眼。当设置字体内容时要注意了，这里不可以通过绝对定位来设置其位置，只能通过块级元素display：block来设置其位置，这里我也没有想通，如果有大神看到，希望可以为我解惑，再次拜谢！！！
6.到这一步时，基本上符号和内容都已经居中了，可以开始设置中间的分割线了。在第一、第二、第四、第五个内容块中添加
border-right：1px solid rgb()，意思是在其右面设置1px的实线。基本上需要设置别的，重点来了：第一、第二、第三下面的线需要设置其位置，从头来说：**为了好看，需要在第一、第二、第三的后面使用：：after和content来增加要给空格也就是：content：“&nbsp “；还可以设置其宽度，同样需要添加块级元素display：block；这是为什么？**只是使用border-bottom：1px solid rgb();来给其添加下面的实线，别的不需要。最后通过绝对定位position：absolute；来使其看着居中。