CSS_文字排版

文字排版

前面介紹一些常用的版型後，現在換成文字排版。HTML 的結構基本上都相同，透過 CSS 來做變化。

HTML

Code

<div class="wrap">
            <div class="container">
                <h1>CSS COKE IS AWESOME</h1>
                <div class="content">
                    <p>
                        Lorem ipsum, dolor sit amet consectetur adipisicing
                        elit. Veniam quasi, qui odio tempore, voluptates id
                        reprehenderit consequatur eius dolorum accusamus
                        voluptatem modi, suscipit ea. Quidem vero nisi
                        accusantium cumque enim!
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        A iure reprehenderit hic recusandae facilis aliquam
                        exercitationem labore odit doloremque voluptate, sit
                        aliquid illo assumenda ipsa repudiandae aut eaque
                        aspernatur soluta.
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Eos praesentium saepe eaque repellat labore rem totam
                        iusto ab, ipsum sint quaerat laborum! Sequi sed
                        voluptatibus nemo explicabo corporis ipsa voluptates.
                    </p>
                </div>
            </div>
        </div>

CSS

h1 的顏色區塊部分用 :after 來處理。文字的部分採用 column-count、column-gap 來分行。

Code

// css reset
* {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'Noto Sans TC', sans-serif;
}

body {
    // background-color: #edece1;
    box-sizing: border-box;
}

.container {
    width: 1200px;
    margin: auto;
    display: flex;
    padding: 100px 0;
    h1 {
        width: 400px;
        text-align: right;
        // 留白
        padding: 0 15px;
        background-color: #edece1;
        // h1 下方黑線
        &::after {
            content: '';
            display: block;
            height: 4px;
            width: 4em;
            background-color: #000;
            margin-left: auto;
        }
    }
    .content {
        width: 500px;
        padding: 0 15px;
        // 定義欄位數量
        column-count: 2;
        // 欄位間距
        column-gap: 30px;
    }
}

參考：
https://www.youtube.com/watch?v=-2sRROXi2pI&list=PLqivELodHt3hxeuLX8PYaI8u1GcDaBoJo&index=25&t=0s