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