- <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>