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等。