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

So dekomprimieren Sie mehrere Dateien mit dem Befehl „unzip“ in Linux

Über den Unterschied zwischen js typeof und instanceof bei der Beurteilung von Datentypen und deren Entwicklung und Verwendung

Inhaltsverzeichnis 1. Typ des Operators 2. Instan...

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

So dekomprimieren Sie mehrere Dateien mit dem Befehl „unzip“ in Linux

Bringen Sie Ihnen bei, schnell ein Webclusterprojekt basierend auf Nginx zu erstellen

So installieren Sie JDK und legen Umgebungsvariablen in Linux fest (dieser Artikel reicht aus)

Navigationsdesign und Informationsarchitektur

HTML-Code für feste Titelspalte und spezifische Implementierungscode für die Titelkopftabelle

Problem mit der V-HTML-Rendering-Komponente

Grundlegende Hinweise zu HTML und CSS (unbedingt für das Frontend lesen)

So erstellen Sie einen Git-Dienst basierend auf dem HTTP-Protokoll auf VMware+CentOS 8

Detaillierte Erläuterung zum Einrichten des Ressourcencaches in Nginx

Der Unterschied zwischen gespeicherten Prozeduren und Transaktionen in MySQL-Datenbanken

Artikel empfehlen

Detaillierte Erklärung zum Zugriff auf die MySQL-Datenbank in der virtuellen Linux-Maschine unter Windows

Detaillierte Erklärung zur Verwendung von MySQL-Speichertabellen und temporären Tabellen

Implementierung der automatischen Vervollständigung von Docker-Befehlen

Detailliertes Tutorial zur Installation von ElasticSearch 6.4.1 auf CentOS7

Über den Unterschied zwischen js typeof und instanceof bei der Beurteilung von Datentypen und deren Entwicklung und Verwendung

Schritte zum Aktivieren von TLS in Docker für eine sichere Konfiguration

Detaillierte Erklärung des durch einen Schrägstrich / verursachten Mordes in Nginx proxy_pass

Teilen Sie die Fallstricke von MySQLs current_timestamp und ihre Lösungen

HTML-Tutorial: Sammlung häufig verwendeter HTML-Tags (6)

So erstellen Sie eine TAR-Datei von WSL über Docker

Vue verwendet das Video-Tag, um die Videowiedergabe zu implementieren

Implementierung der Docker-Bereitstellung von Webprojekten

So verwenden Sie „Explain“, um den SQL-Ausführungsplan in MySql abzufragen

MySql-Index verbessert die Abfragegeschwindigkeit allgemeine Methoden Codebeispiele

Beispiel für die Implementierung eines hohlen Dreieckpfeils und eines X-Symbols mit anschließendem Pseudoelement