云麓谷第一次培训-高级作业

前言

最近一直庸庸碌碌，对于云麓谷的博客又拖延了很久很久，也没有练手，这次就将高级作业的思路重构一下，以后不会再拖啦！

代码重构

这是要形成的页面效果

1、划分区域

首先将页面划分为导航栏、头部、主体内容、页尾四部分

2、构建骨架

导航栏

将五个元素用HTML表现出来

其它区域同上








但是很显然，上图中的CSS代码只能将这些元素显示在网页中，杂乱而且丝毫不elegant

so,在不考虑颜色与字体的前提下，要如何实现所需的布局呢？
布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

而弹性布局，即flex布局，便能以一种简单的方式来实现，大大减缓了头发飘落在键盘上的速度

3、添加样式

首先回顾一下flex布局
flex的使用对象可以是任何容器，也可以是行内元素（ display: inline-flex;）
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。因此，想用flex的话，最好整个页面的布局都用flex，否则可能会产生难以预料而且难以修改的页面表现。


1）声明
display: flex; 或
display: inline-flex;

2）确定主轴方向
对于整个页面来说，盒子以竖直方向排列，且居中放置
因此主轴为column，交叉轴为center

导航栏的两个盒子排列方式为两端对齐，项目之间的间隔都相等。
因而使用主轴上的对齐方式为space-between

此后的盒子排布同上

当然，要复现一个页面，还要有许许多多的精细化处理，如颜色，外边距，背景等等，这里就先不赘述了

除了flex布局的应用外，在制作过程中也遇到了难题

难题及解决方式

对于图片圆边框与两侧横线的处理
1、长横线用页尾盒子的border-bottom来实现
2、图片使用transform定位
3、圆角边框border-radius
4、内边距padding实现图片与边框距离
5、背景设置为白色抹除内边距里的横线

小tips

1、代码规范
2、命名规范
3、利用插件

over