- <body>
- <header>
- <img src="images/logo.png" alt="" id="logo">
- <p>Traditionally Royal hotel</p>
- </header>
- <nav>
- <a href="index.html">回網站首頁</a>
- <a href="about.html">關於蒂莫絲</a>
- <a href="service.html">客房的服務</a>
- <a href="location.html">我們的位置</a>
- <a href="contact.html">聯絡蒂莫絲</a>
- </nav>
- <div id="banner"></div>
- <div id="main">
- <div id="content">
<h1>最新消息</h1> <!-- 輸入文字,設定為標題1 -->- </div>
- <aside>
<!-- 插入影像,設定寬度,不設定高度 (高度會依原圖比例自動縮放) --> <img src="images/h2img.png" width="100%" alt=""> <h2>優美的環境●愉快的渡假</h2> <!-- 輸入文字,設定為標題1 --> <!-- 以下插入影像,寬度與高度皆不設定,表示以原圖尺寸呈現 (後續再以CSS設定相關樣式) --> <!-- 為了多個影像一起設定CSS, 所以將需要設定的影像設定相同的 class 名稱 --> <img class="ADimg" src="images/aside_area/index_1.jpg" alt=""> <img class="ADimg" src="images/aside_area/index_2.jpg" alt=""> <img class="ADimg" src="images/aside_area/index_3.jpg" alt="">- </aside>
- </div>
- <!-- footer 區域 ===================================================== -->
- <footer>
- <p id="info">網站設計練習用, 相關影像資訊來自網路及Janfusun, 如有侵權請告知即刻刪除處理</p>
- <p id="copyright">Copyright © Timothy Hotel Design by BFT Maintain by TS </p>
- </footer>
- </body>
- <style type="text/css"> /*這一行的這個標籤不用輸入*/
- #content h1 {
- background-image: url(images/h1bg.png); /*設定這個區域的背景影像*/
- background-repeat: no-repeat; /*設定背景影像不重複*/
- background-position: center center; /*設定背景影像的定位位置*/
- text-align: center; /*設定這個區域的文字置中對齊*/
- margin-bottom: 20px; /*設定這個區域的離下方的距離*/
- }
- </style>
- <style type="text/css"> /*這一行的這個標籤不用輸入*/
- aside h2 {
- font-size: 15px; /*設定這個區域的文字大小*/
- text-align: center; /*設定這個區域的內容置中對齊*/
- margin-bottom: 20px; /*設定這個區域的離下方的距離*/
- }
- aside img {
- width: 100%; /*設定寬度與所在位置的寬度100%相同*/
- height: auto; /*設定高度依影像原寬高比例自動計算*/
- }
- aside .ADimg {
- /*
- border-style: solid;
- border-width: 3px;
- border-color: #fff;
- */
- border: 5px solid #FFF; /*設定影像四周有白色邊框*/
- box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.6); /*設定中央向外5px半透明的黑色陰影*/
- margin-bottom: 10px; /*設定這個區域的離下方的距離*/
- width: 190px; /*上層aside的內容區寬度是180px, 扣除接下來要設計的border左右10px*/
- }
- </style>
運用另存新檔, 複製出以下相關檔案