CSS list-style list properties

 The CSS list-style list attribute is CSS that provides web designers with the ability to adjust the display of the list. The so-called list is HTML ul li project tag or HTML ol li project tag . It is also often called project tag or list in Chinese, not only for web designers, Even ordinary people often add these lists to the content to list information. The traditional ul li list or ol li list is relatively simple. The default value is arranged from top to bottom. ul li is a black dot at the beginning, ol li It is automatically generated at the beginning of the digital sorting. If the web designer wants to modify these lists, such as modifying the graphics at the beginning, changing the symbols at the beginning to a small picture display, or modifying the presentation position of the list, you can use the CSS list-style list property To redesign, the following is an example.

CSS list-style example 1: Modify the shape displayed at the beginning of the list (item tag)

<ul style="list-style-type:square;">
　<li>square</li>
　<li>square</li>
</ul>
<ul style="list-style-type:upper-alpha; ">
　<li>upper-alpha</li>
　<li>upper-alpha</li>
</ul>

Present results

• square
• square

• upper-alpha
• upper-alpha

We use CSS list-style-type to adjust the display shape at the beginning of the list to solid squares (square) and upper-alpha letters (upper-alpha), in addition to lowercase letters, solid circles, hollow circles, Arabic numerals, decimal Arabic numerals (automatically filled with zeros at the front), Armenian, Greek, lowercase Roman numerals, uppercase Roman numerals... and many other variations, this is the simplest way to apply CSS list-style list attributes.

For detailed usage and shape selection, please refer to: CSS list-style-type .

CSS list-style example 2. Modify the list (item tag) with a small icon at the beginning

<style type="text/css">
ul li {
    list-style-image:url('upload/20130930173146.gif');
}
</style>
<ul>
　<li>List of symbols starting with icons</ li>
　<li>List of symbols starting with icons</li>
</ul>

Present results

• List with icons at the beginning
• List with icons at the beginning

The second example uses the CSS list-style-image property, and the label symbol at the beginning is changed to the picture display, which can present a more refined texture effect, but the small pattern needs to be designed by yourself, which is a little more laborious and detailed For usage, please refer to the introduction of our " CSS list-style-image " article.

CSS list-style property 3. Modify the display position of the list (item label)

<style type="text/css">
ul.p1 {
    list-style-position:inside;
}
ul.p2 {
    list-style-position:outside;
}
li {
    border:1px #cccccc solid;
}
</style>
<ul class="p1">
　<li>This is displayed within the tag range</li>
　<li>This is displayed within the tag range</li>
</ul>
<ul class="p2">
　<li>This is displayed outside the label range</li>
　<li>This is displayed outside the label range</li>
</ul>

Present results

The third example is to use CSS list-style-position to adjust the position of the item list, which can be displayed within the scope of the label or outside the scope. This has a great relationship with the overall web content layout, and the adjustment method is also very simple. CSS allows designers to use inside or outside parameter values ​​to limit the position of the list to be displayed to match other texts. This way, the list will not move, highlighting the text area or shrinking it too inside to make it look bad , Please refer to the introduction of " CSS list-style-position " for detailed usage .