章节
问答
课签
笔记
评论
占位
占位

编程练习

小伙伴们，请在上一编程练习题的基本上，完成立css sprit雪碧图的使用。

效果图:

雪碧图素材:

http://img1.sycdn.imooc.com//539a950e00015ba500710200.jpg

注意:该图片的引用，请使用提供的链接。

 

任务

一、完成列表的结构后开始为列表中li i添加雪碧图样式

提示:
  1.首先为li添加不同的class，因为他们的background position值是不同的
  2.根据li上添加的class，书写响应的样式
  3.注意position的值为负数，因为雪碧图使用的坐标系是第四象限

说明: 第 55 行代码注释。

?不会了怎么办

||
1
2
<html>
<head>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证，完成请求

由于请求次数过多，请先验证，完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后，能更快找到我哦～

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后，及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

为什么我不能用class选择器更改background-position属性呢

最新回答 / 慕雪5316597
.cat_1{background-position: 0 0;}改成.cat_1 i{background-position: 0 0;}图是放在i下面的不是cat_1
2 回答 1803 浏览
2018-11-07

谁能告诉我为什么引用雪碧图的位置不同，效果也不同

最新回答 / 梦雨曦
css优先级问题   .cat ul li i 优先级比 .cat-3 i 要高把它的样式给覆盖了
3 回答 1905 浏览
2018-05-27

请帮我看看为什么i标签全部显示的是小衣服

最新回答 / 梦雨曦
<li calss="cat-9"><i></i><h3>婴儿用品</h3></li>这里单词写错啦  class 写成 calss了
2 回答 1719 浏览
2018-05-27

和视频里面的代码有出入

最新回答 / sunnight
好的 ，谢谢
2 回答 1426 浏览
2016-12-28

不能理解，是书写错误，还是理解错误？

最新回答 / 风飘叶摇
这里i元素是行内元素，以后自己做可能会用别的标签，display:inline这个就有作用了.然后行内元素也是可以浮动的，浮动之后就行内元素会自动转化为块元素，可以设置高度和宽度。
4 回答 1194 浏览
2017-04-09

这里.cat和li为什么要设置相对定位呢relative

已采纳回答 / echo_kinchao
不设相对定位就无法展示自己想要的布局
2 回答 1194 浏览
2022-03-29

这代码有问题吗？为什么雪碧图没有完整的出来？

已采纳回答 / qq_安伊偌拉_0
backgroung-position写错了，应该是background-position
1 回答 1409 浏览
2016-08-23

建议：技巧是好的，能结合 margin属性值为负数的情况一起讲解比较好，以第四象限为基准尽快能达到效果，却是不容易理解。还有那个width:30px后面的分号。imooc发展太快，细小的错误好多，希望继续改进吖。

已采纳回答 / i爱慕客
建议直接发表在评论区就可以了。
2 回答 1095 浏览
2022-07-22

雪碧图不显示

已采纳回答 / 李晓健
<...code...>上面一个不对，因为有float 所以 display: inline; 就没什么用了。
3 回答 1902 浏览
2016-08-23

为什么要设置这两属性

已采纳回答 / wlf1112
CSS中的position属性值为relative时，z-index取值方可生效，此属性参数值越大，则被层叠在最上面。
2 回答 998 浏览
2016-08-23

i标签为什么要设置display:inline和 float:left属性

最新回答 / Mr_bigshot
设置了float:left才能设置宽高
2 回答 2337 浏览
2016-08-23

关于象限的正负问题

最赞回答 / pardon110
背景图片设置，canvas画布。其原点是左上角顶点，向右的x方向为正,向下的y方向亦为正。与数学象限里的意义有本质的不同，不要搞混了。
2 回答 3891 浏览
2016-12-21

我哪里错了呢？显示的时候全部是小衣服，其他的图标都不出现

最新回答 / karawoo
我已经解决了谢谢!<html><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/><style>blockquote, body, button, dd, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, hr, input, legend, li, ol, p, pre, td, textarea, th, ul{ma...
1 回答 1226 浏览
2016-08-23

刷不出雪碧图啊

已采纳回答 / 漠北哥哥
一般可以用相对路径，看看和你的html文件的相对位置，在同一个文件夹下可以直接引用，不同文件夹就需要“../图片文件夹/图片名字.jpg”
2 回答 1188 浏览
2016-08-23

雪碧图位置没有发生偏移，不明为何。（未使用老师给的模板，只添加了自己认为必要的元素）

已采纳回答 / pardon110
与选择器的优先级有关。一般而言，选择器指向的越准确，它的优先级就越高。分析下面的优先级代码：<...code...><...code...>而浏览器渲染模板的逻辑，选择器指向对象相同的情况下，只会执行优先级值高的，所以你可以这样写就行了　将<...code...>改为<...code...>或者这样　将所有形如这样的<...code...>改为这样就可以了<...code...>
1 回答 1390 浏览
2016-08-23
全部 我要发布
最热 最新
只看我的

推荐课程

推荐路线系统化学习，打造阶梯学习模式

相关课程

手记推荐

更多

本次提问将花费2个积分

你的积分不足，无法发表

为什么扣积分？
确认 取消

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分？
确认 取消

账号登录 验证码登录

遇到问题
忘记密码

登录即同意慕课网《隐私政策》
代码语言