1、效果图

2、html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> 欢迎来到梦之都 </title>
<!--这是引入css文件的外联方式-->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<ul class="Sprites">
<li><span class="a1"></span><a href="#">WORD文章标题</a></li>
<li><span class="a2"></span><a href="#">PPT文章标题</a></li>
<li><span class="a3"></span><a href="#">EXCEL文章标题</a></li>
<li><span class="a4"></span><a href="#">PDF文章标题</a></li>
<li><span class="a5"></span><a href="#">文本文章标题</a></li> </ul>
</body>
</html>

3、css代码

/**/
ul.Sprites{
margin:0 auto;/*这个指的是上下边界为0,左右根据宽度自适应,即所谓的居中*/
border:1px solid #F00;/*边框宽度为一像素,边框为实线,边框的颜色*/
width:300px; /*边框宽度为300像素*/
padding:10px;/*内边距*/
}
ul.Sprites li{
height:24px; /*div的高度*/
font-size:14px;/*字体大小*/
line-height:24px;/*行高*/
text-align:left; /*左对齐*/
overflow:hidden;/*滚动条隐藏*/
list-style-type:none;/*这是把我们li上面的点点去掉*/
}
ul.Sprites li span{
float:left; /*左浮动*/
width:17px;/*内联元素span的宽度*/
padding-top:5px;/*距离上方的内边距*/
height:17px; /*高度*/
overflow:hidden;/*滚动条隐藏*/
background:url(ico.png) no-repeat;/*图片不平铺*/
}
ul.Sprites li a{
padding-left:5px;/*内边距是5像素*/
}
ul.Sprites li span.a1{ background-position: -62px -32px} /*说白了就是每个span中有这么一张图片,x和y可以确定唯一的一个位置,通过这个位置把它显示到相应的位置*/
ul.Sprites li span.a2{ background-position: -86px -32px} /**/
ul.Sprites li span.a3{ background-position: -110px -32px} /**/
ul.Sprites li span.a4{ background-position: -133px -32px} /**/
ul.Sprites li span.a5{ background-position: -158px -32px} /**/

  

第二天:让我们一起来玩玩css精灵(css sprites)的更多相关文章

  1. css精灵

    ○ css 精灵(Sprites)技术利用photoshop将图片整合,然后用background-images,background-position,background-repeat技术,对图片 ...

  2. 前端CSS-font属性,超链接的美化,css精灵,background综合属性

    前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...

  3. html+css第八篇滑动门和可爱的css精灵

    滑动门: 滑动门并不是一项全新的技术,它是利用背景图像的可层叠性,并允许他们在彼此之上进行滑动,以创造一些特殊的效果. CSS精灵 CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处 ...

  4. CSS3与页面布局学习笔记(五)——Web Font与CSS Sprites(又称CSS精灵、雪碧图)技术

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  5. css精灵动画

    精灵动画的实现 CSS Sprites在国内很多人叫CSS精灵,其实这个技术不新鲜,原理就是:靠不断的切换图片让人感觉视觉上不断在变化,例如gif动画之类的效果 那么前端如何实现精灵效果? 传统的就是 ...

  6. CSS:CSS定位和浮动

    CSS2.1规定了3种定位方案 1.Normal flow:普通流(相对定位 position relative.静态定位 position static) 普通流(normal flow,国内有人翻 ...

  7. 按钮制作技巧(css精灵效果)-高级版

    [转自己以前的文章] 无论用什么语言,大家敲程序的时候多多少少都会遇到做按钮的时候.今天分享一个之前学做按钮的技巧,有人叫做css精灵效果. 通常做按钮的思路都用附图中的第一种:两张图片交互的形式,让 ...

  8. CSS样式----CSS的继承性和层叠性(图文详解)

    CSS的继承性 我们来看下面这样的代码,来引入继承性: 上方代码中,我们给div标签增加红色属性,却发现,div里的每一个子标签<p>也增加了红色属性.于是我们得到这样的结论: 有一些属性 ...

  9. CSS样式----CSS样式表的继承性和层叠性(图文详解)

    本文最初于2017-07-29发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 本文重点 CSS的继承性 CSS的层叠性 计算权重 ...

随机推荐

  1. php 中的 Output Control 函数

    先看一个简单的例子 <?php ob_start(); echo 111; ob_clean(); echo 222; ob_start()开启ob缓存,然后111放进了ob缓存, 再调用ob_ ...

  2. Java8新特性——StreamAPI(一)

    1. 流的基本概念 1.1 什么是流? 流是Java8引入的全新概念,它用来处理集合中的数据,暂且可以把它理解为一种高级集合. 众所周知,集合操作非常麻烦,若要对集合进行筛选.投影,需要写大量的代码, ...

  3. MySQL 根据身份证查找年龄段

    SELECT       idcard,YEAR (NOW()) - substring(idcard, 7, 4) as nFROM es_members where idcard >0 HA ...

  4. bat总结1

    获取当前目录 @echo offecho 当前盘符:%~d0echo 当前盘符和路径:%~dp0echo 当前盘符和路径的短文件名格式:%~sdp0echo 当前批处理全路径:%~f0echo 当前C ...

  5. 【DUBBO】dubbo的Cluster接口

    Directory中的多个Invoker伪装成一个Invoker, 对上层透明,包含集群的容错机制 Cluster可以看做是工厂类, 将目录directory下的invoker合并成一个统一的Invo ...

  6. vault key 管理工具

    Vault is a tool for securely accessing secrets. A secret is anything that you want to tightly contro ...

  7. C#机器学习插件 ---- AForge.NET

    目录 简介 主要架构 特点 学习之旅 简介 AForge.NET是一个专门为开发者和研究者基于C#框架设计的,这个框架提供了不同的类库和关于类库的资源,还有很多应用程序例子,包括计算机视觉与人工智能, ...

  8. Oracle 块修改跟踪 (Block Change Tracking) 说明

    Block ChangeTracking 是Oracle 10g里推出的特性.官网对Block change tracking 的定义如下: Adatabase option that causes ...

  9. Java API 操作Zookeeper

    一.依赖 <dependency> <groupId>org.apache.zookeeper</groupId> <artifactId>zookee ...

  10. Openfire源码使用Install4j打包

    https://www.ej-technologies.com/download/install4j/files 下载并安装install4jhttps://www.ej-technologies.c ...