Maison >interface Web >tutoriel HTML >Comment écrire des puces de liste HTML non ordonnées à l'aide d'images en utilisant CSS
Comment écrire des puces de liste HTML non ordonnées à l'aide d'images en utilisant CSS
- 高洛峰original
- 2017-03-02 14:55:225891parcourir
Il existe une telle exigence. Le contenu est une liste non ordonnée. Je veux que les puces de la liste soient des vignettes. Cet article utilise des méthodes CSS pour l'implémentation de la mise en page.
Créez une page HTML avec une liste non ordonnée d'au moins 5 livres les plus vendus. La puce avant chaque livre doit être une vignette décrivant la couverture. Ces informations peuvent être obtenues sur le Web. Il est nécessaire d'utiliser la méthode CSS pour la mise en page.
HTML :
Le code est le suivant :
<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 :
Le code est le suivant :
.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);
}Pour plus de symboles de puces de liste non ordonnée HTML utilisant les méthodes d'écriture CSS d'images, veuillez faire attention au site Web PHP chinois !