So schreiben Sie HTML-Aufzählungszeichen für ungeordnete Listen mithilfe von Bildern und CSS-HTML-Tutorial-php.cn

So schreiben Sie HTML-Aufzählungszeichen für ungeordnete Listen mithilfe von Bildern und CSS

高洛峰

Freigeben： 2017-03-02 14:55:22

Original

5912 Leute haben es durchsucht

Es gibt eine solche Anforderung. Der Inhalt ist eine ungeordnete Liste. Ich möchte, dass die Aufzählungszeichen Miniaturansichten sind. Sie können sich auf Folgendes beziehen Erstellen Sie eine HTML-Seite mit einer ungeordneten Liste von mindestens fünf meistverkauften Büchern. Das Aufzählungszeichen vor jedem Buch muss eine Miniaturansicht sein, die das Cover umreißt. Diese Informationen können im Internet abgerufen werden. Für das Layout ist die Verwendung der CSS-Methode erforderlich.

HTML:

Der Code lautet wie folgt:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<link href="book.css" rel="stylesheet" type="text/css"> 
</head> 
<!--.author:svitter;--> 
<body> 
<p> 
<h1 class="diffentcolor">Linux畅销书</h1> 
<p id="menu"> 

</p> 
<p id="content"> 
<ul> 
<li id="book1">鸟哥的Linux私房菜基础篇</li> 
<li id="book2">鸟哥的Linux私房菜服务器篇</li> 
<li id="book3">Linux命令行与shell脚本编程大全</li> 
<li id="book4">Linux运维之道</li> 
<li id="book5">Linux/Unix系统编程手册</li> 
</ul> 
</p> 
</p> 
</body>

Nach dem Login kopieren

book.css:

Der Code lautet wie folgt:

.diffentcolor{color:green;} 
#differcolor{color:green} 
body, td, p, .p, a { 
font-family: arial,sans-serif; 
} 
h1,h2{ 
font-family:sans-serif; 
color:gray; 
} 
.author{ 
by:svitter; 
} 
h1{ 
border-bottom:1px solid black; 
border-bottom:1px; 
solid black; 
} 
p#container{width:500p} 
p#menu {width:150px;float:left;} 
p#content {float:left;} 
li#book1{ 
list-style-image:url(pic/popularBook.jpg); 
} 
li#book2{ 
list-style-image:url(pic/popularBook2.jpg); 
} 
li#book3{ 
list-style-image:url(pic/popularBook3.jpg); 
} 
li#book4{ 
list-style-image:url(pic/popularBook4.jpg); 
} 
li#book5{ 
list-style-image:url(pic/popularBook5.jpg); 
}

Nach dem Login kopieren

Weitere HTML-Symbole für ungeordnete Aufzählungszeichen mit CSS-Schreibmethoden für Bilder finden Sie auf der chinesischen PHP-Website!