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文件再次壓縮