云麓谷高级作业

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

从零开始写云麓谷高级作业，之前面试的时候压根没写（我也不知道我怎么混进去的），要实现的效果如下

---

正文

一、构建html骨架

将整体布局分为四大块：页头、标题、图画廊、页眉。开始先用div概括出四大块

二、使用css添加样式

1、盒子模型

css主要为html添加各种灵活多变的样式，以弥补html本身样式的单调，具体用法详见菜鸟教程。 css中有一个很重要的模型：盒子模型。

盒子模型主要包括：边距(Margin)，边框(border)，填充(padding)，和实际内容(content)。所有的html页面中都可以由一个个“盒子”构成，把每个盒子当作单一的元素，并对这个盒子添加各种样式，类似于c++面向对象，每个对象有自己的属性和函数功能，所有对象构成了整个页面，每一个单独的标签可以用class类进行盒子模型封装，也可以用div块将一群标签变成一个“盒子”。

PS:在用div对盒子进行封装时，有部分属性时无法被这个块的元素继承的，例如盒子属性和背景属性都无法被继承，但绝大多数的字体属性时可以被继承的。

2.flex布局

flex是flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为flex布局。

flex布局的用法，1、首先使用display属性表明使用flex布局。定义一个flex容器,为内容创建了一个新的flex环境 注意：当设置 flex 布局之后，子元素的 float、clear、vertical-align 的属性将会失效。

.container {
  display: flex | inline-flex;
}

2、用flex-direction定义主轴方向（默认为横向）。创建了主轴，定义了item在flex容器中的方向。 flexbox是单向布局，可以将item放在水平行或垂直列中

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

-row(默认): 如果书写方式是ltr，那么item从左向右排列；如果书写方式是rtl，那么item从右向左排列

-row-reverse: 如果书写方式是ltr，那么item从右向左排列；如果书写方式是rtl，那么item从左向右排列

-column: 和row类似，只不过方向是从上到下排列

-column-reverse: 和row-reverse类似，只不过方向是从下向上排列

3、用flex-wrap 、flex-flow 、justify-content对flex布局里的元素进行排列规定

部分原文出自此处https://zhuanlan.zhihu.com/p/46684565

PS:有张特别好的图推荐一下：

3、难点

作业中主要的难点最后的footer-logo，主要是两方面：logo前后的分割线以及logo外围的⚪。

首先logo外围的圆，可以通过改变logo边框形状来改变，并对边框宽度及颜色进行处理，便可以显现出圆。

.footer-logo img
{
    height:50px;
    width:50px;
    padding: 15px;
    border: 1px solid  #777;/*边框宽度和颜色设置*/
    border-radius: 50%/*圆形边框*/

}

logo前后的线课上说了三种方法，
第一种：直接分割线，然后用positionlogo移到中间（但貌似后面排长说了不能用position？还是我听错了）
第二种：把前后两条线当作两个图片，三个图片flex布局横向对齐（但是图片制作麻烦而且线的位置难把握）

第三种，大致思路是，用伪元素after和before，在logo前后用content填充“ ”空格，再调整height跟颜色，background不断重复形成了一条线

/*logo前后用平铺背景形成线*/
.footer-logo::before,.footer-logo::after
{
    content: '';
    flex: 1;
    height: 1px;
    background: #ccc
}

.footer-logo::before{
    margin-right: 10px;/*圆圈和线的空隙*/
}
.footer-logo::after{
    margin-left: 10px;
}

下面网页还有很多其他实现方式，值得借鉴。
上述部分内容出自此处：https://cloud.tencent.com/developer/article/1587125

---

总结

这次高级作业大致学会了html为骨架css为填充的网页编程方式，flex布局也学会了不少（主要是改某些莫名其妙的bug的时候到处查资料），git的部分这里就不说了