金魚都能懂的網頁切版：18、19

訊息對話

https://codepen.io/mikeyam/pen/YzWzwPB?editors=1100

在做訊息對話的HTML排版，可以先訂出主要class，可以為 remote 及 local。

<div class="user remote"></div>
<div class="user local"></div>

接下來，可以再訂出頭像class和訊息的class

<div class="avatar"></div>
<div class="message"></div>

外層，用flex做排版

html, body{
    height: 100%;
}
body{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #d3effb;
}
.dialogue{
    width: 500px;
    padding: 20px;
    box-shadow: 0 0 10px #3292cc;
    background-color: #f4f5f7;
}

使用flex-start可以把文字用flex排列在最上方，避免文字少時，訊息框框依樣維持固定大小
flex-shrink 是 flex-grow 的反向，有剩餘空間，就表示也有不夠空間的時候。flex-shrink 表示空間不夠時的壓縮比例。預設值爲 1。

.user{
    display: flex;
    margin-bottom: 20px;
    align-items: flex-start;
}
.user .avatar{
    width: 90px;
    text-align: center;
    flex-shrink: 0;
}
.user .pic{
    border-radius: 40%;
    overflow: hidden;
}
.user .pic img{
    width: 100%;
    vertical-align: middle;
}
.user .message{
    background-color: #aaa;
    padding: 16px;
    border-radius: 10px;
}

使用flex設定各自在最前方跟最後方

.remote{
    display: flex;
    justify-content: flex-start;
}
.remote .message{
    margin-left: 20px;
    margin-right: 80px;
    background-color: #fff;
    color: #a1b4c5;
    position: relative;
}
.local{
    display: flex;
    justify-content: flex-end;
}
.local .message{
    margin-right: 20px;
    margin-left: 80px;
    order: -1;
    background-color: #3e92cc;
    color: #FFF;
    position: relative;
}

用偽元素做出三角形

.remote .message::before, .local .message::before{
    content: '';
    position: absolute;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}
.remote .message::before{
    border-right: 10px solid #fff;
    left: -10px;
}
.local .message::before{
    border-left: 10px solid #3e92cc;
    right: -10px;
}

時間軸

https://codepen.io/mikeyam/pen/zYBYBvq?editors=1100

用ul>li>a 的結構做出時間軸的排版

<ul class="timeline"></ul>

外層

body{
    background: #edece1;
}
.wrap{
    width: 1200px;
    margin: auto;
}

每個li都是一個時間框

.timeline{
    padding: 100px 0;
}
.timeline li{
    padding: 20px 0;
    width: 50%;
    box-sizing: border-box;
    position: relative;
}

用float排列，奇數邊的向左靠，偶數邊的向右靠
用translateY，讓偶數邊的可以向上位移

.timeline li:nth-child(odd){
    float: left;
    padding-right: 100px;
}
.timeline li:nth-child(even){
    float: right;
    padding-left: 100px;
    transform: translateY(50%);
}

用偽元數使奇數邊出現一個長線

.timeline li:nth-child(odd)::after{
    content: '';
    position: absolute; 
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: #ccc;
    z-index: -1;
}
.timeline li:nth-child(odd)::before{
    right: -10px;
}
.timeline li:nth-child(even)::before{
    left: -10px;
}
.timeline li:last-child::after{
    height: 50%;
}

用偽元素做出中間圓球

.timeline li::before{
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #aaa;
    z-index: 2;
    top: 0;
    bottom: 0;
    margin: auto;
}

在每個a連結加上hover效果

.timeline a{
    padding: 20px;
    display: block;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #aaa;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 5px 3px 5px #777;
}
.timeline a:hover{
    background-color: #6fa5f6;
}
.timeline a:hover h2,.timeline a:hover p{
    color: #fff;
}
.timeline h2{
    color: #333;
    margin-bottom: 10px;
}

在 h2 地方用偽元素做出連接線

.timeline h2::after{
    content: '';
    position: absolute;
    height: 1px;
    width: 100px;
    background-color: #999;
    top: 0;
    bottom: 0;
    margin: auto;
}
.timeline li:nth-child(odd) h2::after{
    right: 0;
}
.timeline li:nth-child(even) h2::after{
    left: 0;
}
.timeline p{
    color: #666;
}

因為是用float排版，要用clearfix固定住
用偽元素做出clearfix

/* clearfix */
.timeline::after{
    content: '';
    display: block;
    width: 100%;
    height: 0px;
    clear: both;
}