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

5-3. 客房的服務：加強排版

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

<nav>
  <a href="index.html">回網站首頁</a>
  <a href="about.html">關於蒂莫絲</a>
  <a href="service.html" class="active">客房的服務</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/banner3.png); 
  }
</style>

</head>

 

修改左側 標題1 的文字

修改右側 標題2 的文字

修改右側 插入的影像

 

設計影像縮圖浮動排列

在左側 標題1 的下方設計 HTML 需要的標籤元素

(1) 插入圖文框 Figure，其中<figcaption>是圖片標題文字，可以不用，可以刪除
(2) 在 <figure> 之內插入影像小圖
(3) 點選影像小圖設定連結到影像大圖
(4) 輸入每張縮圖的標註文字
(5) 將一組 <figure> 複製成多個再修改小圖檔名、大圖檔名、標註文字中的編號

 

結果參考如下：

<h1>客房的服務</h1>

<figure><a href="images/room_b/room1.jpg"><img src="images/room_s/room1.jpg" alt=""></a>客房01</figure>
<figure><a href="images/room_b/room2.jpg"><img src="images/room_s/room2.jpg" alt=""></a>客房02</figure>
<figure><a href="images/room_b/room3.jpg"><img src="images/room_s/room3.jpg" alt=""></a>客房03</figure>
.........以此類推
<figure><a href="images/room_b/room15.jpg"><img src="images/room_s/room15.jpg" alt=""></a>客房15</figure>

 

設計 CSS 樣式

<style>
  #banner {
    background-image: url(images/banner/banner3.png);
  }

  #content figure {
    float: left;            /*設定浮動靠左*/
    width: 30%;             /*設定寬度 (利用瀏覽器檢查面板檢查#content寬度再除以3)*/
    margin: 1.65%;          /*設定四周邊界距離*/
    text-align: center;     /*設定內容文字置中*/
    position: relative;     /*由於這個位置的子元素設計為絕對定位，因此會相對於父元素的位置*/
                            /*所以父元素的這裡必須有相對的定位設定*/
  }
  #content figure a img {
    width: 100%;             /*設定寬度*/
    height: auto;            /*設定高度 (依原圖寬高比例自動計算)*/
    border-radius: 30px 5px; /*設定圓角呈現 左上及右下30px, 右上及左下5px*/
    transition: all 0.5s;    /*將滑鼠滑入時的效果以0.5秒呈現過程*/
  }
  #content figure a img:hover {
    box-shadow: 1px 1px 20px rgba(255, 0, 0, 0.8);  /*設定滑鼠滑入時陰影呈現的樣子*/
  }

</style>
</head>

 

學習 jQuery plugin 外掛程式的基本運用

(一)瀏覽器搜尋外掛「jquery plugin Lightbox」或直接連結這裡=> 檢視 Example
(二)下載外掛程式 => 解壓縮 => 放在 js 資料夾內
(三)網頁內設計步驟 (How to use)
１、處理相關的 HTML 標籤語法
２、連結相關的 CSS 檔案到 </head> 的前面 (建議放在自己的CSS檔案前)
３、載入相關的 JS 檔案到 </body> 的前面 (有些外掛也可以放在 </head> 的前面)
４、在 <script> </script> 標籤之中，將網頁元素物件依作者指示交給外掛程式。
５、如有需要再加上 option 選項設定，如有需要再修改 CSS 樣式設定。

 

操作練習參考步驟1: 

<link href="js/lightbox2-master/dist/css/lightbox.css" rel="stylesheet" type="text/css" />

<link href="layout.css" rel="stylesheet" type="text/css">
</head>

 

操作練習參考步驟2:

可以自檔案面板找到需要的檔案再拖曳到這個位置

<script type="text/javascript" src="js/lightbox2-master/dist/js/lightbox-plus-jquery.js"></script>

</body>

 

操作練習參考步驟3: 

<figure>      <!-- ...........配合 lightbox 外掛, 需要的屬性名稱 -->

  <a href="images/room_b/room1.jpg"  data-lightbox="roadtrip"  >

    <img src="images/room_s/room1.jpg" alt=""/></a>客房01
</figure>

 

學習以CSS設計動畫

先設計物件的靜態排版

<figure>
  <a href="images/room_b/room3.jpg" data-lightbox="roadtrip" data-title="客房03">
    <img src="images/room_s/room3.jpg" alt="">
  </a>客房03  <img src="images/crown.png" class="crown" alt="">
</figure>

 

設計 CSS 樣式

<style type="text/css">  /*這一行的這個標籤不用輸入*/
#content figure {
  float: left;             /*設定浮動靠左*/
  width: 30%;              /*設定寬度 (利用瀏覽器檢查面板檢查#content寬度再除以3)*/
  margin: 1.65%;           /*設定四周邊界距離*/
  text-align: center;      /*設定內容文字置中*/

  position: relative;      /*由於這個位置的子元素設計為絕對定位，因此會相對於父元素的位置*/
  /*所以父元素的這裡必須有相對的定位設定*/

}


  #content figure .crown {
    position: absolute;                  /*設計絕對定位讓這張圖浮起來*/
    right: -20px;                        /*設計右邊與父層距離往右超出-20px*/
    top: -40px;                          /*設計上方與父層距離往上超出-40px*/
    transform-origin: 50% 100%;          /*設計變形時以水平50%垂直100%的位置定位不動*/
    transform: rotate(20deg);            /*設計自己向右旋轉20度*/
  }

</style>

 

再設計物件的動畫呈現

<style type="text/css">  /*這一行的這個標籤不用輸入*/
#content figure .crown {
  position: absolute;                  /*設計絕對定位讓這張圖浮起來*/
  right: -20px;                        /*設計右邊與父層距離往右超出-20px*/
  top: -40px;                          /*設計上方與父層距離往上超出-40px*/
  transform-origin: 50% 100%;          /*設計變形時以水平50%垂直100%的位置定位不動*/
  transform: rotate(20deg);            /*設計自己向右旋轉20度*/

  animation-name: crownAni;            /*設計套用動畫名稱*/
  animation-duration: 1.5s;            /*設計動畫一次的時間*/
  animation-iteration-count: infinite; /*設計動畫的次數為持續不斷*/

}


  @keyframes crownAni {
    50% { transform: rotate(30deg); }    /*設計動畫一次時50%的時間點,旋轉到30度*/
  }

</style>

 

 

go TOP