The Application of UL-LI label combined with CSS

The Application of UL-LI label combined with CSS

In CSS layout, ul and li are very common. Use DIV and CSS to create a table-free layout.

In fact, Dreamweaver also has examples of built-in CSS layout, such:

 

1. LI code format:
   A) format the list with CSS: ul li {
   List-style-type: none;
   } For example:
   • Supply and Demand Information

   B) If you want to replace the list operator with an image, then ul li {
   List-style-type: none;
   List-style-image: url (images/icon.gif );
   } For example:

   • Supply and Demand Information

   C) For left alignment, use the following code: ul {
   List-style-type: none;
   Margin: 0px;
   } For example:

   • Supply and Demand Information

   D) If you want to add a background color to the list, use the following code: ul {
   List-style-type: none;
   Margin: 0px;
   }
   Ul li {
   Background: # CCC;
   } For example:

   • Supply and Demand Information

   E) If you want to add the MOUSEOVER background color effect to the list, use the following code: ul {list-style-type: none; margin: 0px ;}
   Ul li a {display: block; width: 100%; background: # ccc ;}
   Ul li a: hover {background: #999;} Note: display: block; this line must be added to display the block!

   For example:

   • Supply and Demand Information

   F) horizontal arrangement of elements in. LI, key FLOAT: LEFT: ul {
   List-style-type: none;
   Width: 100%;
   }
   Ul li {
   Width: 80px;
   Float: left;
   }

   •  
   • Supply and Demand Information
   • Supply and Demand Information Network