WEB ◆ TS Library ◆ 熱衷分享 ◆ 享受教學相長 ◆ 無形的網絡擁有熱情溫度的傳遞

5-2. 關於蒂莫絲:認識程式

導覽區第 2 個連結按鈕呈現顯著的樣式

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

 

修改 #banner 區域表現的影像

<link rel="stylesheet" href="layout.css">
<style> #banner { background-image: url(images/banner/banner2.png); background-position: center -200px; /*設定背景影像的位置:水平置中,垂直往上移動-200px*/ } </style>
</head>

 

修改左側 標題1 的文字

修改右側 標題2 的文字

修改右側 插入的影像

 

設計折疊式面板

在左側 標題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>

 

加入 YouTube 影片資源

將影片上傳到 YouTube, 顯示插放影片時, 在影片下方按「分享」按「嵌入」,
<iframe ...... > 語法複製回來貼在 折疊式面板的下方, 設計寬度600px高度340px。

 

設計 iframe 的樣式 (水平置中,加上陰影)

在這裡 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>

 

 

go TOP