html 部分

第一步、title warning

<body>
    <header class='warning'>
        注意!本站為練習用網站，因教學用途刻意忽略資安的實作，
        註冊時請勿使用任何真實的帳號或密碼。
    </header>
</body>

第二步、設定主內容

先放假文，撐開看 css 效果

<main class='board'>
        Lorem, ipsum dolor sit amet consectetur, adipisicing elit. Quasi, voluptas assumenda ipsam dignissimos voluptatibus totam debitis culpa, beatae, suscipit, perspiciatis minus repellendus magnam sint autem delectus nihil ab. Voluptatibus, quisquam.
    </main>

現在，拿掉假文加上 title

<main class='board'>
        <h1 class='board__title'>Comments</h1>
</main>

設定留言區塊

<!--暱稱區塊-->
<div>
    <span>暱稱：</span>
    <input type="text" name='nickname'>
</div>

<!--留言區塊-->
<textarea name="content" rows="10"></textarea>

利用 <hr> 產生分隔線或是用 css 加上高度撐開

<div class="board__hr"></div>

<!--底下每一則留言都是一張卡片，左邊為頭像、右邊為文字部分-->
<section>
    <div class="card">
        <div class="card__avatar">
        </div>
        <div class="card__body">
                <div class='card__info'>
                    <span class='card__author'>小蜜蜂</span>
                    <span class='card__time'>2021-6-10 10:35:54</span>
                </div>
                <p class='card__content'>
                  Lorem ipsum dolor sit, amet consectetur adipisicing, elit. Reprehenderit unde officiis magni, velit fuga quidem eum? Hic deserunt, amet fugit esse aperiam fuga quasi a expedita ipsam qui earum, pariatur.
                </p>
        </div>
    </div>
</section>

css 部分

第一步、設定 BODY

背景顏色
margin: 0 (因為瀏覽器會對 body 有預設的 margin)
```
body {
 margin: 0;
 background: #f7f7f7;
}
```

第二步、title warning

.warning {
    background: #ffc4c6;
    font-weight: bold;
    color: #a20606;
    text-align: center;
    width: 100%;
    padding: 10px;
}

第三步、主內容

padding 設多一點，會讓裡面的東西跟外面更有距離一點。

.board {
    max-width: 700px;
    width: 100%;
    background: white;
    margin: 20px auto;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 1px 1px 3px #e8e8e8;
}

留言區塊部分

.board__comment textarea {
    width: 100%;
    margin-top: 10px;
    padding: 10px;
    box-sizing: border-box;
    border: 1px solid #c2dfbb;
    outline: none;
}

.board__comment input {
    border: 1px solid #c2dfbb;
    outline: none;
    box-sizing: border-box;
    padding: 5px;
}

留言區按鈕

.board__submit-btn:hover {
    background: #c2dffb;
}

.board__submit-btn {
    padding: 10px;
    border: 1px solid #c2dffb;
    border-radius: 5px;
    width: 100px;
    color: #583c63;
    font-size: 16px;
    font-weight: bold;
    background: white;
    text-align: center;
    transition: background 1s;
    margin-top: 10px;
}

分隔線

.board__hr {
    margin: 20px auto;
    background: #c2dfbb;
    height: 1px;
    max-width: 95%;
}

每一則留言

.card {
    margin: 20px 0;
    min-height: 70px;
    display: flex;
}

.card__avatar {
    border-radius: 50%;
    height: 50px;
    min-width: 50px;
    background: #c2dffb;
}

.card__body {
    margin-left: 20px;
}

.card__content {
    margin-top: 10px;
    max-width: 100%;
}

.card__author {
    color: #5c9edc;
    font-weight: bold;
}
.card__time {
    margin-left: 5px;
    color: #a0a0a0;
}

跑版問題，之後再修