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

编程练习

小伙伴们,根据所学知识,请为导航菜单大类设置右箭头

效果图:

图片素材:

图片引用地址:http://img1.sycdn.imooc.com//5411027300014f0200220030.jpg

温馨提示:完成任务后,请验证是否与实践描述效果一致,如一致,恭喜您,你已经掌握此技能。

任务

1. 为每个大类的CSS样式设置背景:

提示:设置1.png为背景,靠右,且不重复。

2. 当鼠标移到大类时,设置背景为空。

提示:设置hover 时背景为空。

?不会了怎么办

参考代码

 .topmenu li

        {

            height: 30px;

            line-height: 30px;

            font-size: 11pt;

            list-style-type: none;

            text-align: left;

            padding-left: 8px;

            z-index: 3;         

            background-image: url(1.png);

           background-repeat: no-repeat;

           background-position: right;

        }

       .topmenu li:hover

        { background-image: none;  }

||
1
<!DOCTYPE html
    PUBLIC "
    -//W3C//DTD
    XHTML 1.0
    Transitiona
    l//EN"
    "http://www
    .w3.org/TR
    /xhtml1/DTD
    /xhtml1
    -transition
    al.dtd">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

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

收藏课程后,能更快找到我哦~

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

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

举报

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

最赞回答 / Fishzz
你把三角图片写在了<a>标签了.应该写在li标签

最新回答 / ChenweiSmile
可以写:background-image:url(http://img.mukewang.com/5411027300014f0200220030.jpg); 或者写成:background-image:url('http://img.mukewang.com/5411027300014f0200220030.jpg');都可以

已采纳回答 / Lanierlio_xuan
z-index设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面,像之后的二级目录的z-index就设置为4了

已采纳回答 / 良辰瑾空人心
a是inline标签 没有宽度和高度。li有高和宽 所以背景图片加在li中 a是文字内容 宽度是随文字大小而改变的

最新回答 / hznn
把左填充 padding-left: 20px;去掉,把text-align: left;改成文字居中text-align: center;

最新回答 / qq_最美不过初相遇厌倦人心_0
background:url(http://img.mukewang.com/5411027300014f0200220030.jpg) no-repeat;        background-position:right;        } .topmenu li:hover        {                    /* 任务二 */           background:none;

+ 我来回答 回答最高可+2积分

+ 我来回答 回答最高可+2积分

最新回答 / qq_最美不过初相遇厌倦人心_0
background:url(http://img.mukewang.com/5411027300014f0200220030.jpg) no-repeat;        background-position:right;        } .topmenu li:hover        {                    /* 任务二 */           background:none;
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言