a与雪碧图在导航处的使用

实现效果为鼠标未放上之前为默认颜色，放上之后变成可以选中的红色。
选中前的效果：

选中后的效果：

设置的HTML源代码为：

设置未选中前的CSS代码：

设置选中前的a颜色以及div中的雪碧图类型，还有就是设置div的display为inline-block实现div与字在一行显示。

设置选中后的CSS代码：

选中后将a的颜色改变，以及雪碧图位置改变，即实现上述效果。

附：雪碧图

a与雪碧图在导航处的使用相关推荐

【夯实基础--CSS】=＞高级技巧（雪碧图/滑动门/CSS三角形/字体图标(iconfont)等）
CSS高级技巧 CSS用户界面样式所谓的界面样式, 就是更改一些用户操作样式, 比如更改用户的鼠标样式, 表单轮廓等.但是比如滚动条的样式改动受到了很多浏览器的抵制,因此我们就放弃了. 防止表单域 ...
前端工程师实战17：详解CSS背景图片、雪碧图
大家好,全套HTML和CSS入门与实战课程正在我的专栏<HTML与CSS入门与进阶>更新中!按知识点循序渐进,按照顺序读下来绝对比搜索网上教程更加紧凑!内容通俗易懂,图文并茂,欢迎订阅! ...
PS的安装、背景、背景练习、雪碧图/精灵图、线性渐变、径向渐变、电影卡片练习——06fontbackground
目录一.PS的安装二.背景(background-color.background-image. background-repeat.background-position.background- ...
前端基础入门之背景background-image 、雪碧图与渐变
文章目录背景 1. PS 的基本设置 2. 背景练习 1:线性渐变效果的背景图练习 2:按钮点击效果雪碧图与渐变 3. 雪碧图 4. 线性渐变 5. 径向渐变背景 1. PS 的基本设置工 ...
CSS 关于雪碧图预处理和后处理方案的讨论
广告:SF 里弄了个 CSS 小圈子,欢迎一起来讨论问题前端小图标处理方案众多,本文主要介绍基于雪碧图的处理方案,分析雪碧图的预处理和后处理模式的得与失,以及在项目中通常会遇到的问题以及解决方案.其 ...
教你玩转CSS 精灵图/雪碧图
目录精灵图/雪碧图图像拼合 - 简单实例图像拼合 - 创建一个导航列表图像拼合s - 悬停效果精灵图/雪碧图精灵图/雪碧图就是图像拼合也就是单个图像的集合. 有许多图像的网页可能需要很长 ...
CSS中背景颜色、背景图片、渐变色、背景定位、精灵图（雪碧图）介绍
背景background: 背景可以设置为颜色和图片,设置为图片时,可以对图片继续设置. background-color:设置背景颜色: 其颜色的取值方式前面提到过,和color的取值一样,但是默认 ...
【HTML+CSS】(2)CSS Sprite雪碧图
1. 雪碧图的使用场景 (1). 静态图片.不随用户信息的变化而变化 (2). 小图片.图片容量比較小 (3). 载入量比較大一些大图不建议拼成雪碧图,比如淘宝站点的导航图片都是使用的雪碧图. 2. ...
前端开发工具介绍----合成雪碧图工具（css sprite）
合成雪碧图Sprite工具 1.国外的在线合成工具:http://csssprites.com/ 选择需要合并的文件----设置option选项(包括:元素的间距,排列方式,背景颜色,边框)----- ...
雪碧图PHP,Webpack中雪碧图插件使用详解
背景在开发过程中,我们需要用到很多图标,这些图标的大小不是很大,但是每次需要向服务器发送请求,从而加重服务器的负担,尤其是当网站处于高访问量的情况下或网络不稳定的时候,服务器性能会明显下降.这种情况 ...

a与雪碧图在导航处的使用

a与雪碧图在导航处的使用

设置的HTML源代码为：

设置未选中前的CSS代码：

设置选中后的CSS代码：

a与雪碧图在导航处的使用相关推荐

最新文章

热门文章