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

5-1. 首頁內容:外掛的使用

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

在 layout.css 檔案中加上一個 CSS規則設定,
表示當 <a> 標籤加上 active class名稱 時,套用這個設定。

  1. <style type="text/css"> /*這一行的這個標籤不用輸入*/
  2. nav a.active { background-image: url(images/btn_hover.png); color: #ffffff; }
  3. </style>

在 index.html 檔案中,導覽按鈕區中的第一個按鈕修改如下:

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

 

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

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

 

操作練習參考:

  1. <title>Timothy Hotel 首頁</title>
  2. <!-- 外掛程式 區域 start (自 bxSlider 網站的說明複製過來) ======================= -->
  3. <link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
  4. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  5. <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
  6. <script>
  7. $(document).ready(function(){
  8. $('.slider').bxSlider({
  9. auto: true //增加參數選項 { auto:true } 可以讓 Slider 自動播放
  10. });
  11. });
  12. </script>
  13. <!-- 外掛程式 區域 end ======================================================= -->
  14.  
  15. <link rel="stylesheet" href="layout.css">

 

操作練習參考:

  1. <div id="content">
  2. <h1>最新消息</h1>
  3. <!-- 自 bxSlider 網站的說明複製過來, 再修改要顯示的影像, 不用設定寬度、高度 -->
  4. <div class="slider">
  5. <div><img src="images/index_slider/slider1.jpg" alt=""></div>
  6. <div><img src="images/index_slider/slider2.jpg" alt=""></div>
  7. <div><img src="images/index_slider/slider3.jpg" alt=""></div>
  8. <div><img src="images/index_slider/slider4.jpg" alt=""></div>
  9. </div>
  10.  
  11. </div>

 

調整 bxSlider 的樣式
在 bxSlider 中不理想區域按滑鼠右鍵, 選「檢查」檢查CSS樣式再進行修改

  1. <link rel="stylesheet" href="layout.css">
  2. <style>
  3. .bx-wrapper {
  4. box-shadow: none; /*不顯示陰影*/
  5. }
  6. </style>
  7. </head>
go TOP