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

Actual measurement: The truth about 5G high-speed downloading: monopoly, speed limit and lies

On June 6, 2019, the Ministry of Industry and the...

Sharktech: 1Gbps unlimited traffic high-defense server starting at $49 per month, Denver & Los Angeles data centers

Sharktech, also known as SK Data Center or Shark ...

New infrastructure, new engine: Huawei releases new generation NetEngine 8000 full-service smart router

[Nanjing, China, August 18, 2020] Today, at a pre...

The communication AI market will reach $38.8 billion in 2031. The integration of 5G/6G and AI can bring multiple benefits.

The global deployment of 4G and 5G is faster than...

HostDare: 25% off NVMe disk VPS in Los Angeles starting at $19.49/year

HostDare has launched a new promotion for the Los...

How unified communications technologies can support long-term remote work

[[354214]] Organizations implementing long-term r...

iONcloud New Year 20% off, San Jose/Los Angeles/Dallas/Honolulu data centers, Linux/Windows options

iONcloud has released a special offer for the Yea...

5G, edge computing and the Industrial Internet of Things

The new 5G network will transform many industries...

RAKsmart Bare Metal Cloud/Cloud Server/VPS 30% off, Dedicated Server Limited Flash Sale Starting from $30/month

Coinciding with the Chinese New Year, RAKsmart ha...

PacificRack: Unlimited KVM in Los Angeles starting at $1.50 a month or $15 a year

PacificRack has launched new products. The word &...

...

DiyVM: Hong Kong/Japan/US VPS discounts up to 50%, 2G memory package starting at 69 yuan per month

It's been a long time since I shared informat...

Gartner: Enterprises rethink software security strategies

Businesses are rethinking risk management and sof...

IPv6 global penetration rate reaches 27%, 6G will be deployed in 2030

Recently, Latif Ladid, chairman of the National I...

AkkoCloud: CN2 GIA Germany/CN2 GIA UK/CN2 GIA USA routes starting from 99 yuan/quarter or 299 yuan/year

AkkoCloud is a business that mainly provides CN2 ...