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写法。