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:

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

<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

Detaillierte Erläuterung des MySQL MVCC-Mechanismusprinzips

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

Detaillierte Erläuterung des MySQL MVCC-Mechanismusprinzips

Implementierungscode zum Hinzufügen eines Schrägstrichs zum Vue-Elementheaders

Implementierungscode für die Schiebeschalterfunktion der Registerkarte „Links“ und „Rechts“ des WeChat-Applet

js realisiert das Verpacken mehrerer Bilder in Zip

So ändern Sie das MySQL-Tabellenpartitionierungsprogramm

Linux verwendet den Befehl lsof, um den Status des Dateiöffnens zu überprüfen

Analyse der Gründe, warum das MySQL-Indexsystem den B + -Baum verwendet

So erstellen Sie eine MySQL-Datenbank (de1) mit Befehlen

Starten Sie den Docker-Dienst neu, um den automatischen Start- und Stoppbefehl anzuwenden (empfohlen)

Praxis der Implementierung einer benutzerdefinierten Suchleiste und des Löschens von Suchereignissen in Avue

Artikel empfehlen

Vue realisiert den Gleitkreuzeffekt des Balles

Grundlegendes zum MySQL-Abfrageoptimierungsprozess

Detaillierte Erklärung der Stammverzeichniseinstellungen in nginx.conf

Lösung für den Fehler bei der Verbindung mit MySQL in Docker

XHTML-Tutorial, eine kurze Einführung in die Grundlagen von XHTML

Übersicht über die Unterschiede zwischen Linux TTY/PTS

So verwenden Sie Nginx, um einen RTMP-Liveserver auszuführen

Implementierungsschritte der objektorientierten Kapselung von js in einer kaskadierenden Dropdown-Menüliste

CSS-Sprites-Technologie integriert mehrere Hintergründe in ein PNG-Bild CSS-Positionierung

Die Website ist ausgegraut. Kompatibler Code einschließlich Bilder unterstützt alle Browser

Beispielcode zur Implementierung eines einfachen ListViews-Effekts in HTML

20 CSS-Codierungstipps für mehr Effizienz (sortiert)

Detailliertes Tutorial zum Bereitstellen eines Springboot-Projekts mit Nginx auf dem Server (JAR-Paket)

Vue-CLI3.x stellt Projekte automatisch auf dem Server bereit

Implementierungsschritte zur Kapselung von Komponenten basierend auf React