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

What did the "players" in the trillion-dollar edge computing market do in the first half of 2018?

Edge computing market prospects and valuations Ed...

LOCVPS Double 11 Top up 300 get 50, all VPS 20% off

LOCVPS (Global Cloud) has announced the Double 11...

Gigsgigscloud Christmas first month 80% off, Los Angeles VPS first month starting from $1

It's been a long time since there's been ...

The operating data of the three major operators in 2018, how did they perform this year?

2018 has passed. This year was a year of hard wor...

ZJI newly launched Taiwan CN2 server, Hong Kong high frequency server/Taiwan CN2 server 30% off

ZJI has newly launched Taiwan CN2 line servers, a...

Sichuan Provincial Government Cloud is officially launched, and the government affairs of our province have entered the "cloud era" of data sharing and fine governance

[[189512]] Provincial government advisor Zhang Zu...

How will the Internet of Things impact future data centers?

The Internet of Things is more than just an explo...

Next generation office software: collaboration, dual links and multidimensional tables

Airtable, an overseas multi-dimensional spreadshe...

From HTTP to HTTPS, it turns out to be so simple

[[354426]] 【51CTO.com original article】 HTTP Begi...

There are about 180 million users of 5G packages using 4G terminals

Recently, the net increase in 5G package users of...

Things about UDP protocol

UDP (User Datagram Protocol) protocol, translated...

2G network withdrawal has 200 million potential users, elderly mobile phones have pain points and no market

[[343834]] I have tried According to statistics f...

Embrace cloud desktop and easily overcome the three major pitfalls of desktop application innovation

From the early "863" and "Core Hig...

The RF Device Revolution in the 5G Era

1 RF devices are the core foundation of wireless ...

TCP send window, receive window and how they work

The chart above is a snapshot taken from the send...