Day 9 使用CSS美化網頁 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2023 iThome 鐵人賽

DAY 9

0

Modern Web

基礎網頁開發30天系列第 9 篇

Day 9 使用CSS美化網頁

15th鐵人賽

2023-09-24 07:37:25

196 瀏覽

分享至

由於目前網頁缺乏美觀所以先使用CSS改善原本HTML設計出來的網頁：

首先我增加了最基本的背景顏色，讓網頁顯得更加生動。
接著我改變了Logo的字體大小使其變得更加醒目。
進一步調整Logo的位置讓其能置中。
然後我將欄位的部分增加了背景顏色，讓閱讀者一目瞭然。
並且調整每一個導覽列的位置與間距。
添加過渡的效果讓閱讀者點擊導覽列時能有變色的效果。

body{
    background-color: #F0EFF4;
  }

div.logo {
    font-size: 2.2rem;
    display: flex;
    justify-content: center;
    align-items:center;  
}

nav.navigation ul{
    display: flex;
    justify-content: center;
    background-color: #adc6ea;
    
}

nav.navigation ul li{
    padding: 0rem 2rem;
    list-style-type: none;
    transition: 0.2s ease;    
}

body：這是選擇器，用於選擇整個網頁的<body>元素。
background-color:#8CA9D3;：設置網頁背景顏色為淺紫色（使用十六進制顏色碼表示）。
div.logo：

在此處再次選擇了div.logo，是因為要覆蓋了前面的樣式。
display: flex;：將<div>內的內容以彈性盒模型排列。
justify-content: center;：水平居中對齊內容。
align-items: center;：垂直居中對齊內容。
nav.navigation ul：
這是選擇器，用於選擇class="navigation"的<nav>元素下的<ul>元素。
display: flex;：將<ul>內的元素以彈性盒模型排列。
justify-content: center;：水平居中對齊<ul>內的元素。
background-color: #EBC999;：設置背景顏色為淡藍色（使用十六進制顏色碼表示）。
nav.navigation ul li：
這是選擇器，選擇class="navigation"的<nav>元素下的<ul>元素中的每個<li>元素。
padding: 0rem 2rem;：設置左右內邊距為0，上下內邊距為2個單位。
list-style-type: none;：隱藏列表項目的標記。
transition: 0.2s ease;：設置過渡效果，使列表項目的變化在0.2秒內平滑進行。

目前製作成果：

加入CSS前：

加入CSS後：

Day 8 HTML初步架構(Java Script分頁)

Day 10 使用CSS美化網頁-2

系列文

基礎網頁開發30天共 30 篇

目錄

RSS系列文訂閱系列文

0 人訂閱

完整目錄

直播研討會

{{ item.subject }}

{{ item.channelVendor }} {{ item.webinarstarted }} |

{{ formatDate(item.duration) }}

直播中

尚未有邦友留言

立即登入留言

參賽組數

1050 組

團體組數

40 組

累計文章數

17796 篇

最後報名日

9/15

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 16th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js

IT邦幫忙