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

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

MySQL-Sortierprinzipien und Fallanalyse

Wissen zur Suchmaschinenoptimierung, auf das Sie beim Webdesign achten sollten

So rufen Sie ein Verzeichnis/einen Ordner in Linux auf, ohne den CD-Befehl zu verwenden

Eine kurze Diskussion über die Lösung für übermäßige Daten in ElementUI el-select

Detaillierte Erklärung unsichtbarer Indizes in MySQL 8.0

Vue-Überwachungseigenschaften und berechnete Eigenschaften

Detailliertes Tutorial zur Installation von mysql-8.0.20 unter Linux

Implementierung der Docker-Compose-Bereitstellung des ZK+Kafka+Storm-Clusters

Codeanalyse von Benutzervariablen in MySQL-Abfrageanweisungen

So erstellen Sie Ihren eigenen privaten Nexus-Server unter Linux

Artikel empfehlen

Ubuntu MySQL 5.6 Version entfernen/installieren/Kodierungskonfigurationsdatei konfigurieren

Beheben Sie das Problem, dass das vom Docker bereitgestellte Verzeichnis nicht gelesen und geschrieben werden kann

vue + springboot realisiert die Login-Funktion

Lösung für BT Baota Panel php7.3 und php7.4 unterstützen ZipArchive nicht

Zusammenfassung der grundlegenden Operationen für MySQL-Anfänger

Eine Zeile CSS-Code, die Chrome zum Absturz bringt

Nginx verbessert die Zugriffsgeschwindigkeit basierend auf der GZIP-Komprimierung

Detaillierte Erläuterung des MySQL Multi-Version Concurrency Control Mechanism (MVCC)-Quellcodes

Detaillierte Schritte zum Installieren und Deinstallieren des Apache-Dienstes (httpd) unter CentOS 7

Einführung in geplante Aufgaben im Linux-System

js implementiert Tabellen-Drag-Optionen

Fallstudie zur dynamischen Datenbindung von this.$set in Vue

Perfektes Installationstutorial für das Dualsystem Win10 + Ubuntu 16.04 [detailliert]

So verwenden Sie den Linux-Paste-Befehl

So deinstallieren Sie MySQL 8.0 unter Linux