CSS_文字排版9

文字排版9

---

---

---

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.
                        Quam atque laboriosam omnis velit dolorum similique
                        provident veniam, corporis ullam maxime repudiandae
                        quasi mollitia porro magnam tempora id quos beatae
                        saepe?
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Quam atque laboriosam omnis velit dolorum similique
                        provident veniam, corporis ullam maxime repudiandae
                        quasi mollitia porro magnam tempora id quos beatae
                        saepe?
                    </p>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit.
                        Quam atque laboriosam omnis velit dolorum similique
                        provident veniam, corporis ullam maxime repudiandae
                        quasi mollitia porro magnam tempora id quos beatae
                        saepe?
                    </p>
                </div>
            </div>
        </div>

CSS

用 :before、:after 處理分隔線。

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;
}

.wrap {
    margin: 100px 0;
}

.container {
    width: 1200px;
    margin: auto;
    text-align: center;
    h1 {
        width: 100%;
        font-size: 90px;
        // 分隔線(簡單版)
        // border-top: 1px solid #aaa;
        // border-bottom: 6px solid #aaa;
        margin-bottom: 0.5em;
        // 分隔線
        &::before,
        &::after {
            content: '';
            display: block;
            height: 5px;
            width: 2em;
            background-color: #aaa;
            margin: auto;
        }
    }
    .content {
        flex-shrink: 0;
        p {
            margin-bottom: 1em;
            // 首字放大
            // &:first-child::first-letter {
            //     font-size: 40px;
            //     float: left;
            //     padding-right: 10px;
            // }
        }
    }
}

上圖2的作法：

h1 加上 flex 排序後，調整分隔線位置。使用 flex-grow: 1 取代寬度，避免影響版面。

Code

...
display: flex;
        // 分隔線共同樣式
        &::before,
        &::after {
            content: '';
            display: block;
            height: 5px;
            // 填滿，避免設定寬度大小時影響版面(取代寬度設定 width)
            flex-grow: 1;
            background-color: #aaa;
            margin: auto;
        }
        // 分隔線位置
        &::before {
            margin-right: 1em;
        }
        &::after {
            margin-left: 1em;
        }
...

上圖3的作法：

將分隔線的樣式加在文字區塊 .content 上，用 position 來定位。

Code

	...
.content {
        position: relative;
        padding: 1em;
        // 上下引號『』
        &::before,
        &::after {
            content: '';
            position: absolute;
            width: 50px;
            height: 50px;
        }
        &::before {
            top: 0;
            left: 0;
            border-top: 3px solid #aaa;
            border-left: 3px solid #aaa;
        }
        &::after {
            bottom: 0;
            right: 0;
            border-bottom: 3px solid #aaa;
            border-right: 3px solid #aaa;
        }
        p {
            margin-bottom: 1em;
            // 首字放大
            // &:first-child::first-letter {
            //     font-size: 40px;
            //     float: left;
            //     padding-right: 10px;
            // }
        }
    }
   ...

參考：
https://www.youtube.com/watch?v=VN-GcKUkdis&list=PLqivELodHt3hxeuLX8PYaI8u1GcDaBoJo&index=27
https://hsuchihting.github.io/css/20200803/1277340026/