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. scrapy 伪装代理和fake_userAgent的使用

    伪装浏览器代理 在爬取网页是有些服务器对请求过滤的不是很高可以不用ip来伪装请求直接将自己的浏览器信息给伪装也是可以的. 第一中方法: 1.在setting.py文件中加入以下内容,这是一些浏览器的头 ...

  2. c++调用fortran程序中遇到的问题

    一.C++动态调用Fortran DLL (1)创建FORTRAN DLL工程,生成forsubs.dll文件供调用. ! forsubs.f90 ! ! FUNCTIONS/SUBROUTINES ...

  3. 关于rs编码的理解

    1,rs编码首先是线性循环编码,所谓线性循环编码就是说编码后的码组T(x)左移或右移都必然还是有限组码组中的一组,并且T(X)码组能够被g(x)整除,g(x)为生成多项式. 2,由信息码m(x)得到T ...

  4. spss v21.0 使用笔记

    spss v21.0 使用笔记 有问题,戳官方帮助文档 神经网络 分析-神经网络-多层感知机 变量. 分析-神经网络-多层感知机-变量 预测变量可指定为因子(分类)或协变量(刻度). 在因变量框输入预 ...

  5. requirejs 到底有什么好处?

    无论是在backbone时代,还是angularjs 时代 我都用过requirejs, 后来慢慢全都去掉了, 因为在前端开发requirejs 感觉没有带来任何实质性的好处. 从几个方面说说我的感受 ...

  6. 【转载】最短路径—Dijkstra算法和Floyd算法

    注意:以下代码 只是描述思路,没有测试过!! Dijkstra算法 1.定义概览 Dijkstra(迪杰斯特拉)算法是典型的单源最短路径算法,用于计算一个节点到其他所有节点的最短路径.主要特点是以起始 ...

  7. (新)解决php版本ueditor中动态配置图片URL前缀（imageurlprefix）的方法

    昨天晚上写了一篇文章<解决ueditor中没法动态配置imageurlprefix的方法>,通过修改js获取当前域名的方法,配置imageurlprefix值: 发现还是不够灵活,因为域名 ...

  8. 【备忘：待完善】nsq集群初体验

    本机的一个节点及监控与管理后台 虚拟机中的一个节点 命令: [root@vm-vagrant nsq]# nsqd --lookupd-tcp-address=192.168.23.150:4160 ...

  9. MFC对话框的Edit控件实现响应Ctrl+A全选，并实现自动/手动换行+滚动条

    首先是在Properties中设置控件属性的问题,首先必须得将Mutilines属性设为true,才能支持多行显示. 手动换行(按Enter键换行):将Want Return属性设为true 自动换行 ...

  10. cf Double Happiness(判断是否为素数且为4k+1型)

    2790. Double Happiness   time limit per test 3 seconds memory limit per test 128 megabytes input sta ...