"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

Last Update:2017-01-15 Source: Internet

Author: User

Tags repetition

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

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

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.

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