<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>