HTML无序列表项目符号使用图片的CSS写法_html无序列表怎么改成图片资源-CSDN文库

91 浏览量 2020-09-28 05:53:04 上传评论 1 收藏 33KB PDF 举报

在网页设计中，有时我们需要对HTML的无序列表（`<ul>`）的项目符号进行自定义，使其显示为图片，而不是默认的圆点、方块或数字。本篇文章将介绍如何通过CSS来实现这一需求，以展示一本畅销书列表，每一本书的前面都用其封面缩略图作为项目符号。我们创建一个基本的HTML结构，包含一个标题和一个无序列表。在列表中，我们将每一本书作为一个`<li>`元素，并为它们分别添加ID，以便在CSS中进行样式设置： ```html <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <link href="book.css" rel="stylesheet" type="text/css"> </head> <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> </html> ``` 接下来，我们编写CSS样式表（book.css），主要目标是为`<li>`元素设置自定义的项目符号。CSS中，`list-style-image`属性用于设置列表项的图标，它接受一个URL值，指向要显示的图像。在这个例子中，我们为每个`<li>`元素分别设置不同的图像： ```css .diffentcolor { 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; } div#container { width: 500px; } 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); } ``` 在这个CSS样式表中，`list-style-image`属性被应用到每个具有特定ID的`<li>`元素，每个ID对应于一本畅销书，并且指向相应的书籍封面图片。例如，`li#book1`的项目符号将是`pic/popularBook.jpg`图片，以此类推。通过这种方式，我们可以实现一个具有个性化项目符号的无序列表，每个符号都是书籍的缩略图。这种方法对于创建视觉吸引力强、信息丰富的列表非常有用，特别是用于图书推荐、产品目录或其他需要图像作为标识的情况。需要注意的是，为了确保图片能够正确显示，图片路径需要相对于CSS文件的位置是正确的。此外，为了适应不同屏幕尺寸，可能还需要考虑响应式布局，使列表在不同设备上都能良好展示。这可以通过媒体查询（media queries）或者其他响应式设计技术来实现。

资源推荐

资源详情

资源评论