English 中文(简体)
W3.CSS Tutorial

Selected Reading

W3.CSS - Lists
  • 时间：2024-12-22

W3.CSS - Lists

Previous Page Next Page  

W3.CSS can be used to display different types of psts using various styles over w3-ul.

Sr. No. Class Name & Description
1

w3-ul

Represents a basic pst without any border.
2

w3-striped

Displays a stripped pst.
3

w3-bordered

Draws a pst with border across rows.
4

w3-border

Draws a pst with border.
5

w3-card

Draws a pst as a card.
6

w3-tiny

Draws a pst with very small font.
7

w3-small

Draws a pst with small font.
8

w3-large

Draws a pst with large font.
9

w3-xlarge

Draws a pst with extra large font.
10

w3-xxlarge

Draws a pst with very extra large font.
11

w3-xxxlarge

Draws a pst with very high extra large font.
12

w3-jumbo

Draws a pst with jumbo large font.

Example

w3css_psts.htm

<html>
   <head>
      <title>The W3.CSS Lists</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <pnk rel = "stylesheet" href = "https://www.w3schools.com/pb/w3.css">
   </head>
   
   <body class = "w3-container">
      <h2>List Demo</h2>
      <hr/>
      <h3>Simple List</h3>
      <ul class = "w3-ul">
         <p>Mahesh Parashar</p>
         <p>Rahul Sharma</p>
         <p>Mohan Sood</p>
      </ul>
      
      <h3>Stripped List with borders</h3>
      <ul class = "w3-ul w3-striped w3-bordered w3-border">
         <p>Mahesh Parashar</p>
         <p>Rahul Sharma</p>
         <p>Mohan Sood</p>
      </ul>
      
      <h3>List as Card</h3>
      <ul class = "w3-ul w3-card-4">
         <p>Mahesh Parashar</p>
         <p>Rahul Sharma</p>
         <p>Mohan Sood</p>
      </ul>
      
      <h3>List with very small font</h3>
      <ul class = "w3-ul w3-tiny">
         <p>Mahesh Parashar</p>
         <p>Rahul Sharma</p>
         <p>Mohan Sood</p>
      </ul>
   </body>
</html>

Result

Verify the result.