Inventory of common Ul Ol lists and common list marker icons in HTML

Inventory of common Ul Ol lists and common list marker icons in HTML

[[402167]]

1. Concept

The CSS list properties are as follows: Set different list item markers to ordered lists. Set different list item markers to unordered lists. Set list item markers to images.

2. What are the types of lists?

List of types:

  • ul unordered list - list items are marked with special graphics (such as small black dots, small squares, etc.)
  • ol Ordered list - List items are marked with numbers or letters.

Using CSS, lists can be styled further and images can be used as list item markers.

3. Common ul ol list item tags

The list-style-type property specifies the type of list item marker:

  1.  <!doctype html>
  2.  <html lang= "en" >
  3.  <head>
  4.  <meta charset= "UTF-8" >
  5.  <title>Document</title>
  6.  <style>
  7.  ul.a {
  8.                 list-style-type: circle;
  9.  } 
  10.  
  11.  ul.b {
  12.                 list-style-type: square;
  13.  } 
  14.  
  15.  ol.c {
  16.                 list-style-type: upper -roman;
  17.  } 
  18.  
  19.  ol.d {
  20.                 list-style-type: lower -alpha;
  21.  }
  22.  </style>
  23.  </head> 
  24.  
  25.  <body>
  26.         <p>Example of unordered lists:</p> 
  27.  
  28.  <ul class= "a" >
  29.  <li>Language</li>
  30.  <li>Mathematics</li>
  31.  <li>English</li>
  32.  </ul> 
  33.  
  34.  <ul class= "b" >
  35.  <li>Language</li>
  36.  <li>Mathematics</li>
  37.  <li>English</li>
  38.  </ul> 
  39.  
  40.         <p>Example of ordered lists:</p> 
  41.  
  42.  <ol class= "c" >
  43.  <li>Language</li>
  44.  <li>Mathematics</li>
  45.  <li>English</li>
  46.  </ol> 
  47.  
  48.  <ol class= "d" >
  49.  <li>Language</li>
  50.  <li>Mathematics</li>
  51.  <li>English</li>
  52.  </ol> 
  53.  
  54.  </body> 
  55.  
  56.  </html>

IV. Image browser compatibility solution for ul ol list item tags

To specify an image for a list item marker, use the list-style-image property.

In all browsers, the following example will display the image tag:

  1.  ul
  2.  {
  3.  list-style-type: none;
  4.  padding: 0px;
  5.  margin: 0px;
  6.  }
  7.  ul li
  8.  {
  9.  background-image: url(sqpurple.gif);
  10.  background-repeat: no -repeat;
  11.  background-position: 0px 5px;
  12.  padding- left : 14px;
  13.  }

Code Analysis

  • ul:
    • Set the list style type to no delete list item marker
    • Set padding and margin to 0px (browser compatibility)
  • All li in ul:
    • Set the URL of the image and set it to be displayed only once (no duplication)
    • Position the image you want (0px left and 5px top and bottom)
    • Use the padding-left property to place text in a list.

5. Expansion

ul ol list abbreviation attribute

All list attributes can be specified in a single attribute. This is called an abbreviation attribute.

To use the shorthand properties for lists, set the list style properties as follows:

  1.  ul
  2.  {
  3.  list-style: square url( "sqpurple.gif" );
  4.  }

If using abbreviations the order of attribute values ​​is:

①list-style-type. ②list-style-position. ③list-style-image.

If one of the above values ​​is missing, it's OK as long as the rest are in the specified order.

VI. Conclusion

This article is based on HTML basics. This article mainly introduces the common HTML ul ol lists and common list marker icons. For the problem of browser compatibility with list images, a series of solutions are provided. Finally, relevant knowledge is expanded and code is optimized. I hope it can help you learn.

This article is reprinted from the WeChat public account "IT Sharer", which can be followed through the following QR code. To reprint this article, please contact the IT Sharer public account.

<<:  Ericsson signs 5G SA agreement with Spanish telecom operator Masmovil

>>:  5G promotes the development of industrial Internet, and we need to pay attention to these two points in the future

Recommend

Understanding Deterministic Networks in Seconds: Playing with Queues (Part 1)

Queue scheduling is a core issue in computer netw...

#Has run away#Limewave: $2.8/month-1GB/10GB/1TB/Seattle data center, free upgrade to double memory/monthly traffic by submitting a work order

【Attention】This merchant has run away!!! Limewave...

How the IoT market will meet the 48 trillion “new infrastructure”

Recently, the central government has clearly inst...

WOT Huang Shuquan: Edge computing helps industrial intelligent manufacturing

[51CTO.com original article] On May 18-19, 2018, ...

South Korea pushes for independence of 6G core technology

After South Korea launched the world's first ...

The three major operators announced the "Implementation Rules for Number Portability Service"

On November 10, the Ministry of Industry and Info...

Mellanox Launches Innovative ConnectX-6 Dx Chip, BlueField-2 Secure Cloud SmartNIC and I/O Processing Unit Solutions

Beijing, China – September 3, 2019 – Mellanox Tec...

Without big data and artificial intelligence, you may not be able to eat if you are hungry

【51CTO.com original article】 Friends born in the ...

Chinese companies account for more than 30% of global 5G standard patent declarations

CCTV News: The reporter learned from the Ministry...

The three major operators' Q1 2021 financial reports: revenue and profits both increased, and 5G drove performance back to prosperity

“Plant trees in spring and harvest fruits in autu...

「Product News」Interpretation of Dataphin's real-time R&D of batch and stream integration

background Every time the bell of the Double 11 g...

[Black Friday] DediPath: 35% off VPS/Hybrid Servers starting at $1.2/month, 1Gbps unlimited traffic, multiple data centers in Los Angeles and other places

DediPath's Black Friday discounts this year a...

Industry 4.0 is driving enterprise fiber access

Industry 4.0 has brought with it a wave of value-...

From the network I/O model to Netty, let’s first take a deeper look at I/O multiplexing

In the previous article, we learned about the fiv...

An article to understand TCP, UDP concepts and TCP three-way handshake connection

[[245408]] OSI computer network 7-layer model TCP...