An ordered list

An ordered list, as its name implies, sorts the list by ↓

  1. The first sentence
  2. The second sentence
  3. The third sentence
</li> </li> </li> </li>Copy the code

** sorting can be divided into five kinds

  1. Digital sorting
  2. Alphabetical order
  3. Lowercase sort
  4. Roman alphabetic order
  5. Lower case Roman alphabetic sort **

Sample code:

<! DOCTYPE HTML >< HTML >< head> <meta charset=" UTF-8 "> <title></title> </head> <body> < HTML >< body> <h4> < / h4 > < ol > < li > first < / li > < li > the second sentence < / li > < li > the third sentence < / li > < li > the fourth < / li > < / ol > < h4 > alphabetical order: < / h4 > < ol type = "A" > < li > first < / li > < li > the second sentence < / li > < li > the third sentence < / li > < li > 4 words < / li > < / ol > < h4 > lowercase letters ordering: < / h4 > < ol type = "a" > < li > first < / li > < li > the second sentence < / li > < li > the third sentence < / li > < li > 4 words < / li > < / ol > < h4 > Roman alphabetical order: < / h4 > < ol type = "I" > < li > first < / li > < li > the second sentence < / li > < li > the third sentence < / li > < li > 4 words < / li > < / ol > < h4 > lowercase Roman alphabet list: < / h4 > < ol type = "I" > < li > first < / li > < li > the second sentence < / li > < li > the third sentence < / li > < li > 4 words < / li > < / ol > < / body > < / HTML > < / body > < / HTML >Copy the code

Effect screenshot:

Unordered list

Unordered lists are sorted without ordinals, but by default they are preceded by a dot

< ul > < li > 1 < / li > < li > the second sentence < / li > < li > the third sentence < / li > < li > 4 words < / li > < / ul >Copy the code

Sample code:

<! DOCTYPE HTML >< HTML >< head> <meta charset=" UTF-8 "> <title></title> </head> <body> <ul> <li> </li> </li> </li> </li> </li>Copy the code

Effect screenshot:

Unordered lists remove points

By using list-style: none; You can remove the dots

By writing the style attribute directly in the UL tag or by writing a selector and adding list-style: None; Remove the dots. Sample code:

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> #aa{ list-style: none; } < / style > < title > < / title > < / head > < body > < ul > < li > first < / li > < li > the second sentence < / li > < li > the third sentence < / li > < li > 4 words < / li > < / ul > < ul > < li > 1 < / li > < li > the second sentence < / li > < li > the third sentence < / li > < li > 4 words < / li > < / ul > < / body > < / HTML >Copy the code

Effect screenshot:

Lines show

Both ordered and unordered lists are displayed on a single row by default, but we can also have them displayed on a single row by using the display property.

The display properties instructions
none Don’t show
block Block-level elements (column display)
​ inline Inline elements (row display)

Both block-level elements and inline elements ignore preceding ordinals (including the ordered and unordered points)

Sample code:

<! DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .aa li{ display: inline; <! -->}. Bb li{display: none; <! Cc li{display: block; <! - block elements (columns show) - >} < / style > < title > < / title > < / head > < body > < ol > < li > the first sentence < / li > < li > the second sentence < / li > < li > the third sentence < / li > < li > 4 words < / li > < / ol > < ul > < li > first < / li > < li > the second sentence < / li > < li > the third sentence < / li > < li > 4 words < / li > < / ul > < ul > < li > first < / li > < li > the second sentence < / li > < li > the third sentence < / li > </li> </ul> </body> </ HTML >Copy the code

Effect screenshot:



Writing is not easy, if it is helpful to you, thank you for your support!

If you are a computer terminal, see the lower right corner of the “one button three links”, yes click it [ha ha]

Come on!

Work together!

Keafmd