之前我們用HTML寫了三個網頁，今天就結合前幾天所學的CSS來將他們美化一下。先提供最終目錄。

以下皆是用瀏覽器縮放125%為基準製作。

首頁

附上HTML程式碼。

• 設定網頁及圖片：寬度

  body, img {
      width: 1185px;
  }
  

• 設定主標題及段落：文字置中

  h1, p {
      text-align: center;
  }
  

• 設定主標題：顏色、文字大小、內外間距、外框圓角

  h1 {
      background-color: #0047b0;
      color: white;
      font-size: 30px;
      padding: 10px 0px;
      margin-bottom: 0px;
      border-radius: 10px;
  }
  

• 設定段落：文字大小

  p {
      font-size: 18px;
  }
  

迅速完成了首頁美化的部分，來看看對照圖吧！

行政區網頁

附上HTML程式碼。

• 設定網頁：寬度

  body {
      width: 1185px;
  }
  

• 設定主標題：顏色、文字置中、內外間距

  h1 {
      text-align: center;
      background-color: #cfdeff;
      color: #000000;
      padding: 10px 0px;
      margin-top: 30px;
  }
  

• 設定 <div>區塊 ：靠左浮動、顏色、高寬、內外間距、邊框樣式

  div {
      float: left;
      background-color: #e2ebff;
      border-radius: 30px;
      width: 340px;
      height: 400px;
      margin: 10px 25px 0px;
      padding-top: 10px;
      border: 2px #003060 dotted;
  }
  

• 設定次標題：文字置中

  h2 {
      text-align: center;
  }
  

• 設定列表：背景色、高度、內外間距、邊框圓角

  ul {
      background-color: white;
      height: 280px;
      margin: 30px 20px;
      padding-top: 10px;
      border-radius: 500px;
  }
  

• 設定列表：各項行距

  li {
      line-height : 3;
  }
  

這樣就完成行政區網頁的美化，以下為對照圖。

站點網頁

附上HTML程式碼。

• 設定網頁：寬度及背景色

  body {
  width: 1185px;
  background-color: #FFFAF4;
  }
  

• 設定主標題：文字置中、邊框樣式、內外間距

  h1 {
      text-align: center;
      border: 10px #0070BD solid;
      border-right: 10px #C48C31 solid;
      border-bottom: 10px #C48C31 solid;
      border-radius: 100px;
      padding: 20px 0px;
      margin-bottom: 0px;
  }
  

• 設定 <div>區塊 ：高度、內外間距、邊框圓角、背景色

  div {
      height: 360px;
      margin: 40px 0px;
      padding: 30px 0px;
      border-radius: 1em;
      background-color: rgba(219, 219, 219, 0.499);
  }
  

• 設定圖片：靠右浮動、寬度、邊框圓角、內外間距

  img {
      float: right;
      width: 400px;
      border-radius: 500px;
      margin-right: 50px;
      padding: 40px 0px;
  }
  

• 設定次標題、段落及表格：靠左浮動、寬度、外間距

  h2, p, table {
      float: left;
      width: 600px;
      margin: 0px 50px;
      margin-right: 0px;
  }
  

• 設定次標題及段落：行高、外間距

  h2, p {
      line-height: 2;
      margin-top: 10px;
  }
  

• 設定表格：框線樣式、內間距

  table, td, th, tr {
      border: 2px solid black;
      border-collapse: collapse;
      border-color: grey;
      padding: 5px;
  }
  

• 設定表格：外間距

  table {
      margin-top: 20px;
  }
  

• 設定欄位標題：寬度

  th {
      width: 25%;
  }
  

以上，完成站點網頁美化，附上對照畫面。

三個網頁中，美化前後差異最大的絕對是站點網頁，因為每張圖片的大小都不一樣，如果沒有好好設定、排版過，就會顯得特別凌亂。
這樣就完成了全部的實作，後面幾天會整理一些常用的特性。我是YQ，完賽倒數3天，明天見。