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