云麓谷作业1

云麓谷高级作业

---

前言

---

虽然之前学了一点flex布局，但是代码还是有很多不完善的地方，这次等于重做了一遍。

构建html骨架

这个是整体的布局，可以把他看作人的身体，分别是头部，腰部，腿部，脚步（比喻一下哈）然后开头用div总括。

灵活运用css

理解盒子模型

通过菜鸟教程我们可以知道，盒子的主体部分包括Margin，Border，Padding，Content，可以把每个盒子当成一个独立的单元，然后在调节边距，宽度的时候要自己去尝试，还蛮有意思的。

flex布局

弹性布局还是很巧妙的，但是按照菜鸟教程上面来的话其实感觉还是要灵活运用，首先要用display表示自己要用flex布局了，之后就是定义方向，关于column和row我还是经常搞错哈哈。

<font color=#999AAA>

<hr style=" border:solid; width:100px; height:1px;" color=#000000 size=1">

# 圆圈旁边俩条线（难）
<font color=#999AAA >这里用到了border-radius也就是圆形边框，至于旁边俩条线，我则是压缩了盒子将它搞成线状，并对边框的宽度以及颜色进行了调整。