静态轮播图
<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" ><</div> </span><span style="color: #008080">25</span> <span style="color: #800000"><div class="btn btn2">></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> }
Atas ialah kandungan terperinci 静态轮播图. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Analisis mendalam tentang peranan dan penggunaan kata kunci statik dalam bahasa C
Feb 20, 2024 pm 04:30 PM
Analisis mendalam tentang peranan dan penggunaan kata kunci statik dalam bahasa C Dalam bahasa C, statik ialah kata kunci yang sangat penting, yang boleh digunakan dalam definisi fungsi, pembolehubah dan jenis data. Menggunakan kata kunci statik boleh menukar atribut pautan, skop dan kitaran hayat objek Mari analisa peranan dan penggunaan kata kunci statik dalam bahasa C secara terperinci. Pembolehubah statik dan fungsi: Pembolehubah yang ditakrifkan menggunakan kata kunci statik di dalam fungsi dipanggil pembolehubah statik, yang mempunyai kitaran hayat global
Peranan dan senario aplikasi kaedah statik peribadi dalam PHP
Mar 23, 2024 am 10:18 AM
Peranan dan senario aplikasi kaedah statik persendirian dalam PHP Dalam pengaturcaraan PHP, kaedah statik persendirian ialah jenis kaedah khas Ia hanya boleh diakses dalam kelas di mana ia ditakrifkan dan tidak boleh dipanggil secara langsung dari luar. Kaedah statik persendirian biasanya digunakan untuk pelaksanaan logik dalaman kelas, menyediakan cara untuk merangkum dan menyembunyikan butiran Pada masa yang sama, mereka mempunyai ciri kaedah statik dan boleh dipanggil tanpa instantiating objek kelas. Berikut akan membincangkan peranan dan senario aplikasi kaedah statik persendirian, dan memberikan contoh kod khusus. Fungsi: merangkum dan menyembunyikan butiran pelaksanaan: statik peribadi
Cepat kuasai teknik dan kaedah kedudukan relatif statik
Jan 18, 2024 am 11:18 AM
Kedudukan relatif statik yang pantas ialah kaedah penentududukan yang sangat penting dalam pembangunan web. Ia membenarkan sesuatu elemen dilaraskan sedikit berbanding kedudukan normalnya sambil mengekalkan kedudukannya dalam aliran dokumen. Dalam artikel ini, saya akan memperkenalkan secara terperinci penggunaan kedudukan relatif statik pantas, serta beberapa senario aplikasi biasa. Pertama, kita perlu memahami konsep asas kedudukan relatif statik pantas. Dalam CSS, terdapat empat cara untuk meletakkan elemen: kedudukan statik, kedudukan relatif, kedudukan mutlak dan kedudukan tetap. Kedudukan statik ialah kaedah penentududukan lalai Kedudukan elemen ditentukan oleh dokumen.
Prinsip teknologi penempatan semula statik dan kes aplikasinya
Jan 18, 2024 am 11:12 AM
Prinsip dan Aplikasi Teknologi Penempatan Semula Statik Pengenalan: Dalam sistem komputer moden, pengurusan memori adalah topik yang sangat penting. Apabila kerumitan dan saiz perisian meningkat, kekangan memori menjadi satu cabaran. Untuk menggunakan sumber memori dengan lebih cekap, teknologi penempatan semula statik telah wujud. Artikel ini akan memperkenalkan prinsip dan aplikasi teknologi penempatan semula statik dan menyediakan beberapa contoh kod khusus. 1. Prinsip teknologi penempatan semula statik Penempatan semula statik ialah kaedah memindahkan kod program dan data dari satu ruang alamat logik ke ruang alamat logik yang lain.
Mengoptimumkan kaedah susun atur halaman: kemahiran aplikasi kedudukan relatif statik yang pantas
Jan 18, 2024 am 10:39 AM
Cara menggunakan kedudukan relatif statik yang pantas untuk mengoptimumkan reka letak halaman Dengan perkembangan Internet, reka bentuk web telah menjadi semakin penting. Reka letak halaman yang baik meningkatkan pengalaman pengguna dan meningkatkan kebolehgunaan dan kebolehcapaian tapak web anda. Kedudukan relatif statik pantas ialah teknik reka letak yang biasa digunakan yang boleh mengoptimumkan reka letak halaman dengan berkesan. Artikel ini akan memperkenalkan cara menggunakan kedudukan relatif statik yang pantas untuk mengoptimumkan reka letak halaman. Kedudukan relatif statik pantas ialah teknologi reka letak berdasarkan CSS Dengan menggunakan atribut "kedudukan" dalam helaian gaya CSS, ia boleh digunakan tanpa menjejaskan teks.
Penjelasan terperinci tentang ciri bahasa Go: Ketahui tentang ciri bahasa Go dalam satu artikel
Mar 05, 2024 am 09:54 AM
Penjelasan terperinci tentang ciri bahasa Go: Ketahui tentang ciri bahasa Go dalam satu artikel Bahasa Go ialah bahasa pengaturcaraan sumber terbuka yang dibangunkan oleh Google yang ditaip secara statik, disusun, serentak dan mempunyai keupayaan pengumpulan sampah. Sejak dikeluarkan pada tahun 2009, bahasa Go telah disukai oleh pengaturcara kerana keupayaan pemprosesan serentak yang cekap, sintaks ringkas dan kelajuan penyusunan pantas. Artikel ini akan memperkenalkan beberapa ciri utama bahasa Go secara terperinci dan membantu pembaca memahami dengan lebih baik ciri ini melalui contoh kod tertentu. Salah satu ciri terbesar bahasa pengaturcaraan serentak Go ialah bahasa asalnya
Fahami ciri unik dan kelebihan Golang
Mar 03, 2024 am 10:51 AM
Golang, atau bahasa Go, ialah bahasa pengaturcaraan yang dibangunkan oleh Google dan telah digemari oleh pembangun sejak penubuhannya. Golang mempunyai konsep dan kelebihan reka bentuk unik yang membolehkannya berprestasi baik dalam bidang seperti program serentak berskala besar, pengaturcaraan rangkaian dan pengkomputeran awan. Artikel ini akan meneroka ciri unik dan kelebihan Golang dan menunjukkan ciri ini melalui contoh kod tertentu. 1. Pengaturcaraan serentak Golang secara semula jadi menyokong pengaturcaraan serentak Melalui dua ciri utama goroutine dan saluran, pembangun boleh dengan mudah
Perkenalkan jQuery statik ke dalam Vue untuk mengelakkan gesaan ralat
Feb 19, 2024 pm 04:16 PM
Memperkenalkan jQuery statik ke dalam projek Vue mungkin menyebabkan beberapa mesej ralat, terutamanya kerana Vue mempunyai beberapa keperluan khas untuk pengenalan dan penggunaan jQuery. Dalam pembangunan sebenar, kita perlu mengikut beberapa spesifikasi dan langkah berjaga-jaga untuk mengelakkan kemunculan gesaan ralat ini. Di bawah saya akan memperkenalkan beberapa contoh dan penyelesaian kod khusus untuk membantu pembaca mengelakkan kesilapan ini. Pertama sekali, kita perlu menjelaskannya: memperkenalkan jQuery ke dalam projek Vue bukanlah pendekatan yang disyorkan kerana Vue sendiri menyediakan fungsi yang kaya
