【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小图标的效果,且达到个浏览器兼容的更多相关文章
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- 【CSS学习笔记】CSS选择器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- CSS学习笔记02 CSS选择器
1.通配符选择器 通配符选择器用“*"号表示,是所有选择器中作用范围最广的,能匹配页面中所有的元素 /*设置当前页面中所有标签的颜色为红色*/ * { color: red; } 2.标签选 ...
- CSS学习笔记04 CSS文字排版常用属性
字体样式属性 font-size:字号大小 font-size属性用于设置字号,该属性的值可以使用相对长度单位,也可以使用绝对长度单位.其中,相对长度单位比较常用,推荐使用像素单位px,绝对长度单位使 ...
- DIV+CSS学习笔记(CSS)
css基础知识: css样式表的定义 css:(Cascading Style Sheets)层叠样式表: 分类及位置:内部样式-head区域style标签里面 外部样式-link调用 内联样式-标签 ...
- HTML+CSS学习笔记 (12) - CSS布局模型
标签:HTML+CSS css布局模型 清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是 ...
- CSS学习笔记11 CSS背景
background-color:背景色 前面我们经常用background-color这个属性来设置元素的背景色,例如下面这条css可将段落的背景色设置为灰色 p {background-color ...
- 【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 ...
- Head First Html and CSS学习笔记之CSS
第七章 CSS入门 元素的许多属性都可以设置样式,太多了,记不住,可以参考<CSS Pocket Reference>. 外部样式表,<link type = "text/ ...
- HTML+CSS学习笔记 (15) - css样式设置小技巧
水平居中设置-行内元素 我们在实际工作中常会遇到需要设置水平居中场景,今天我们就来看看怎么设置水平居中的. 如果被设置元素为文本.图片等行内元素时,水平居中是通过给父元素设置 text-align:c ...
随机推荐
- LeetCode之Max Points on a Line Total
1.问题描述 Given n points on a 2D plane, find the maximum number of points that lie on the same straight ...
- jquery-validate的用法
默认校验规则 (1)required:true 必输字段(2)remote:"check.php" 使用ajax方法调用check.p ...
- Hypeiron Planning/Essbase修改规划类型名称
1.修改planning关系库 1.1--修改Plan_type,例如将type_name “Plan1”修改为”Plan1ts”,提交 SELECT * FROM hsp_plan_type FOR ...
- awk学习点滴
1,常量 ARGC:命令行参数个数 包括awk本身命令,但awk的自带option不算在内. ARGV:命令行参数数组 ARGV[0]是awk本身,其他依次提取就好. $ awk -F ' ' 'BE ...
- 13个不可不知的ASP.NET MVC扩展点
13个不可不知的ASP.NET MVC扩展点 ASP.NET MVC设计的主要原则之一是可扩展性.处理管线(processing pipeline)上的所有(或大多数)东西都是可替换的.因此,如果您不 ...
- 【译】Objectively Speaking 2: A Crash Course in Objective-C for iOS 6
In this Objective-C tutorial, you will create a simple movie quotes quiz app. Along the way, you’ll ...
- 对于vijos11.2模拟赛
特意起了个傻逼标题,只是想提醒一下自己以后不要犯逗(所以应该没有什么神犇点进来吧?) T1,T3 当场写的时候就觉得是不可写的,看了题解之后还是觉得不可写,人弱没办法.到了这个时候也懒得管这么难的东西 ...
- 逻辑回归模型(Logistic Regression, LR)基础
逻辑回归模型(Logistic Regression, LR)基础 逻辑回归(Logistic Regression, LR)模型其实仅在线性回归的基础上,套用了一个逻辑函数,但也就由于这个逻辑函 ...
- Controller 和 Action (2)
Controller 和 Action (2) 继上一篇文章之后,本文将介绍 Controller 和 Action 的一些较高级特性,包括 Controller Factory.Action Inv ...
- IIS Express添加MIME映射
最近在使用fontawesome字体时,在浏览器控制台看到 fontawesome-webfont.woff2?v=4.3.0 无法访问的错误,检查了一下文件确实存在并且路径也对,这就奇怪了! 在控制 ...