Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > HTML-Tutorial > Statisches Karussell

Statisches Karussell

PHP中文网
Freigeben： 2017-07-14 18:10:03
Original
2091 Leute haben es durchsucht
<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>
Nach dem Login kopieren
<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> }
Nach dem Login kopieren

 

Das obige ist der detaillierte Inhalt vonStatisches Karussell. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：
静态
Quelle：php.cn
Vorheriger Artikel：Ausführliche Erläuterung der CSS-Rahmeneigenschaft Nächster Artikel：Vergleichen Sie die Unterschiede und Zusammenhänge zwischen Übergang und Animation in CSS3
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Ändern Sie Inline-CSS-Stile in Javafx dynamisch Ich versuche, das Hintergrundbild eines Bereichs zu ändern, wenn die Anwendung maximiert i...
Aus 2024-04-06 20:57:16
0
1
487
Bei der Verwendung von opentbs zum Generieren von ODT-Dateien sind Probleme aufgetreten: Werte desselben Schlüssels werden in derselben Zeile statt in separaten Spalten angezeigt. Ich verwende eine Bibliothek namens OpenTbs, um ODT mit PHP zu erstellen. Ich verwende sie...
Aus 2024-04-06 20:18:18
0
1
483
Reine CSS-Methode zum dynamischen Ändern der Bildquelle beim Klicken ohne Verwendung von JavaScript Ich muss den Quellcode eines Bildes per Mausklick ändern, indem ich nur CSS wie img:active...
Aus 2024-04-06 19:25:49
0
1
505
Die Statusaktualisierung funktioniert in React-Native auf Android nicht Ich habe einen Code, der Bildpaare in einer wischbaren horizontalen Galerie enthält. Wenn ...
Aus 2024-04-06 16:54:10
0
1
410
Formular ohne Schaltfläche mit Javascript/Jquery senden Ich versuche, ein Formular ohne Schaltfläche zu senden, indem ich eine JavaScript-Funktion...
Aus 2024-04-06 14:54:03
0
2
421
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage