HTML ungeordnete Liste Aufzählungspunkte mit Bildern CSS schreiben

Erstellen Sie eine HTML-Seite mit einer ungeordneten Liste von mindestens fünf Bestsellern. Der Aufzählungspunkt vor jedem Buch muss eine Miniaturansicht sein, die das Cover zusammenfasst. Diese Informationen können im Internet abgerufen werden. Erfordert CSS-Ansatz für das Layout.

HTML:

Code kopieren

Der Code lautet wie folgt:

<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=gb2312" />
<link href="buch.css" rel="stylesheet" type="text/css">
</Kopf>

<Text>
<div>
<h1 class="diffentcolor">Linux-Bestseller</h1>
<div id="Menü">

</div>
<div id="Inhalt">
<ul>
<li id="book1">Bird Brothers private Linux-Rezept-Grundlagen</li>
<li id="book2">Bird Brothers Linux Private Kitchen Server Edition</li>
<li id="book3">Linux-Befehlszeilen- und Shell-Skript-Programmier-Enzyklopädie</li>
<li id="book4">Linux-Betrieb und -Wartung</li>
<li id="book5">Linux/Unix-System-Programmierhandbuch</li>
</ul>
</div>
</div>
</body>

buch.css:

Code kopieren

Der Code lautet wie folgt:

.unterschiedlicheFarbe{Farbe:grün;}
#differcolor{Farbe:grün}
Körper, td, div, .p, ein {
Schriftfamilie: Arial, Sans-Serif;
}
h1,h2{
Schriftfamilie: serifenlos;
Farbe: grau;
}
.Autor{
von:svitter;
}
h1{
Rahmen unten: 1px, durchgehend schwarz;
Rahmen unten: 1px;
tiefschwarz;
}
div#container{width:500p}
div#Menü {Breite:150px;Float:links;}
div#Inhalt {float:left;}
li#buch1{
Listenstil-Bild: URL (Bild/popularBook.jpg);
}
li#buch2{
Listenstil-Bild: URL (Bild/popularBook2.jpg);
}
li#buch3{
Listenstil-Bild: URL (Bild/popularBook3.jpg);
}
li#book4{
Listenstil-Bild: URL (Bild/popularBook4.jpg);
}
li#book5{
Listenstil-Bild: URL (Bild/popularBook5.jpg);
}

<<: idea verwendet Docker-Plugin, um automatisierte Bereitstellung mit einem Klick zu erreichen

>>: JS praktisches objektorientiertes Schlangenspielbeispiel

Tipps zur Konvertierung von MySQL-Spalten in Zeilen (teilen)

So lösen Sie das Problem der Zabbix-Überwachung, das aufgrund von PHP-Problemen zu verstümmelten chinesischen Zeichen in der grafischen Benutzeroberfläche führt

Artikel

Eine vorläufige Studie zu zusammengesetzten Primärschlüsseln und gemeinsamen Primärschlüsseln in SQL-Anweisungen

HTML ungeordnete Liste Aufzählungspunkte mit Bildern CSS schreiben

Tipps zur Konvertierung von MySQL-Spalten in Zeilen (teilen)

Beheben Sie das Problem, dass Navicat keine Verbindung zum MySQL-Server im Centos-System in VMware herstellen kann

mysql 5.7.11 winx64 anfängliche Passwortänderung

Stellen Sie die Grafana+Prometheus-Konfiguration mit Docker bereit

So lösen Sie das Problem der Zabbix-Überwachung, das aufgrund von PHP-Problemen zu verstümmelten chinesischen Zeichen in der grafischen Benutzeroberfläche führt

Eine vorläufige Studie zu zusammengesetzten Primärschlüsseln und gemeinsamen Primärschlüsseln in SQL-Anweisungen

Detaillierte Erläuterung des Implementierungsprinzips der Transaktionsisolationsstufe in MySQL

js realisiert die Lupenfunktion der Shopping-Website

Detaillierte Erläuterung der Konfiguration und Serialisierung von Nest.js-Umgebungsvariablen

Vue+ECharts realisiert das Zeichnen einer China-Karte sowie die automatische Drehung und Hervorhebung von Provinzen

Artikel empfehlen

IE6 BUG und Fix ist eine vorbeugende Strategie

Detailliertes Tutorial zur Offline-Installation von MySQL unter CentOS7

Die Idee kombiniert Docker, um Image-Paketierung und Bereitstellung mit einem Klick zu realisieren

Drei Strategien zum Umschreiben von MySQL-Abfrageanweisungen

So konvertieren Sie eine Zeichenfolge in JavaScript in eine Zahl

Eigenschaften von JavaScript-Pfeilfunktionen und Unterschiede zu normalen Funktionen

Detaillierte Erläuterung der MySQL SQL99-Syntax für Inner Join und Non-Equivalent Join

Das Vue-Projekt realisiert das Zeichnen eines Wasserzeichens in einem bestimmten Bereich

VMWare Linux MySQL 5.7.13 Installations- und Konfigurationstutorial

Zusammenfassung gängiger Begriffe in CSS (Cascading Style Sheet)

Nginx-Konfiguration zum Erreichen eines Lastenausgleichs auf mehreren Servern

Tiefes Verständnis des Mechanismus des CSS-Hintergrund-Blend-Modus

Zwei Bilder von JavaScript zum Verständnis der Prototypenkette

So filtern Sie doppelte Daten heraus, wenn Sie große Datenmengen in MySQL einfügen

Ein Artikel zum Verständnis des Ausführungsprozesses von MySQL-Abfrageanweisungen