第一种情况

/*当标题前的图标时单独的一个点儿或者方块或者其他类似图标时，定义背景图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小图标的效果，且达到个浏览器兼容的更多相关文章

  1. HTML+CSS学习笔记 (7) - CSS样式基本知识

    HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...

  2. 【CSS学习笔记】CSS选择器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  3. CSS学习笔记02 CSS选择器

    1.通配符选择器 通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素 /*设置当前页面中所有标签的颜色为红色*/ * { color: red; } 2.标签选 ...

  4. CSS学习笔记04 CSS文字排版常用属性

    字体样式属性 font-size:字号大小 font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位.其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使 ...

  5. DIV+CSS学习笔记（CSS）

    css基础知识: css样式表的定义 css:(Cascading Style Sheets)层叠样式表: 分类及位置:内部样式-head区域style标签里面 外部样式-link调用 内联样式-标签 ...

  6. HTML+CSS学习笔记 (12) - CSS布局模型

    标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...

  7. CSS学习笔记11 CSS背景

    background-color:背景色 前面我们经常用background-color这个属性来设置元素的背景色,例如下面这条css可将段落的背景色设置为灰色 p {background-color ...

  8. 【CSS学习笔记】CSS初始化

    腾讯QQ官网(http://www.qq.com)样式初始化 body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input ...

  9. Head First Html and CSS学习笔记之CSS

    第七章 CSS入门 元素的许多属性都可以设置样式,太多了,记不住,可以参考<CSS Pocket Reference>. 外部样式表,<link type = "text/ ...

  10. HTML+CSS学习笔记 (15) - css样式设置小技巧

    水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的. 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:c ...

随机推荐

  1. MVC5模板部署到mono

    VS2013中的MVC5模板部署到mono上的艰辛历程 2014-10-27 09:30 by FuzhePan, 3954 阅读, 46 评论, 收藏, 编辑 部署环境:CentOS7 + Mono ...

  2. JSON数据转换方法 parse()和stringify()

    将对象转换成JSON格式的文本数据 var str = JSON.stringify(data); 将对象转换成JSON对象的方法 var data = JSON.parse(str);

  3. Android Fragement学习笔记(三)----PreferenceFragment使用

    我相信每个人都Perference大家都比较熟悉,这就是我们常说的偏好,首选项设置,一些数据可以保存.例如,一些元件的,我们使用上次.希望下次启动后仍然生效,烦.一般这个时候我们便会使用perfere ...

  4. CentOS下JAVA WEB 环境搭建

    首先介绍下我的软件环境.虚拟机Vmware9.0(已经汉化),CentOS6.4(选择安装语言为简体中文),xshell4.0(强大的安全终端模拟软件),xftp4.0(FTP工具). 方便大家环境搭 ...

  5. [QT Creator]LNK1123: 转换到 COFF 期间失败: 文件无效或损坏 。

    这个问题很恶心!网上说的原因是因为安装了多了版本的VS.在高版本的2010和2012上都会有问题,解决方法是使用visual studio 2008安装目录下的一个文件替代vs2010安装目录下的文件 ...

  6. Linux : fedora 安装 vnc server

    Linux配置VNC服务 安装VNC服务端 #yum install vnc-server 配置VNC服务参数文件 编辑vncservers文件追加如下 #vi /etc/sysconfig/vncs ...

  7. JS实现等比例缩放图片

    JS实现等比例缩放图片 2014-01-19 21:57 by 龙恩0707, 40 阅读, 0 评论, 收藏, 编辑 JS实现等比例缩放图片 有时候我们前端页面只有500×500像素的宽和高的布局, ...

  8. Binder机制，从Java到C （4. Parcel）

    1. 远程调用的数据传输 在远程的函數中,必然会需要传递一些数据,那这些数据是怎么传输的呢? 在IPC中,Proxy端的作用就是将一些参数打包,然后发送出去,下面是在Proxy端经常会遇见的调用远程方 ...

  9. 利用Bootstrap框架制作查询页面的界面

    UI设计实战篇——利用Bootstrap框架制作查询页面的界面   Bootstrap框架是一个前端UI设计的框架,它提供了统一的UI界面,简化了设计界面UI的过程(缺点是定制了界面,调整的余地不是太 ...

  10. 获取时间SQL函数语句

    1.获取时间 获取当天的数据 where  DATEDIFF (DD, 数据库中时间的字段 ,GETDATE())=0 查询24小时内的 where  DATEDIFF (HH, 数据库中时间的字段 ...