简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home> Web Front-end> HTML Tutorial> body text

How to write HTML unordered list bullets using images using CSS

高洛峰
Release： 2017-03-02 14:55:22
Original
5797 people have browsed it

There is such a requirement. The content is an unordered list. I want the bullets in the list to be thumbnails. This article uses CSS methods for layout implementation. You can refer to the following Create an HTML page with an unordered list of at least 5 best-selling books. The bullet before each book must be a thumbnail outlining the cover. This information can be obtained on the Web. CSS methods are required for layout.

HTML:

The code is as follows:

    

   
 
Linux畅销书
  
 
     
  • 鸟哥的Linux私房菜基础篇
    •  
  • 鸟哥的Linux私房菜服务器篇
    •  
  • Linux命令行与shell脚本编程大全
    •  
  • Linux运维之道
    •  
  • Linux/Unix系统编程手册
    •
Copy after login


book.css:

The code is as follows:

.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); }
Copy after login


For more HTML unordered list bullet symbols using CSS writing methods of images, please pay attention to the PHP Chinese website!


Related labels：
HTML 无序列表 项目符号
source：php.cn
Previous article：Processing when html displays data with a large length Next article：Common ways to set anchor positioning in html
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Try using htmlentities to convert latin characters I'm trying to html encode various names from around the world. The system I ended up with ...
From 2023-09-10 20:57:45
0
1
246
SQL - How to get the latest entry between two different tables? (The timestamp is not stored) I'm working on an ongoing project in which I'm dealing with quotes and the database struct...
From 2023-09-07 00:14:25
0
1
247
I want to create a javascript string so that when it is passed inside a div tag it displays as a list I'm trying to use JavaScript to display a string containing a list of items in a specific ...
From 2023-09-03 23:13:31
0
2
320
javascript - js (Vue) practice: How to input @, and then a list of related candidates will automatically appear? The effect is as follows: Effect description: 1. The user enters the @ symbol, an option l...
From 2017-07-05 11:03:32
0
3
1220
css - 请问dd列表当中，如何能使序号图标垂直对齐不定行数的dd列表 请问dd列表当中，如何能使序号图标垂直对齐不定行数的dd列表 小弟的html结构是<dl> {代码...} </dl> 请问...
From 2017-04-17 13:41:31
0
1
275
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！