HTML

簡易個人介紹網站

先來看看今日目標

我們需要些什麼

一張代表自己的頭像

一段自我介紹

一些簡介

一個好看的背景

body {
  /* 背景圖片 */
  background-image: url( ' 圖片網址 ' );

  /* 背景顏色 */
  background-color: 顏色名稱或色碼 ;

  /**
    repeat	預設重覆方式,背景圖片依 x 軸與 y 軸重覆呈現。
    repeat-x	背景圖片沿 x 軸重覆呈現。
    repeat-y	背景圖片沿 y 軸重覆呈現。
    no-repeat	背景圖片不重覆出現,也就是只出現一次。
  **/
  background-repeat: 方向與重覆參數;

  /**
    scroll	預設值,背景圖片會隨著滑鼠滾動而上下移動。
    fixed	背景圖片固定不動,滑鼠上下滾動僅會移動網頁主體。
  **/
  background-attachment: 顯示參數;

  /**
    水平方向	left - 靠左對齊、center - 置中對齊、right  - 靠右對齊
    垂直方向	top  - 靠上對齊、center - 置中對齊、bottom - 靠下對齊
  **/
  background-position: 背景圖片水平位置參數 背景圖片垂直位置參數 ;
}

背景的CSS

表格

<table border="1">
 <tr>
   <td>這裡是第一行的第一個欄位</td>
   <td>這裡是第一行的第二個欄位</td>
 </tr>
 <tr>
   <td>這裡是第二行的第一個欄位</td>
   <td>這裡是第二行的第二個欄位</td>
 </tr>
</table>
這裡是第一行的第一個欄位 這裡是第一行的第二個欄位
這裡是第二行的第一個欄位 這裡是第二行的第二個欄位

表格寬度

<table border="1" style='width: 70%;'>
 <tr>
   <td style='width: 30%;'>這裡是第一行的第一個欄位</td>
   <td style='width: 70%;'>這裡是第一行的第二個欄位</td>
 </tr>
 <tr>
   <td>這裡是第二行的第一個欄位</td>
   <td>這裡是第二行的第二個欄位</td>
 </tr>
</table>
width: '寬度'
<img src='圖片連結'>
<style>
  img {
    border-radius: 50%;
  }
</style>
<img src='圖片連結'>

標題

內文

<h1>...</h1>

<h2>...</h2>

<h3>...</h3>

<h4>...</h4>

<h5>...</h5>

<h6>...</h6>
<p>...</p>

FreeCodeCamp

FreeCodeCamp Rank

w3cschool

MDN

高中生解題系統

LeetCode

HackerRank

Email: jd615645@gmail.com

謝謝大家的參與!

cse_camp_html_2

By jd615645

cse_camp_html_2

  • 1,190