PHP Full Stack Development (eight): Cssⅵ list Style

Lists are divided into ordered and unordered lists

We know that the label of the sequence list is <ol> meaning the order list

The label of the unordered list is <ul>

The labels for each item in the list are wrapped in <li>.

You can use a list style in CSS to not only change the list item markers for a list, but also to use a picture as a list item marker.

can be used

List-style-image: url('sqpurple. GIF');

To set the list item to be marked as a picture

can also be used

List-style-type: none;

To set the flag type of the list item, more different symbols for the list item flags, you can consult the CSS's List-style-type property

But we use list-style-image: url('sqpurple. GIF'),when there is a browser incompatibility phenomenon.

Therefore, in order to set browser compatibility, the following code:

<style>ul{/*First, set the list item to none, that is, no list item tag*/List-style-type:None;/*the margin for the set list is 0 (for better compatibility with different browsers)*/margin:0;/*set the padding for the list to 0 (for better compatibility with different browsers)*/padding:0;}/*ul and Li together, separated by a space between, is the UL tag all the Li label, this is often used*/ul Li{/*set the background of a list item*/Background-image:URL (image/bg2.gif);/*setting the background of a list item cannot be tiled, or where to go, note that this is no-repeat, not none*/background-repeat:no-repeat;/*sets the position of the background of the list item, the horizontal position is 0px, and the vertical position is 5px*/background-position:0px 5px;/*sets the padding within the list item, which is the fill within the bounding rectangle. Left padding 14px*/Padding-left:14px; }</style>

PHP Full Stack Development (eight): Cssⅵ list Style