<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>
運用另存新檔, 複製出以下相關檔案