| 标题 | HTML 无序列表项目符号使用图片的CSS写法 |
| 内容 | 有这样的一个需求，内容为一个无序列表，想让列表的项目符号必须采用缩略图，本文使用CSS方法进行布局实现，大家可以参考下。 创建一个HTML页面，其内容为一个无序列表，列表中至少包含了5本畅销书，每本书之前的项目符号必须采用概述封面的缩略图。这些信息可以冲Web上获取。要求采用CSS方法进行布局。 HTML： 代码如下: <html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> <linkhref="book.css"rel="stylesheet"type="text/css"> </head> <!--.author:svitter;--> <body> <div> <h1class="diffentcolor">Linux畅销书</h1> <divid="menu"> </div> <divid="content"> <ul> <liid="book1">鸟哥的Linux私房菜基础篇</li> <liid="book2">鸟哥的Linux私房菜服务器篇</li> <liid="book3">Linux命令行与shell脚本编程大全</li> <liid="book4">Linux运维之道</li> <liid="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:1pxsolidblack; border-bottom:1px; solidblack; } 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); } |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。