<nav> <a href="index.html">回網站首頁</a> <a href="about.html" class="active">關於蒂莫絲</a> <a href="service.html">客房的服務</a> <a href="location.html">我們的位置</a> <a href="contact.html">聯絡蒂莫絲</a> </nav>
<link rel="stylesheet" href="layout.css"><style> #banner { background-image: url(images/banner/banner2.png); background-position: center -200px; /*設定背景影像的位置:水平置中,垂直往上移動-200px*/ } </style></head>
在左側 標題1 的下方設計 HTML 需要的標籤元素
<div id="aboutList"> <h2><img src="images/aboutListIcon.png" alt=""> 蒂莫絲介紹</h2> <div>輸入文字 (可以自TS範例網站中複製文字)</div> <h2><img src="images/aboutListIcon.png" alt=""> 服務及設施</h2> <div>輸入文字 (可以自TS範例網站中複製文字)</div> <h2><img src="images/aboutListIcon.png" alt=""> 住宿須知</h2> <div>輸入文字 (可以自TS範例網站中複製文字)</div> </div>
設計 CSS 樣式
<link rel="stylesheet" href="layout.css"> <style> #banner { background-image: url(images/banner/banner2.png); background-position: center -200px; }#aboutList { margin-bottom: 20px; /*設定整個折疊式面板區域與下方物件的距離*/ } #aboutList h2 { background-color: #dddddd; /*設定標題位置的背景顏色*/ cursor: pointer; /*設定滑鼠移入時呈現手的樣子*/ margin-bottom: 5px; /*設定與下方內容的距離*/ font-size: 20px; /*設定標題位置文字的大小*/ } #aboutList h2 img { vertical-align: middle; /*設定標題文字前面影像的垂直對齊置中*/ } #aboutList div { text-align: justify; /*設定內容文字左右齊行對齊*/ padding: 15px; /*設定內容區域的內邊界留白*/ display: none; /*設定內容區域一開始時是隱藏不顯示*/ }</style> </head>
設計相關 JS 程式檔的載入,進一步看看程式、認識程式
<!-- 外掛程式 區域 start ============================================= --> <script src="js/jquery-3.3.1.min.js"></script> <script src="js/TSaccordion.js"></script> <!-- 外掛程式 區域 end ================================================ --></body>
在這裡 about.html 的 影片
與我們的位置 location.html 的 地圖 皆是使用
iframe 標籤,
打算設計 水平置中 且加上 陰影 ,
由於跨頁皆有需要的設定, 所以設計在共用的
layout.css 檔案中。
<style type="text/css"> /*這一行的這個標籤不用輸入*/ #content iframe { /*由於iframe原來的顯示模式是inline-block, 無法使用margin左右auto來設定水平置中*/ /*為了讓 iframe 獨立呈現在一列, 並且水平置中, 所以必須先將顯示模式改成 block*/ display: block; margin-left: auto; margin-right: auto; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /*是否要陰影自行設計*/ } </style>