DAY-3 利用前兩天所學做做看

2023 iThome 鐵人賽

DAY 3

SideProject30

sideproject-簡易網站系列第 3 篇

15th鐵人賽

Penguin0705

2023-09-17 03:10:58

255 瀏覽

分享至

原本以為清單及網址的開頭設其他代號也可以
但今天在實際應用時
才發現清單語法都需由

<li> 1...</li>
<li> 2...</li>
<li> 3...</li>

做開頭及結尾
在貼上網址時
得用

<a href="URL"></a>

開頭及結尾做使用

這次是用遊戲角色選單當練習
附上本次的程式碼
HTML

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>英雄聯盟</title>
    <link href="styles/style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <h1>角色介紹</h1>
    <li><a href="https://www.leagueoflegends.com/zh-tw/champions/k-sante/">卡桑帝</a></li>
    <img src="C:\Users\calvi\OneDrive\Desktop\web-projects\web-projects\test-site\images\RiotX_ChampionList_ksante.jpg" alt="角色圖片" />  
    <li><a href="https://www.leagueoflegends.com/zh-tw/champions/aatrox/">厄薩斯</a></li>
    <img src="C:\Users\calvi\OneDrive\Desktop\web-projects\web-projects\test-site\images\RiotX_ChampionList_aatrox.jpg" alt="角色圖片" />
  </body>
</html>

CSS

html {
    background-color: #2e033d;            /*網頁背景顏色*/
  }

h1 {                                        /*角色名稱*/        
    font-size: 60px;            
    text-align: center;                     /*字型位置(此處居中)*/
    line-height: 1;
    letter-spacing: 2px;                    /*間距*/
}
li {                                        /*技能字體 大小*/
    font-size: 30px;                        /*大小*/
    font-family: 'Noto Serif TC', serif;    /*字體*/
    line-height: 2;
}

.red {
    color: red;

  }
.blue {
    color: blue;
  }