切版練習筆記(一)

本文链接：https://blog.youkuaiyun.com/XI_MILU/article/details/117370169

这篇博客详细介绍了网页切版的步骤，从设置基本的HTML结构开始，逐步通过CSS实现全屏背景、文字排版、颜色渐变、图片添加以及文字样式调整。博主使用了Flexbox布局来实现内容的垂直居中，并通过调整CSS属性来创建标题的换行及底线效果。最后，引入Google字体API设置字体，增加了主副标题的间距，并在背景中添加了图片，形成了美观的网页设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目標

Step 1.

網頁文字內容

<body>
    <div class="banner">
        <div class="container">
            <div class="banner-txt">
                <h1>
                    金魚都能懂的
                    <small>這個網頁怎麼切</small>
                </h1>
                <h2>圖文滿版區塊</h2>
                <p>
                    這畫面實在很常見，在各種樣版網站可說是設計常客
                    <br>
                    金魚切不出來實在說不過去阿
                </p>
            </div>
        </div>
    </div>
</body>

<h1>: 網頁主標題
<small>: 使文本的字體變小一號
<h2>: 網頁副標題
<br>: 換行

Step 2.

網頁排版初始化 + 寫好會用到的 CSS 選取器

網頁初始化

<style>
	* {
	    margin: 0;
	    padding: 0;
	    list-style: none;
	}

	.banner {}
    .container {}
    .banner-txt {}
    .banner-txt h1 {}
    .banner-txt h1 small {}
    .banner-txt h2 {}
    .banner-txt p {}
</style>

Step 3.

為banner設定寬度、高度和背景色

banner

<style>
	* {
	    margin: 0;
	    padding: 0;
	    list-style: none;
	}
	
	.banner {
	    width: 100%;
	    height: 100vh;
	    background-color: #ccc;
	}
	.container {}
	.banner-txt {}
	.banner-txt h1 {}
	.banner-txt h1 small {}
	.banner-txt h2 {}
	.banner-txt p {}
</style>

vh (view height): 螢幕可視範圍高度的百分比。
vw (view width): 螢幕可是範圍寬度的百分比。

當height填100vh時，意思就是這個div的高度要是整個螢幕的可視範圍，而且這個區塊會隨著瀏覽器的縮放而改變。

如果height是填100%，div的高度是依照他的內容(ex.文字)而定的。

Step 4.

設定container寬度、高度

<style>
	/*取得父元素100%的寬度與高度*/
	.container {
	     width: 100%;
	     height: 100%;
	 }
</style>

Step 5.

設定 banner-txt，使版面垂直居中

垂直居中

<style>
    .banner-txt {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
</style>

將display設定為flex，這樣banner-txt的內容會呈現一橫列狀態，為了使它垂直排列，所以將利用flex-direction把主軸修改為column，並使主軸的對齊方式為置中。

flexbox 基本上都是靠主軸 (main axis) 和交叉軸 (cross axis) 運作的。
main-cross-axis

flex-direction: 設定主軸 (main axis) 的方向。
justify-content: 主軸 (main axis) 的對齊方式。
align-items: 交叉軸 (cross axis) 的對齊方式。

Step 6.

設定文字大小

文字大小

<style>
    .banner-txt h1 {
        font-size: 72px;
    }
    .banner-txt h1 small {}
    .banner-txt h2 {
        font-size: 48px;
    }
    .banner-txt p {
        font-size: 20px;
    }
</style>

Step 7.

把主標題裡的文字換行並加一條底線

文字換行和加底線

<style>
	.banner-txt h1 {
	    font-size: 72px;
	    border-bottom: 1px solid #333;
	}
	.banner-txt h1 small {
	    display: block;
	}
</style>

border-bottom: 下邊框。
display:block屬性會使東西自己占據一整列，所以可以用來實現換行效果。

Step 8.

將原本的灰色背景改成漸層式背景(這裡是一半淺藍色，另一半透明色)

漸層背景

<style>
        .banner {
            width: 100%;
            height: 100vh;
            /* background-color: #ccc; */
            background: linear-gradient(115deg, #7bf 50%, transparent 50%) center center / 100% 100%;
        }
    </style>

linear-gradient( 角度，開始顏色，結束顏色)
ex. 從藍色漸變到紅色。
linear-gradient( 45deg, blue, red);

ex. 版面50%的範圍是淺藍色，另外50%的範圍是透明色。
linear-gradient( 115deg, #7bf 50%, transparent 50%)

程式碼中的center center為位置，100% 100%分別為背景的寬度和高度。

Step 9.

在背景加上圖片

圖片背景

<style>
        .banner {
            width: 100%;
            height: 100vh;
            /* background-color: #ccc; */
            background: linear-gradient(115deg, #7bf 50%, transparent 50%) center center / 100% 100%,
                        url("https://picsum.photos/1200/600/?random=1") right center / auto 100%;
        }
</style>

Step 10.

底線範圍調整。原始的底線範圍貫穿整個橫列，我們希望將它修改成如下圖

底線調整

<style>
	.banner-txt {
	    height: 100%;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: flex-start;
	}
</style>

align-items: 交錯軸的對齊方式(此處的交錯軸是row)，flex-start為向交錯軸的起點對齊(此處的意思就是靠左對齊)。

Step 10.

字型與文字粗細設定 (使用google api)

字型與文字粗細

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;700;900&display=swap" rel="stylesheet">
<style>
    * {
         margin: 0;
         padding: 0;
         list-style: none;
         font-family: 'Noto Sans TC', sans-serif;
     }
     .banner-txt h1 {
         font-size: 72px;
         border-bottom: 1px solid #333;
         font-weight: 900;
     }
     .banner-txt h1 small {
         display: block;
         font-weight: 700;
     }
     .banner-txt h2 {
         font-size: 48px;
         font-weight: 700;
     }
     .banner-txt p {
         font-size: 20px;
         font-weight: 300;
     }
</style>

font-family: 要使用的字型。
font-weight: 文字粗細，可以是 100~900 的數字或 normal、bold、bolder、lighter…等值。

Step 11.

為主、副標題增加一點間距

<style>
	.banner-txt h1 {
	       font-size: 72px;
	       border-bottom: 1px solid #333;
	       font-weight: 900;
	       padding-bottom: 20px;
	       margin-bottom: 20px;
	   }
</style>