html css精灵,CSS spirit /css精灵

利用css中的三个样式：图片、位置和重复，即background-image、background-position和background-repeat；也可以直接用background来写。

例如：background:url(nav_bg.gif) 0 0 no-repeat;　　　　background:url(nav_bg.gif) 0 －28 no-repeat;

background:url(nav_bg.gif) 0 -26 no-repeat;

#nav ul

{

list-style: none;

margin: 0px auto;

padding: 0px;

border-bottom: 3px solid #E10001;

height: 28px;

width: 360px;

}

#nav li

{

float: left;

margin-left: 2px;

}

#nav a

{

display: block;

width: 87px;

height: 28px;

line-height: 28px;

text-align: center;

color: #000000;

background: url(nav_bg.gif) 0 -28px no-repeat;

text-decoration: none;

}

#nav a:hover

{

color: #f00;

background: url(nav_bg.gif) 0 -56px no-repeat;

}

#nav a#current

{

background: url(nav_bg.gif) 0 0 no-repeat;

font-weight: bold;

color: #fff;

}

首页
入门教程
视频教程
常见问题

html css精灵,CSS spirit /css精灵相关推荐

web前端入门学习 css（7）css高级技巧（精灵图、字体图标、css三角、鼠标样式、表单轮廓线、文本框拖拽、垂直对齐、图底空白缝隙、margin负值、溢出文字省略号、文字环绕、css初始化）
文章目录精灵图为什么需要精灵图? 精灵图的使用精灵图课堂案例用精灵图拼出自己的名字字体图标字体图标的下载字体图标的引入字体图标的追加 css三角(用边框border制作) 案例:京东三 ...
html css图标怎么跟文字并排,CSS高级技巧：精灵图、字体图标、CSS三角做法、CSS用户界面样式、vertical-align属性应用、溢出文字省略号、常见布局技巧...
CSS高级技巧目录 1.精灵图使用原因:一个网页往往会有很多小的背景图片作为装饰,为了有效减少接收和发送请求的次数,提供页面加载速度,所以出现了精灵技术.核心原理就是将小图片整合到一张图里,这样浏览 ...
CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化
本篇文章为 CSS 基础系列笔记第七篇,参考黑马程序员pink老师前端入门教程其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
css图片精灵定位_DIV CSS Sprites精灵 CSS图像拼合 CSS背景贴图定位教程案例
div css sprites精灵-CSS图像拼合 CSS贴图定位网页背景素材图片拼合定位布局技术教程篇与css sprites实例篇 css sprites拼合背景图片素材实现布局效果截图一.什么 ...
html中精灵图片路径,css中精灵图是什么意思？
css中精灵图是什么意思?有什么用?下面本篇文章就来给大家介绍一下CSS 精灵图.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css中精灵图是什么意思? css精灵图(sprit ...
CSS 系列七高级技巧篇精灵图、字体图标、CSS三角、图片和文字对齐以及bug 、溢出文字省略号、CSS 初始化、常见的布局技巧
--------------------------- 精灵图 --------------------------- 1.1 为什么需要精灵图一个网页中往往会应用很多小的背景图像作为修饰,当网页中 ...
CSS animation动画效果实现精灵图、雪碧图动画，多动画应用
CSS animation动画效果实现精灵图.雪碧图动画,多动画应用素材下载分析图片动画过程图片可以分成4*6=24 小图片也就是24帧方法1 可以把每一行成一个动画,所以可以拆分4个动画方 ...
CSS（一）：CSS概述、CSS引入方式、CSS优先级、CSS代码格式、CSS属性；CSS选择器；尺寸和颜色单位、背景和文本设置
目录一.CSS 1.1 CSS概述 1.1.1 定义 1.1.2 特征 1.1.3 组织网页的两种常用方式 1.2 引入CSS的四种方式 1.2.1 Style属性方式(内联样式) 1.2.2 St ...
html css雪碧图,css常见小技巧（雪碧图）
1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 CSS雪碧即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用 ...
css sprites精灵图、css图片整合、css贴图定位案例教程
一. 什么是css sprites CSS Sprites通常被称为css精灵图,在国内也被意译为css图片整合和css贴图定位,也有人称他为雪碧图.就是将导航的背景图,按钮的背景图等有规则的合并成一 ...

html css精灵,CSS spirit /css精灵

html css精灵,CSS spirit /css精灵相关推荐

最新文章

热门文章