18. 蒂莫絲版型CSS部份 PART-2   網頁第二層框架的CSS設計

設定 header 區域內第二層的元素物件

<style type="text/css">  /*這一行的這個標籤不用輸入*/
header p {
  font-size: 13px;                   /*設定這行文字的字體大小*/
  letter-spacing: 8px;               /*設定這行字距空間*/
}
</style>

 

設定 nav 區域內第二層的元素物件

<style type="text/css">  /*這一行的這個標籤不用輸入*/
nav a {
  /*background-image: url(images/btn_hover.png); 先設定按鈕的背景影像, 以後改為滑鼠滑入才顯示*/
  background-repeat: no-repeat;                /*設定背景影像不重複*/
  background-position: center bottom;          /*設定背景影像的定位位置*/

  width: 120px;     /*設定一個按鈕區域的寬度*/
  /*<a>標籤並不是block區塊型的標籤, 無法設定寬度與高度*/
  /*如果設定為block則會往下排列, 因此設定「顯示方式」為「行中區塊」*/
  display: inline-block;

  padding-top: 1px;        /*設定文字上方空出的內邊界, 讓背景圖顯示在這個位置*/
  padding-bottom: 5px;     /*設定文字下方空出的內邊界, 讓背景圖顯示在這個位置*/

  color: #f7e6bf;           /*設定按鈕的文字顏色*/
  text-decoration: none;    /*設定裝飾線條(上線、底線、刪除線)皆none無*/

  font-size: 17px;          /*設定按鈕文字大小*/
  font-family: 'Noto Sans TC', sans-serif;     /*設定文字字體為 Google雲端字體中的黑體字*/
  letter-spacing: 1px;               /*設定這行字距空間*/
}

nav a:hover {
  background-image: url(images/btn_hover.png);  /*設定按鈕在滑鼠滑入時背景顯示的影像*/
}   
</style>

要使用 Google 雲端字體時，必須在最上方先載入 Google 雲端字體
先前往https://fonts.google.com/
Language 選擇 Chinese (Traditional)
選擇 Noto Sans TC 右上角的「＋」按鈕
先拷貝以下程式碼貼到CSS檔案的最上方
<link href="https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap" rel="stylesheet">
接著再拷貝以下程式碼則到CSS選取器的屬性設定中
font-family: 'Noto Sans TC', sans-serif;

 

設定 #main 區域內的第二層區域以 浮動 方式設定 左右分欄

<style type="text/css">  /*這一行的這個標籤不用輸入*/
#content {
  width: 900px;                             /*配合背景影像設定左方區域的寬度*/
  margin: 20px;                             /*設定四周邊界*/
  float: left;                              /*設定浮動靠左*/
  /*background-color: rgba(0, 136, 255, 0.4); 為了檢測先設定背景顏色,以後再刪除*/
}

aside {
  width: 200px;                             /*配合背景影像設定右方區域的寬度*/
  margin: 20px;                             /*設定四周邊界*/
  float: right;                             /*設定浮動靠右*/
  /*background-color: rgba(235, 0, 255, 0.4); 為了檢測先設定背景顏色,以後再刪除*/
}
</style>