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)
1、處理相關的 HTML 標籤語法
2、連結相關的 CSS 檔案到 </head> 的前面 (建議放在自己的CSS檔案前)
3、載入相關的 JS 檔案到 </body> 的前面 (有些外掛也可以放在 </head> 的前面)
4、在 <script> </script> 標籤之中,將網頁元素物件依作者指示交給外掛程式。
5、如有需要再加上 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