iT邦幫忙

2023 iThome 鐵人賽

DAY 26
0
Modern Web

從零寫出捷運美食介紹網頁(HTML/CSS)系列 第 26

[Day26]CSS-基本美化(下)

  • 分享至 

  • xImage
  •  

顏色

屬性 用途 範例 備註
color 設定文字顏色 color: white; 常用單位pxem%
background-color 設定背景顏色 background-color: #D2E9FF; 常用(以紅色為例):英文單字red、RGB值rgb(255, 0, 0)或十六進位制#ff0000

可參考十六進位制色碼表

排版

屬性 用途 範例 備註
height 設定元素高度 height: 60px; 常用單位pxem%
width 設定元素寬度 width: 1380px; 常用單位pxem%
float 設定元素浮動方式 float: left; 常用:靠左left、靠右right

float算是難度較高的屬性,使用它後會覺得網頁升級了一倍,是一個很不錯的排版工具。

範例網頁

之前有提到會使用這些基本美化工具來美化一個網頁,這邊先給一組美化前後對照圖。

https://ithelp.ithome.com.tw/upload/images/20231009/20162303JrQkIgJkzP.png
https://ithelp.ithome.com.tw/upload/images/20231009/2016230358IEE33xMR.png

不敢說做得有多漂亮,但是應該可以明顯看出CSS的強大!那接下來就介紹一下我是怎麼寫的。

建議搭配[Day24]最後的HTML程式碼一起服用。

  • 設定網頁的背景色及body的寬度
    body {
        background-color: #ECFFFF;
        width: 1380px;
    }
    
  • 設定要置中的段落
    h1, .center {
        text-align: center;
    }
    

    .center是指在HTML中有設定class="center"的元素。

  • 設定主標題:外觀及間距
    h1 {
        color: white;
        background-color: #000093;
        margin-top: 20px;
        padding: 15px 0px;
        border-radius: 15px;
    }
    

    因為希望文字能垂直置中,我將padding的值設為上下15px
    margin-top則設定了<h1>元素與網頁頂端的間距。

  • 設定前言:文字置中、大小及粗細
    .foreword {
        text-align: center;
        font-size: 20px;
        font-weight: bold;
    }
    

    .foreword是指在HTML中有設定class="foreword"的元素。

  • 設定 「介紹」「需要的元素及屬性」 兩個區塊:初始高寬、間距、外觀
    .left, .right {
        width: 500px;
        height: 420px;
        padding: 20px 20px;
        background-color: #D2E9FF;
        border-radius: 50px;
    }
    

    .left是指在HTML中有設定class="left"的元素,.right也是一樣的道理。

  • 分別設定 「介紹」「需要的元素及屬性」 兩個區塊的細項
    .left {
        float: left;
        width: 450px;
        margin: 0px 55px 0px 110px;
        padding: 20px 30px;
    }
    .right {
        float: right;
        margin: 0px 110px 0px 55px;
    }
    

    兩個區塊的初始寬度都為500px,但我覺得「介紹」用500px有點寬,所以先把它改成450px

    接著以一開始設定的網頁寬度1380px為基準,設定marginpadding
    margin+元素+padding=width。
    (55+110+450+30+30)+(110+55+500+20+20)=1380。

  • 設定 「介紹」「需要的元素及屬性」 兩個次標題的外觀。
    h2.center {
        margin: 0px;
        font-size: 26px;
        color: #000079;
        background-color: #FDFFFF;
        border-radius: 50px;
        padding: 15px 0px;
    }
    

    h2.center是指在HTML中有設定class="center"<h2>元素。
    因為外層還有一個元素,為了方便設定間距我將這兩個次標題的margin設為0px
    padding上下設為15px,得到文字垂直置中效果。

  • 設定 「需要的元素及屬性」 這個次標題的寬度
    div.right h2.center {
        width: 480px;
        margin: 0px 10px;
    }
    

    div.right h2.center是指在HTML中,有設定class="right"<div>元素中,有設定class="center"<h2>元素。

    div.right的寬度為500pxdiv.right h2.center的寬度為480px
    為了讓這個標題能夠水平置中,我設定margin左右為((500-480)/2)px

  • 設定 「介紹」「需要的元素及屬性」內文:外觀及行距
    .intro {
        font-size: 19px;
        line-height : 2;
        margin-top: 15px;
    }
    p.line_height {
        font-size: 19px;
        line-height : 1.6;
        margin: 0px;
    }
    

    .intro是指在HTML中有設定class="intro"的元素。
    p.line_height是指在HTML中有設定class="line_height"<p>元素。

  • 設定列表:文字大小,小標題:文字粗細及間距。
    ol {
        font-size: 19px;
    }
    li {
        font-weight: bold;
        margin: 14px 0px;
    }
    

以上,成功將原本光禿禿的HTML稍微美化了一番,希望介紹的夠清楚。我是YQ,完賽倒數4天,明天見。


上一篇
[Day25]CSS-基本美化(上)
下一篇
[Day27]實作:美化網頁
系列文
從零寫出捷運美食介紹網頁(HTML/CSS)30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言