Day4 2D網頁遊戲的起始----網頁介面的設計與設定(2)( •̀ .̫ •́ )✧

2022 iThome 鐵人賽

DAY 5

Modern Web

遊戲製作新手救星---Phaser3網頁遊戲教學與實作系列第 5 篇

14th鐵人賽

阿卷

2022-09-20 23:37:34

1047 瀏覽

分享至

網頁的基礎架構建立完畢後，就讓我們來設計我們的網頁吧~

教學所會進行的設定與設計包含:

標題名稱設定
網頁背景顏色

那麼就開始吧!!o(^▽^)┛

1. 標題名稱設定

標題設定程式:

<meta charset="UTF-8" />
<title> 標題名稱 </title>

程式的第一行表示所寫的網頁編碼，寫入後才能使用網頁的內部功能。
而第二行呢，為標題的設定，標題名稱的部分能夠任意填寫，那我們就來實作看看吧~

首先先將標題程式碼寫入

<html>
    <head>
        <meta charset="UTF-8" />
        <title>ONE DAY</title>
    </head>
    <body>

    </body>
</html>

寫好的畫面如下圖所示

輸入完畢後就可以開啟Live Server看到更改的標題囉~
(記得要存檔才能看得到網頁的變化!)

2. 網頁背景顏色

再來來挑選網頁的背景顏色吧~

首先這邊是設定的程式碼：

        <style type="text/css">
            body 
            {
                display: flex;
                background-color: color;
            }
        </style>

display: flex;
這一行程式碼表示套入flex元件，在套入後才能進行畫面編輯。

而background-color就是我們的背景顏色設定啦~
在其後面可以直接用英文填入想要的顏色，例如想要粉紅色的背景就填入"pink"，
最後所填入的就是我們的網頁背景顏色喔✪ ω ✪

那再來是實作部分，將我們的程式碼寫入

<html>
    <head>
        <meta charset="UTF-8" />
        <title>ONE DAY</title>
        <style type="text/css">
            body 
            {
                display: flex;
                background-color: pink;
            }
        </style>

    </head>
    <body>

    </body>
</html>

寫好的畫面如下圖所示