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

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

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

  1. <nav>
  2. <a href="index.html">回網站首頁</a>
  3. <a href="about.html">關於蒂莫絲</a>
  4. <a href="service.html" class="active">客房的服務</a>
  5. <a href="location.html">我們的位置</a>
  6. <a href="contact.html">聯絡蒂莫絲</a>
  7. </nav>

 

修改 #banner 區域表現的影像

  1. <link rel="stylesheet" href="layout.css">
  2. <style>
  3. #banner {
  4. background-image: url(images/banner/banner3.png);
  5. }
  6. </style>
  7. </head>

 

修改左側 標題1 的文字

修改右側 標題2 的文字

修改右側 插入的影像

 

設計影像縮圖浮動排列

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

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

 

結果參考如下:

  1. <h1>客房的服務</h1>
  2. <figure><a href="images/room_b/room1.jpg"><img src="images/room_s/room1.jpg" alt=""></a>客房01</figure>
  3. <figure><a href="images/room_b/room2.jpg"><img src="images/room_s/room2.jpg" alt=""></a>客房02</figure>
  4. <figure><a href="images/room_b/room3.jpg"><img src="images/room_s/room3.jpg" alt=""></a>客房03</figure>
  5. .........以此類推
  6. <figure><a href="images/room_b/room15.jpg"><img src="images/room_s/room15.jpg" alt=""></a>客房15</figure>

 

設計 CSS 樣式

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

 

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

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

 

操作練習參考步驟1:

  1. <link href="js/lightbox2-master/dist/css/lightbox.css" rel="stylesheet" type="text/css" />
  2. <link href="layout.css" rel="stylesheet" type="text/css">
  3. </head>

 

操作練習參考步驟2:

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

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

 

操作練習參考步驟3:

  1. <figure>      <!-- ...........配合 lightbox 外掛, 需要的屬性名稱 -->
  2. <a href="images/room_b/room1.jpg" data-lightbox="roadtrip" >
  3. <img src="images/room_s/room1.jpg" alt=""/></a>客房01
  4. </figure>

 

學習以CSS設計動畫

先設計物件的靜態排版

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

 

設計 CSS 樣式

  1. <style type="text/css"> /*這一行的這個標籤不用輸入*/
  2. #content figure {
  3. float: left; /*設定浮動靠左*/
  4. width: 30%; /*設定寬度 (利用瀏覽器檢查面板檢查#content寬度再除以3)*/
  5. margin: 1.65%; /*設定四周邊界距離*/
  6. text-align: center; /*設定內容文字置中*/
  7. position: relative; /*由於這個位置的子元素設計為絕對定位,因此會相對於父元素的位置*/
  8. /*所以父元素的這裡必須有相對的定位設定*/
  9. }
  10. #content figure .crown {
  11. position: absolute; /*設計絕對定位讓這張圖浮起來*/
  12. right: -20px; /*設計右邊與父層距離往右超出-20px*/
  13. top: -40px; /*設計上方與父層距離往上超出-40px*/
  14. transform-origin: 50% 100%; /*設計變形時以水平50%垂直100%的位置定位不動*/
  15. transform: rotate(20deg); /*設計自己向右旋轉20度*/
  16. }
  17. </style>

 

再設計物件的動畫呈現

  1. <style type="text/css"> /*這一行的這個標籤不用輸入*/
  2. #content figure .crown {
  3. position: absolute; /*設計絕對定位讓這張圖浮起來*/
  4. right: -20px; /*設計右邊與父層距離往右超出-20px*/
  5. top: -40px; /*設計上方與父層距離往上超出-40px*/
  6. transform-origin: 50% 100%; /*設計變形時以水平50%垂直100%的位置定位不動*/
  7. transform: rotate(20deg); /*設計自己向右旋轉20度*/
  8. animation-name: crownAni; /*設計套用動畫名稱*/
  9. animation-duration: 1.5s; /*設計動畫一次的時間*/
  10. animation-iteration-count: infinite; /*設計動畫的次數為持續不斷*/
  11. }
  12. @keyframes crownAni {
  13. 50% { transform: rotate(30deg); } /*設計動畫一次時50%的時間點,旋轉到30度*/
  14. }
  15. </style>

 

 

go TOP