Home > Developer > Web Develop

CSS List related properties

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

List-related properties:

1.list-style-image: Custom bullets that allow you to specify an external icon file to suit your individual design needs;

2.list-style-position: Defines where bullets are displayed, including outside and inside, where outside indicates that bullets appear outside the text line of the list item, and the list symbol is displayed by default as outside. Inside indicates that the bullets appear within the text line of the list item;

3.list-style-type: Defines the type of list bullet.

4.list-style-type:none; hides the default bullet for the list structure.

Writing Format Example:

UL li{

List-style-image:url ("Img/list.png");

List-style-position:outside;

}

Or as follows:

UL li{

List-style:url ("Img/list.png") outside;

}

Specific examples:

<! DOCTYPE html>
<meta charset= "UTF-8" >
<title>list attribute</title>
<style>
*{/* Wildcard selector eliminates internal and external margins */
margin:0;
padding:0;
}
. cont{
width:1100px;
height:590px;
margin:0 auto;/* Set Center */
Background-image:url ("img/pack.jpg");
background-size:100% 100%;
}
. top{
height:39px;
Background-color: #FFFC81;
Text-align:left;
}
. Top ul Li {
List-style-type:none;
Float:left;
width:100px;
margin-left:110px;
margin-top:5px;
Text-align:center;
line-height:30px;
}
/*}*/
/*.top ul>:first-child{*/
/*width:270px;*/
/*}*/
. Top ul Li:nth-child (1) {
width:270px;
}
. Bottom {
width:270px;
Text-align:center;
margin-left:110px;
}
. Bottom UL li{
List-style-type:none;
height:40px;
margin-top:10px;
border:1px dashed #DB4F35;
border-radius:10px;
/*background-image:url ("Img/bullet_main_02.gif"); */
/*background-position:left center;*/
/*background-repeat:no-repeat;! * Prohibit background image tile display *!*/
background-size:30px;
line-height:45px;
Text-align:center;
}
. Top UL li:hover{
Background-color: #f2f2f2;
color:red;
Opacity:. 5;
cursor:pointer;/* setting the cursor shape when hovering over the mouse */
}
. Bottom UL li:hover{
opacity:.5;/* Setting Transparency */
}
</style>
<body>
<div class= "cont" >
<div class= "Top" >
<ul>
<li> Product Categories </li>
<li> Spring Festival Special Sale </li>
<li> Member Specials </li>
<li> machine friends must see </li>
</ul>
</div>
<div class= "Bottom" >
<ul>
<li> Women's/underwear </li>
<li> Men's/outdoor </li>
<li> women's shoes/men's Footwear </li>
<li> Beauty/Furniture </li>
<li> snacks/Fresh Fruit </li>
<li> Electrical/Electronics </li>
</ul>
</div>
</div>
</body>
 CSS List related properties

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More