1.3 创建 learn_more 页面-flex布局

内容设计

头脑风暴+总结方法，得出需要四个导航，所以直接设置4个链接。

风格设计

保留原有卡通背景图，原本想做出4张卡片，但由于色彩和样式会显得空荡，后来选择设计固定形式自动居中的窗户摆设。
一个窗户，四扇窗口。颜色取材 Color hunt等网站。

html

.container -> .window
.window -> 4* .card

css

固定块级居中

.window {
    固定width和height;
    margin: 1em auto;
    
    display: flex;
    justify-content: space-around;
    align-content: space-around;
    flex-wrap: wrap;
}

.card {
	flex: 0 0 40%;
	height: 40%;
    display: flex;
	justify-content: center;
	align-items: center;
}

加上一些风格设计border、box-shadow、bg、cursor等。