Beispielcode für die Verwendung von HTML-Tags „ul“ und „li“ zur Anzeige von Bildern

Beispielcode für die Verwendung von HTML-Tags „ul“ und „li“ zur Anzeige von Bildern
Kopieren Sie den folgenden Code in den Codebereich von Dreamweaver. Während der Vorschau wird das folgende Bild angezeigt, wodurch die Bildanzeigefunktion realisiert wird.

Code kopieren
Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=gb2312" />
<style type="text/css">



Code kopieren
Der Code lautet wie folgt:

<!--Im Folgenden wird der CSS-Stil definiert, einschließlich eines Div, also Layout, und Tags wie ul, li, img usw. -->
<span style="color:#990000;">#layout{width:700px;border:2px solid #ccc;padding:2px;overflow:auto;zoom:1;diaplay:inline;}
#layout ul{Listenstil: keine;}
#layout li {
Listenstiltyp: Quadrat;
keine Wiederholung 0px 4px;
Polsterung links: 20px;
}
body{margin:0 auto;font-size:12px;font-family:Verdana;line-height:1.5;}
ul,dl,dt,dd,h1,h2,h3,h4,h5,h6,form{padding:0;margin:0;}
img{border:0px;}
#layout ul li a img {
Polsterung: 1px;
Rand: 1px durchgezogen #elelel;
Rand unten: 3px;
Anzeige:Block;
}
ein {color:#05a;text-decoration:none;}
ein:hover{color:#f00;}
#layout ul li {
schweben: links;
Breite: 72px;
Rand oben: 20px;
Rand rechts: 0px;
Rand unten: 0px;
Rand links: 20px;
Textausrichtung: zentriert;
}
#layout ul li a {
Anzeige: Block;
}
#layout ul li a:hover img {
Polsterung: 0px;
Rand: 2px durchgezogen #FF6600;
}</span>
</Stil>
</Kopf>
<Text>
<div id="layout">


Code kopieren
Der Code lautet wie folgt:

<!--Im Folgenden wird das Bild als li-Tag definiert und Höhe und Breite festgelegt. Sie müssen nur den Quellpfad und den Bildnamen 001.jpg ändern, in dem das Bild platziert wird-->
<ul>
<span style="color:#993300;"><li><a href="#"><img src="images/001.jpg"width="70" height="70"/>Sanya</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>Sanya</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>Sanya</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>Sanya</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>Sanya</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>Sanya</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>Sanya</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>Sanya</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>Sanya</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>Sanya</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>Sanya</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>Sanya</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>Sanya</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>Sanya</a></li>
<li><a href="#"><img src="images/001.jpg"width="70" height="70"/>Sanya</a></li></span>
</ul>
</div>
</body>
</html>

<<:  JavaScript-Selektorfunktionen querySelector und querySelectorAll

>>:  CSS zum Erzielen eines Chat-Blaseneffekts

Artikel empfehlen

Implementierung zum Zeichnen einer Audio-Wellenform mit wavesurfer.js

1. Sehen Sie sich die Renderings an Weiterleiten ...

CSS zum Erzielen einer Schließen-Schaltfläche zum Vergrößern und Verkleinern (Beispielcode)

Dieser Effekt tritt am häufigsten auf unserer Bro...

So ändern Sie MySQL, um Remoteverbindungen zuzulassen

In Bezug auf die MySQL-Remoteverbindung stoßen wi...

Prozessdiagramm zur Implementierung der Zabbix WEB-Überwachung

Nehmen Sie als Beispiel die WEB-Schnittstelle von...

Lösung für das 404/503-Problem beim Anmelden bei TeamCenter12

TeamCenter12 gibt das Kontokennwort ein und klick...

Grafisches Tutorial zum Herunterladen und Installieren von MySQL 8.0 unter Windows 10

In diesem Artikel erfahren Sie, wie Sie MySQL 8.0...

Beispielcode zur Implementierung transparenter Verlaufseffekte mit CSS

Die Titelbilder in den Spalten von Zhihu Discover...

Was sind Inline-Elemente und Blockelemente?

1. Inline-Elemente nehmen nur die Breite des Inhal...

Benutzerdefiniertes Auswahlfeld für die Webseite Auswählen

Jeder ist wahrscheinlich mit dem Auswahl-Dropdown...

Lösen Sie das Problem, dass MySQL einen ungültigen Standardwert für den Fehler „operate_time“ meldet.

Führen Sie die Anweisung „create table“ in der Da...

Lösungen für den schwarzen Bildschirm bei der Installation von Ubuntu (3 Arten)

Die Grafikkarte meines Computers ist eine Nvidia-...

Vue implementiert einen dynamischen kreisförmigen prozentualen Fortschrittsbalken

Als ich kürzlich ein kleines Programm entwickelte...

Zabbix-Konfiguration DingTalk-Alarmfunktions-Implementierungscode

brauchen Das Konfigurieren von DingTalk-Alarmen i...

Detaillierte Erläuterung der perfekten CSS3+JS-Implementierung des Lupenmodus

Vor etwa einem Jahr habe ich einen Artikel geschr...

Zusammenfassung häufig verwendeter Escape-Zeichen in HTML

Die in HTML häufig verwendeten Escape-Zeichen wer...