HTML 无序列表项目符号使用图片的CSS写法
导读：收集整理的这篇文章主要介绍了HTML 无序列表项目符号使用图片的CSS写法，觉得挺不错的，现在分享给大家，也给大家做个参考。 创建一个HTML页面， 其内容为一个无序列表， 列表中至少包含了5本畅销书，每本书之前的项目符号必须采用...
收集整理的这篇文章主要介绍了HTML 无序列表项目符号使用图片的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>
div>
h1 class="diffentcolor"> Linux畅销书/h1>
div id="menu">
/div>
div 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>
/div>
/div>
/body>
book.css:
复制代码代码如下:
.diffentcolor{ color:green; }
#differcolor{ color:green}
body, td, div, .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;
}
div#container{ width:500p}
div#menu { width:150px; float:left; }
div#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);
}
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML 无序列表项目符号使用图片的CSS写法
本文地址： https://pptw.com/jishu/587992.html