1.4 创建intro页面-grid布局

内容设计

按照时期，将自己的过去经历划分为几个阶段，分别写出概况。

页面设计

顶部为导航栏，尾部为背景图，中间为内容。中间左为目录，右为相应的media object。

html文件

容器之中：

1. cata

   1. ol li

2. 5 * fragment (media object)

   1. img
   2. article
   3. read_button
3. bg

css文件

//更换字体、字体颜色

main {
    font-family: "华文中宋", Arial, sans-serif;
    color: black;
}

grid 布局

main .container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: repeat(5, 150px) 249px;
    grid-template-areas: "cata vil"
                         "cata out"
                         ".    pri"
                         ".    sec"
                         ".    uni"
                         "bg   bg";
    grid-gap: 1em 2em;
}

子元素嵌入

.out_of_home {
    grid-area: out;
}
.village {
    grid-area: vil;
}
.primary_school {
    grid-area: pri;
}
.secondary_school {
    grid-area: sec;
}
.university {
    grid-area: uni;
}
.bg {
    grid-area: bg;~~~~
}
.cata {
    grid-area: cata;
}

flex嵌入、media object样式:img固定、article分栏、read底部

.fragment {
    display: flex;
    padding: .5em;
    border-radius: .2em;
    background-color: #fff;
    box-shadow: -1px 2px 2px #aaa;
}
.fragment img{
    height: 100%;
}
.fragment article {
    height: 100%;
    margin-left: .5em;
    padding-left: .5em;
    border-left: 2px solid #eee;
    overflow: hidden;
}
.fragment h3 {
    margin-top: 0;
}
.fragment p {
    text-indent: 2em;
}
.read {
    display: flex;
    align-items: flex-end;
}

压缩文件

img文件再次压缩