Heim >Web-Frontend >HTML-Tutorial >So schreiben Sie HTML-Aufzählungszeichen für ungeordnete Listen mithilfe von Bildern und CSS
So schreiben Sie HTML-Aufzählungszeichen für ungeordnete Listen mithilfe von Bildern und CSS
- 高洛峰Original
- 2017-03-02 14:55:225892Durchsuche
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>
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);
}Weitere HTML-Symbole für ungeordnete Aufzählungszeichen mit CSS-Schreibmethoden für Bilder finden Sie auf der chinesischen PHP-Website!