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

Blog    

Recommend

5G technology has just emerged, so don’t rush to pour cold water on it

After 3G and 4G have successively gone from unfam...

Bluetooth 4.0 Beacons vs Bluetooth 5.0 Beacons: Technology Comparison

Since 1994, there have been 12 versions of Blueto...

“Number Portability” is launched nationwide! Who will be the next “pain point” to be solved?

The national "number portability" servi...

Huawei Cloud and Xinhua News Agency work together to bring news closer to you

The booming development of digital technology has...

As 5G price war begins, US operators also adopt "Internet thinking"

After taking the lead in the world in 5G network ...

Aoyou Hosting Hong Kong CN2 High Defense VPS Simple Test

In December last year, the tribe shared informati...

Game lag? Be careful to use the wrong WiFi frequency at home

When you use WiFi at home to play games, you alwa...

A must-have for 5G engineers! A complete list of 5G protocols

The three major operators have already commercial...

Slow Wi-Fi? Want to make it 4 times faster? Try these tips!

In the modern Internet era, the highest productiv...

Sharktech: Los Angeles 10Gbps unlimited traffic high-defense server $299/month, 1Gbps unlimited traffic $49/month

Earlier this month, we shared the news about Shar...

Front-end Science: What is an API Gateway? Why is it useful?

An API is often referred to as a front door for a...

Ericsson and Samsung settle patent dispute

According to foreign media, Ericsson has reached ...

CMIVPS offers 10% off on Seattle high-security VPS, AS4837 line optimization starting at $6.1/month

CMIVPS recently launched a new VPS host in the US...

What is the function of each layer in the computer network layered model?

1. Layering of computer networks In the computer ...

Optical network campus under the background of new education infrastructure: the construction of Ethernet all-optical network of Anhui Sino-Australian Vocational College of Science and Technology

Anhui Sino-Australian Vocational College of Scien...