WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

4-3. 版型設計第二階段

第二階段：各區域第二層 (粗紅線區域表示新加入的部份)

實例練習 HTML 部份

<body>

  <header>
            <!-- 當插入影像的 width寬、height高 沒有設定時表示以原圖大小呈現 -->
    <img src="images/logo.png" alt="">              <!-- 插入影像 -->
    <p>Traditionally  Royal  hotel</p>              <!-- 輸入文字,設定為段落 -->

  </header>

  <nav>

    <a href="index.html">回網站首頁</a>              <!-- 設定連結, 設計導覽按鈕 -->
    <a href="about.html">關於蒂莫絲</a>              <!-- a標籤表示連結 -->
    <a href="service.html">客房的服務</a>
    <a href="location.html">我們的位置</a>
    <a href="contact.html">聯絡蒂莫絲</a>

  </nav>

  <div id="banner"></div>
                                            <!-- 留意：id名稱也可以是class名稱 -->
  <div id="main">

    <div id="content"></div>                <!--「插入->Div」輸入ID名稱為content-->
    <aside></aside>                         <!--「插入->側邊 Aside」-->

  </div>

  <footer>

    <p>網站設計練習用, 相關影像資訊來自網路及Janfusun, 如有侵權請告知即刻刪除處理</p> 
    <p>Copyright © Timothy Hotel Design by BFT Maintain by TS </p>

  </footer>

</body>

 

 

實例練習 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 右上角的「＋」按鈕，
( 還可以再選擇要使用的英文字體按「＋」按鈕 )
接著在右下方面板處拷貝以下程式碼貼到HTML檔案的</head>前面，或是</body>前面，
<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>
go TOP