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

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

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

實例練習 HTML 部份

  1. <body>
  2.  
  3. <header>
    <!-- 當插入影像的 width寬、height高 沒有設定時表示以原圖大小呈現 -->
  4. <img src="images/logo.png" alt=""> <!-- 插入影像 -->
  5. <p>Traditionally Royal hotel</p> <!-- 輸入文字,設定為段落 -->
  6. </header>
  7.  
  8. <nav>
  9. <a href="index.html">回網站首頁</a> <!-- 設定連結, 設計導覽按鈕 -->
  10. <a href="about.html">關於蒂莫絲</a> <!-- a標籤表示連結 -->
  11. <a href="service.html">客房的服務</a>
  12. <a href="location.html">我們的位置</a>
  13. <a href="contact.html">聯絡蒂莫絲</a>
  14. </nav>
  15.  
  16. <div id="banner"></div>
  17. <!-- 留意:id名稱也可以是class名稱 -->
  18. <div id="main">
  19. <div id="content"></div> <!--「插入->Div」輸入ID名稱為content-->
  20. <aside></aside> <!--「插入->側邊 Aside」-->
  21. </div>
  22.  
  23. <footer>
  24. <p>網站設計練習用, 相關影像資訊來自網路及Janfusun, 如有侵權請告知即刻刪除處理</p>
  25. <p>Copyright © Timothy Hotel Design by BFT Maintain by TS </p>
  26. </footer>
  27.  
  28. </body>

 

 

實例練習 CSS 部份

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

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

 

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

  1. <style type="text/css"> /*這一行的這個標籤不用輸入*/
  2. nav a {
  3. /*background-image: url(images/btn_hover.png); 先設定按鈕的背景影像, 以後改為滑鼠滑入才顯示*/
  4. background-repeat: no-repeat; /*設定背景影像不重複*/
  5. background-position: center bottom; /*設定背景影像的定位位置*/
  6.  
  7. width: 120px; /*設定一個按鈕區域的寬度*/
  8. /*<a>標籤並不是block區塊型的標籤, 無法設定寬度與高度*/
  9. /*如果設定為block則會往下排列, 因此設定「顯示方式」為「行中區塊」*/
  10. display: inline-block;
  11.  
  12. padding-top: 1px; /*設定文字上方空出的內邊界, 讓背景圖顯示在這個位置*/
  13. padding-bottom: 5px; /*設定文字下方空出的內邊界, 讓背景圖顯示在這個位置*/
  14.  
  15. color: #f7e6bf; /*設定按鈕的文字顏色*/
  16. text-decoration: none; /*設定裝飾線條(上線、底線、刪除線)皆none無*/
  17.  
  18. font-size: 17px; /*設定按鈕文字大小*/
  19. font-family: 'Noto Sans TC', sans-serif; /*設定文字字體為 Google雲端字體中的黑體字*/
  20. letter-spacing: 1px; /*設定這行字距空間*/
  21. }
  22.  
  23. nav a:hover {
  24. background-image: url(images/btn_hover.png); /*設定按鈕在滑鼠滑入時背景顯示的影像*/
  25. }
  26. </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 區域內的第二層區域以 浮動 方式設定 左右分欄

  1. <style type="text/css"> /*這一行的這個標籤不用輸入*/
  2. #content {
  3. width: 900px; /*配合背景影像設定左方區域的寬度*/
  4. margin: 20px; /*設定四周邊界*/
  5. float: left; /*設定浮動靠左*/
  6. /*background-color: rgba(0, 136, 255, 0.4); 為了檢測先設定背景顏色,以後再刪除*/
  7. }
  8.  
  9. aside {
  10. width: 200px; /*配合背景影像設定右方區域的寬度*/
  11. margin: 20px; /*設定四周邊界*/
  12. float: right; /*設定浮動靠右*/
  13. /*background-color: rgba(235, 0, 255, 0.4); 為了檢測先設定背景顏色,以後再刪除*/
  14. }
  15. </style>
go TOP