靜態輪播圖-html教學-PHP中文網

首頁

web前端

html教學

靜態輪播圖

PHP中文网

Jul 14, 2017 pm 06:10 PM

靜態

<span style="color: #008080"> 1</span> <span style="color: #800000"><!DOCTYPE html>
</span><span style="color: #008080"> 2</span> <span style="color: #800000"><html xmlns="http://www.w3.org/1999/xhtml">
</span><span style="color: #008080"> 3</span> <span style="color: #800000"><head>
</span><span style="color: #008080"> 4</span> <span style="color: #800000"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</span><span style="color: #008080"> 5</span> <span style="color: #800000"><title></title>
</span><span style="color: #008080"> 6</span> <span style="color: #800000"><link href="css/demo.css" rel="stylesheet" />
</span><span style="color: #008080"> 7</span> <span style="color: #800000"></head>
</span><span style="color: #008080"> 8</span> <span style="color: #800000"><body>
</span><span style="color: #008080"> 9</span> <span style="color: #800000"><div id="dlunbo">
</span><span style="color: #008080">10</span> <span style="color: #800000"><div id="igs">
</span><span style="color: #008080">11</span> <span style="color: #800000"><div class="ig"><img src="img/1_1.jpg" /></div>
</span><span style="color: #008080">12</span> <span style="color: #800000"><div class="ig"><img src="img/1_2.jpg" /></div>
</span><span style="color: #008080">13</span> <span style="color: #800000"><div class="ig"><img src="img/1_3.png" /></div>
</span><span style="color: #008080">14</span> <span style="color: #800000"><div class="ig"><img src="img/1_4.jpg" /></div>
</span><span style="color: #008080">15</span> <span style="color: #800000"><div class="ig"><img src="img/1_5.jpg" /></div>
</span><span style="color: #008080">16</span> <span style="color: #800000"></div>
</span><span style="color: #008080">17</span> <span style="color: #800000"><ul id="tabs">
</span><span style="color: #008080">18</span> <span style="color: #800000"><li class="tab"></li>
</span><span style="color: #008080">19</span> <span style="color: #800000"><li class="tab"></li>
</span><span style="color: #008080">20</span> <span style="color: #800000"><li class="tab"></li>
</span><span style="color: #008080">21</span> <span style="color: #800000"><li class="tab"></li>
</span><span style="color: #008080">22</span> <span style="color: #800000"><li class="tab"></li>
</span><span style="color: #008080">23</span> <span style="color: #800000"></ul>
</span><span style="color: #008080">24</span> <span style="color: #800000"><div class="btn btn1" >&lt;</div>
</span><span style="color: #008080">25</span> <span style="color: #800000"><div class="btn btn2">&gt;</div>
</span><span style="color: #008080">26</span> <span style="color: #800000"></div>
</span><span style="color: #008080">27</span> <span style="color: #800000"></body>
</span><span style="color: #008080">28</span> <span style="color: #800000"></html><br></span>

登入後複製

<span style="color: #008080"> 1</span> <span style="color: #800000">*</span>{
<span style="color: #008080"> 2</span> <span style="color: #ff0000">margin</span>:<span style="color: #0000ff">0px</span>;
<span style="color: #008080"> 3</span> <span style="color: #ff0000">padding</span>:<span style="color: #0000ff">0px</span>;
<span style="color: #008080"> 4</span> <span style="color: #ff0000">list-style-type</span>:<span style="color: #0000ff">none</span>;
<span style="color: #008080"> 5</span> }
<span style="color: #008080"> 6</span> <span style="color: #800000">#dlunbo</span>{
<span style="color: #008080"> 7</span> <span style="color: #ff0000">width</span>:<span style="color: #0000ff">500px</span>;
<span style="color: #008080"> 8</span> <span style="color: #ff0000">height</span>:<span style="color: #0000ff">330px</span>;
<span style="color: #008080"> 9</span> <span style="color: #ff0000">position</span>:<span style="color: #0000ff">absolute</span>;
<span style="color: #008080">10</span> <span style="color: #ff0000">top</span>:<span style="color: #0000ff">50%</span>;
<span style="color: #008080">11</span> <span style="color: #ff0000">margin-top</span>:<span style="color: #0000ff">-166px</span>;
<span style="color: #008080">12</span> <span style="color: #ff0000">left</span>:<span style="color: #0000ff">50%</span>;
<span style="color: #008080">13</span> <span style="color: #ff0000">margin-left</span>:<span style="color: #0000ff">-250px</span>;
<span style="color: #008080">14</span> }
<span style="color: #008080">15</span> <span style="color: #800000">.ig</span>{
<span style="color: #008080">16</span> <span style="color: #ff0000">position</span>:<span style="color: #0000ff">absolute</span>;
<span style="color: #008080">17</span> }
<span style="color: #008080">18</span> <span style="color: #800000">img</span>{
<span style="color: #008080">19</span> <span style="color: #ff0000">width</span>:<span style="color: #0000ff">500px</span>;
<span style="color: #008080">20</span> <span style="color: #ff0000">height</span>:<span style="color: #0000ff">330px</span>;
<span style="color: #008080">21</span> }
<span style="color: #008080">22</span> <span style="color: #800000">#tabs</span>{
<span style="color: #008080">23</span> <span style="color: #ff0000">position</span>:<span style="color: #0000ff">absolute</span>;
<span style="color: #008080">24</span> <span style="color: #ff0000">top</span>:<span style="color: #0000ff">300px</span>;
<span style="color: #008080">25</span> <span style="color: #ff0000">left</span>:<span style="color: #0000ff">200px</span>;
<span style="color: #008080">26</span> }
<span style="color: #008080">27</span> <span style="color: #800000">.tab</span>{
<span style="color: #008080">28</span> <span style="color: #ff0000">width</span>:<span style="color: #0000ff">20px</span>;
<span style="color: #008080">29</span> <span style="color: #ff0000">height</span>:<span style="color: #0000ff">20px</span>;
<span style="color: #008080">30</span> <span style="color: #ff0000">border</span>:<span style="color: #0000ff">solid 1px #ffffff</span>;
<span style="color: #008080">31</span> <span style="color: #ff0000">float</span>:<span style="color: #0000ff">left</span>;
<span style="color: #008080">32</span> <span style="color: #ff0000">margin-left</span>:<span style="color: #0000ff">5px</span>;
<span style="color: #008080">33</span> <span style="color: #ff0000">border-radius</span>:<span style="color: #0000ff">100%</span>;
<span style="color: #008080">34</span> <span style="color: #ff0000">cursor</span>:<span style="color: #0000ff">pointer</span>;
<span style="color: #008080">35</span> }
<span style="color: #008080">36</span> <span style="color: #800000">.btn</span>{
<span style="color: #008080">37</span> <span style="color: #ff0000">width</span>:<span style="color: #0000ff">30px</span>;
<span style="color: #008080">38</span> <span style="color: #ff0000">height</span>:<span style="color: #0000ff">50px</span>;
<span style="color: #008080">39</span> <span style="color: #ff0000">position</span>:<span style="color: #0000ff">absolute</span>;
<span style="color: #008080">40</span> <span style="color: #ff0000">background</span>:<span style="color: #0000ff">rgba(0,0,0,0.5)</span>;
<span style="color: #008080">41</span> <span style="color: #ff0000">color</span>:<span style="color: #0000ff">#fff</span>;
<span style="color: #008080">42</span> <span style="color: #ff0000">text-align</span>:<span style="color: #0000ff">center</span>;
<span style="color: #008080">43</span> <span style="color: #ff0000">line-height</span>:<span style="color: #0000ff">50px</span>;
<span style="color: #008080">44</span> <span style="color: #ff0000">font-size</span>:<span style="color: #0000ff">30px</span>;
<span style="color: #008080">45</span> <span style="color: #ff0000">top</span>:<span style="color: #0000ff">50%</span>;
<span style="color: #008080">46</span> <span style="color: #ff0000">margin-top</span>:<span style="color: #0000ff">-25px</span>;
<span style="color: #008080">47</span> <span style="color: #ff0000">cursor</span>:<span style="color: #0000ff">pointer</span>;
<span style="color: #008080">48</span> }
<span style="color: #008080">49</span> <span style="color: #800000">.btn1</span>{
<span style="color: #008080">50</span> <span style="color: #ff0000">left</span>:<span style="color: #0000ff">0px</span>;
<span style="color: #008080">51</span> }
<span style="color: #008080">52</span> <span style="color: #800000">.btn2</span>{
<span style="color: #008080">53</span> <span style="color: #ff0000">right</span>:<span style="color: #0000ff">0px</span>;
<span style="color: #008080">54</span> }

登入後複製

以上是靜態輪播圖的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7833

Java教學

1648

CakePHP 教程

1403

Laravel 教程

1300

PHP教程

1240

Related knowledge

深入解析C語言中static關鍵字的作用與用法 Feb 20, 2024 pm 04:30 PM

深入解析C語言中static關鍵字的功能和用法在C語言中，static是一種非常重要的關鍵字，它可以被用於函數、變數和資料類型的定義。使用static關鍵字可以改變物件的連結屬性、作用域和生命週期，以下就來詳細解析一下static關鍵字在C語言中的作用和用法。 static變數與函數：在函數內部使用static關鍵字定義的變數稱為靜態變量，它具有全域生命週

PHP中私有靜態方法的作用及應用場景 Mar 23, 2024 am 10:18 AM

PHP中私有靜態方法的作用及應用場景在PHP程式設計中，私有靜態方法是一種特殊的方法類型，它只能在定義它的類別內部訪問，外部無法直接呼叫。私有靜態方法通常用於類別的內部邏輯實現，提供了一種封裝和隱藏細節的方式，同時又具有靜態方法的特性，可以在不實例化類別物件的情況下被呼叫。以下將探討私有靜態方法的作用及應用場景，並提供具體的程式碼範例。作用：封裝與隱藏實作細節：私有靜態

快速掌握靜態相對定位的技巧與方法 Jan 18, 2024 am 11:18 AM

快速靜態相對定位是網頁開發中非常重要的定位方式。它可以使元素相對於其正常位置進行微調的同時，仍然保持在文件流程中的位置。在本文中，我將詳細介紹快速靜態相對定位的使用方法，以及一些常見的應用場景。首先，我們需要了解快速靜態相對定位的基本概念。在CSS中，元素的定位方式有四種：靜態定位、相對定位、絕對定位、固定定位。靜態定位是預設的定位方式，元素的位置透過文檔

靜態重定位技術的原理及其應用案例 Jan 18, 2024 am 11:12 AM

靜態重定位技術的原理與應用引言：在現代電腦系統中，記憶體管理是一個非常重要的課題。隨著軟體的複雜性和規模的增加，記憶體的限製成為了我們面臨的一個挑戰。為了更有效率地利用記憶體資源，靜態重定位技術應運而生。本文將介紹靜態重定位技術的原理、應用以及提供一些具體的程式碼範例。一、靜態重定位技術的原理靜態重定位是一種將程式碼和資料從一個邏輯位址空間移動到另一個邏輯位址空間

最佳化頁面佈局方法：快速靜態相對定位的應用技巧 Jan 18, 2024 am 10:39 AM

如何運用快速靜態相對定位優化頁面佈局隨著互聯網的發展，網頁設計變得越來越重要。一個好的頁面佈局可以提升使用者體驗，並提高網站的可用性和可訪問性。快速靜態相對定位是一種常用的佈局技術，可以有效優化頁面佈局。本文將介紹如何運用快速靜態相對定位最佳化頁面佈局。快速靜態相對定位是一種基於CSS的佈局技術，透過使用CSS樣式表中的"position"屬性，可以在不影響文

Go語言特性詳解：一文了解Go的語言特點 Mar 05, 2024 am 09:54 AM

Go語言特性詳解：一文了解Go的語言特點Go語言是一種由Google開發的靜態類型、編譯型、並髮型，並具有垃圾回收功能的開源程式語言。自2009年發布以來，Go語言因其高效的並發處理能力、簡潔的語法以及快速的編譯速度而備受程式設計師們喜愛。本文將詳細介紹Go語言的一些主要特性，並透過具體的程式碼範例幫助讀者更了解這些特點。並發程式設計Go語言的最大特點之一就是原生

Vue中引入靜態jQuery避免錯誤提示 Feb 19, 2024 pm 04:16 PM

在Vue專案中引入靜態jQuery可能會引發一些錯誤提示，主要是因為Vue對於jQuery的引入和使用有一些特殊的要求。在實際開發中，我們需要遵循一些規範和注意事項，以避免這些錯誤提示的出現。以下我將介紹一些具體的程式碼範例和解決方法，來幫助讀者避免這些錯誤。首先，我們需要明確一點：在Vue專案中引入jQuery並不是推薦的做法，因為Vue本身提供了豐富的功能

了解Golang的獨特之處與優勢 Mar 03, 2024 am 10:51 AM

Golang，即Go語言，是一種由谷歌開發的程式語言，自問世以來備受開發者們的喜愛。 Golang擁有獨特的設計理念和優勢，使其在大規模並發程式、網路程式設計和雲端運算等領域表現出色。本文將探討Golang的獨特之處與優勢，並透過具體的程式碼範例來展示這些特點。 1.並發編程Golang天生支持並發編程，透過goroutine和channel兩大特性，開發者可以輕

See all articles

靜態輪播圖

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題