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

Today, China’s 5G is two years old!

On October 31, 2019, the first day of the 28th Ch...

Ruishu Information: The fast-moving consumer goods industry faces severe API attacks, and API security governance is imperative

In the digital age, traditional fast-moving consu...

Unleashing the power of 5G: Innovative devices will revolutionize connectivity

There’s no denying that the advent of 5G technolo...

Unveiling HTTP/2: How HTTP/2 establishes a connection

[[285457]] Preface The Hypertext Transfer Protoco...

To accelerate 5G innovation and monetization, Ericsson and several operators jointly established a network API company

According to foreign media reports, communication...

In the interview, I was asked how the reliability of TCP is guaranteed?

We know that TCP is reliable. Our previous articl...

Accelerating digital transformation, 5G empowers the next generation of new industrial manufacturing

[[335662]] The COVID-19 pandemic has imposed mand...

Mobile phone roaming has finally become history, what about IoT roaming?

As early as this year's "Two Sessions&qu...

Ping is often used in the network. Teach you how to detect the three-layer network at one time

Internet Control Message Protocol: ICMP is a cont...

SD-WAN in 2019: A conundrum for service providers

It’s that time of year again when analysts and ex...

Wi-Fi Alliance announces Wi-Fi 6 as new logo

Nowadays, Wi-Fi has become an indispensable part ...

6 AIOps trends for 2021

[[386132]] The increasingly decentralized, hetero...

Riverbed Releases SteelFusion 5.0, Adds Support for NAS Storage

[[185144]] Riverbed Technology, the application p...

"Net Neutrality" Is Making a Comeback, Will the World Be a Better Place?

[[413633]] As part of his plan to promote large-s...

Jim Zemlin, Executive Director of the Linux Foundation, is optimistic about diversified heterogeneous computing and believes that openness can lead to win-win results

[51CTO.com original article] On September 20, 201...