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

Under the trend of "new infrastructure", the cybersecurity industry is booming

In the next few years, the general direction of n...

Ruijie Cloud Desktop supports Beijing's COVID-19 fight

Imported from abroad, confirmed locally, the sudd...

SpectraIP: €3.5/month KVM-2GB/50GB/5TB/Netherlands data center

SpectraIP is a Dutch hosting company that provide...

Application of 5G IoT in Commercial Buildings

The long-awaited 5G technology is finally here. I...

A thorough understanding of container network communication

Author | Chen Yunhao (Huanhe) 1. Background 1. Wh...

Communication baseband is closely related to mobile phone network speed and call quality

Since we entered the 4G era, we have heard a seri...

6 considerations for new IT leaders in digital transformation

[[397841]] The journey of digital transformation ...

iWebFusion: 10Gbps high bandwidth server starting at $149 per month, with 1Gbps unlimited traffic as an option

iWebFusion is a website of H4Y, a well-establishe...

Should you change your 5G package? You will understand after reading this!

[[281696]] Recently, the three major operators of...

Riverbed Redefines APM, Helps Enterprises Promote Digital Transformation

[51CTO.com original article] It is obvious that d...

5G will become a new engine of economic growth

my country's 5G network construction and appl...

Talk about STM32 network interruption

[[380734]] 01 Introduction Network interrupt vect...

What systems does weak current system integration mainly include?

1. Computer Network System Engineering In intelli...

TmhHost Hong Kong three network CN2 GIA monthly payment starts from 45 yuan, US CN2 GIA high defense VPS quarterly payment starts from 99 yuan

TmhHost is a regular domestic company with ISP\IC...

iWebFusion: 4G memory KVM starts at $9.38/month, dedicated server starts at $57/month, multiple data centers available

iWebFusion is the iWFHosting that I shared before...