Home > Developer > Web Develop
First case
/* When the icon in front of the title is a single dot or block or other similar icon, define the background map background to be placed in <li>.
Set the size, address, non-repetition, position of the background image in <li>, and text-related padding, no-sequence icons, high-line */
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<title> 36th Lesson Finish Li Small icon effect </title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<meta name= "description" content= "Boolean education http://www.itbool.com"/>
<style type= "Text/css" >
*{
margin:0px;
padding:0px;
}
Ji=
List-style-type:none;
}
. Icon1 li{
padding-left:15px;
background-size:5px 5px;
Background-image:url (.. /cssimage/sinaicon.png);
Background-repeat:no-repeat;
BACKGROUND-POSITION:5PX 8px;
List-style-type:none;
line-height:20px;
}
/* When the icon in front of the title is a single dot or block or other similar icon, define the background map background to be placed in <li>.
Set the size, address, non-repetition, position of the background image in <li>, and text-related padding, no-sequence icons, high-line */
</style>
<body>
<div id= "Test1" > After initializing the CSS, write Li, and use the background image to complete the effect of the Li Small icon, and achieve a browser compatible </div>
<ul class= "Icon1" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
The second case
/* When the icon in front of the title is a long column and marked with a continuous 1, 2, 3, 4 ... Picture instead of a single point or similar icon when defining the background map background to be defined in <ul>.
Remember to define the attribute width, the address and location of the background image, the picture is not duplicated, etc.
Then define the relevant parts of the text in <li>, such as the padding padding, row height line-height, no serial number style list-style-type, font size etc. */
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<title> 36th Lesson Finish Li Small icon effect 2</title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<meta name= "description" content= "Boolean education http://www.itbool.com"/>
<style type= "Text/css" >
*{
margin:0px;
padding:0px;
}
Ji=
List-style-type:none;
}
. icon1{
width:1024px;
height:978px;
Background-image:url (image/smallicon2.jpg);
Background-repeat:no-repeat;
Background-position:0 -30px;
}
. Icon1 li{
padding-top:40px;
padding-left:200px;
line-height:115px;
List-style-type:none;
font-size:50px;
}
/* When the icon in front of the title is a long column and marked with a continuous 1, 2, 3, 4 ... Picture instead of a single point or similar icon when defining the background map background to be defined in <ul>.
Remember to define the attribute width, the address and location of the background image, the picture is not duplicated, etc.
Then define the relevant parts of the text in <li>, such as the padding padding, row height line-height, no serial number style list-style-type, font size etc. */
</style>
<body>
<div id= "Test1" > After initializing the CSS, write Li, and use the background image to complete the effect of the Li Small icon, and achieve a browser compatible </div>
<ul class= "Icon1" >
<li>1, Spring </li>
<li>2, Summer </li>
<li>3, Autumn </li>
<li>4, Winter </li>
</ul>
</body>
"CSS Learning notes" after initializing the CSS, write Li, and use the background image to complete the effect of the Li Small icon, and to achieve a browser-compatible
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
