【CSS学习笔记】初始化CSS后，写li，并利用背景图片，来完成li小图标的效果，且达到个浏览器兼容

第一种情况

/*当标题前的图标时单独的一个点儿或者方块或者其他类似图标时，定义背景图background要放在<li>里。
在<li>中设置背景图片的尺寸，地址，不重复，位置；以及文字相关的padding，无序列图标，行高等*/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>第36课完成li小图标的效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
<style type="text/css">
   *{
       margin: 0px;
       padding: 0px;
   }
   li{
       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;
   }
   /*当标题前的图标时单独的一个点儿或者方块或者其他类似图标时，定义背景图background要放在<li>里。
   在<li>中设置背景图片的尺寸，地址，不重复，位置；以及文字相关的padding，无序列图标，行高等*/
</style>
</head>
    <body>
       <div id="test1">初始化CSS后，写li，并利用背景图片，来完成li小图标的效果，且达到个浏览器兼容</div>
       <ul class="icon1">
           <li>1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
       </ul>
    </body>
</html>

第二种情况

/*当标题前的图标是很长的一列并标有连续的1、2、3、4……的图片而不是单独的一个点或者类似图标时，在定义背景图background要定义在<ul>里。
记住要定义属性宽高，背景图片的地址和位置，图片不重复等。
然后在<li>中定义文字的相关部分，如内边距padding,行高line-height,无序列号样式list-style-type,字体大小等*/

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>第36课完成li小图标的效果2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
<style type="text/css">
       *{
       margin: 0px;
       padding: 0px;
   }
   li{
       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;
   }
   /*当标题前的图标是很长的一列并标有连续的1、2、3、4……的图片而不是单独的一个点或者类似图标时，在定义背景图background要定义在<ul>里。
   记住要定义属性宽高，背景图片的地址和位置，图片不重复等。
   然后在<li>中定义文字的相关部分，如内边距padding,行高line-height,无序列号样式list-style-type,字体大小等*/
</style>
</head>
    <body>
       <div id="test1">初始化CSS后，写li，并利用背景图片，来完成li小图标的效果，且达到个浏览器兼容</div>
       <ul class="icon1">
           <li>1、春</li>
           <li>2、夏</li>
           <li>3、秋</li>
           <li>4、冬</li>
       </ul>
    </body>
</html>

巴特西

【CSS学习笔记】初始化CSS后，写li，并利用背景图片，来完成li小图标的效果，且达到个浏览器兼容

最新文章

热门文章