Home > Article > Web Front-end > Example explanation of CSS list style
CSS List
CSS ListAttributeThe function is as follows:
Set different list items to be marked as ordered lists
Set different list items marked as unordered lists
Set list items marked as images
List
In HTML, there are two types of lists:
Unordered list - list items are marked with special graphics (such as small black dots, small boxes, etc.)
Ordered list - list items are marked with numbers or letters
Use CSS , further styles can be listed, and images can be used as list item markers.
Different list item markers
The list-style-type attribute specifies the type of list item marker: :
Instance
ul.a {list-style-type: circle;} ul.b {list-style-type: square;} ol.c {list-style-type: upper-roman;} ol.d {list-style-type: lower-alpha;}
Some values are None Sequenced lists, and some ordered lists.
Image as list item marker
To specify an image as a list item marker, use the list style image attribute:
Example
ul { list-style-image: url('sqpurple.gif'); }
The above example is in Display is not the same in all browsers, IE and Opera display image tags a little higher than Firefox, Chrome and Safari.
If you want to place the same image logo in all browsers, you should use the browser compatibility solution. The process is as follows
Browser compatibility solution
Also in all browsers, the following example will display the image tag:
Example
ul { list-style-type: none; padding: 0px; margin: 0px; } ul li { background-image: url(sqpurple.gif); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px; }
Example explanation:
ul:
Set the list style Type as None Remove List item tag
Set padding and margin to 0px (browser compatibility)
all li in ul:
Set image URL, and set it to display only once (no duplication)
Position the image you need (0px left and 5px top and bottom)
Use the padding-left attribute to place the text in the list
List-abbreviated attribute
All list attributes can be specified in a single attribute. This is called an abbreviation attribute.
Use abbreviated attributes for lists, and the list style attributes are set as follows:
Example
ul { list-style: square url("sqpurple.gif"); }
If you use abbreviated attribute values, the order of values is:
list-style -type
list-style-position (See CSS property table below for instructions)
list-style-image
If the above It doesn't matter if one of the values is missing and the rest are still in the specified order.
【Related Recommendations】
1. Special Recommendation:"php Programmer Toolbox" V0.1 version Download
2. Free css online video tutorial
3. php.cn Dugu Jiujian (2)-css video tutorial
The above is the detailed content of Example explanation of CSS list style. For more information, please follow other related articles on the PHP Chinese website!