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

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

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

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

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

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

<nav>
  <a href="index.html" class="active">回網站首頁</a>
  <a href="about.html">關於蒂莫絲</a>
  <a href="service.html">客房的服務</a>
  <a href="location.html">我們的位置</a>
  <a href="contact.html">聯絡蒂莫絲</a>
</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 樣式設定。

 

操作練習參考:

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

 

操作練習參考:

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

 

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

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