- <style type="text/css"> /*這一行的這個標籤不用輸入*/
- nav a.active { background-image: url(images/btn_hover.png); color: #ffffff; }
- </style>
- <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>
操作練習參考:
- <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>
- <link rel="stylesheet" href="layout.css">
<style> .bx-wrapper { box-shadow: none; /*不顯示陰影*/ } </style>- </head>