HTML 無序列表項目符號使用圖片的CSS寫法
- 高洛峰原創
- 2017-03-02 14:55:225873瀏覽
有這樣的一個需求，內容為一個無序列表，想讓列表的項目符號必須採用縮圖，本文使用CSS方法進行佈局實現，大家可以參考下
建立一個HTML頁面， 其內容為一個無序列表， 清單中至少包含了5本暢銷書，每本書之前的項目符號必須採用概述封面的縮圖。這些資訊可以沖Web上取得。 要求採用CSS方法進行佈局。
HTML：
程式碼如下:
<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:
程式碼如下:
.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);
} 更多HTML 無序列表項目符號使用圖片的CSS寫法相關文章請關注PHP中文網！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn