为了账号安全,请及时绑定邮箱和手机立即绑定

【九月打卡】第16天 javascript(导航菜单及内容菜单)

1.课程名称:javascript 导航菜单及内容菜单


课程章节:导航菜单得结构


2.课程内容:

            首先添加一个div容器模板

    https://img1.sycdn.imooc.com//632993be0001c3a408880182.jpg

    然后再写入css样式

    .menu-box

    宽度 高度 绝对定位 边距,背景颜色 透明度以及优先级

.{
    ::: : : :(): :

    

https://img1.sycdn.imooc.com//632994970001532213330499.jpg

    https://img1.sycdn.imooc.com//6329b934000145a205970638.jpg

    然后设置内容菜单div,

    https://img1.sycdn.imooc.com//6329ba970001a46108770513.jpg

    

    设置它的css,基本上跟上面那一个基本一样

    .menu-content

    weight =244

    heigth = 254

    position =absolute   //绝对定位

    left = 0

    top = 0

    z-index = 2

    padding-top = 6px    填充高度6px


    https://img1.sycdn.imooc.com//6329c02d0001ef2913050707.jpg


    加入内容 在index.html   在menu-content下面添加

    添加一个容器,加上超链接

    <div class=menu-item>

    <a href="">

        <span>手机 配件</span> 

            <i>&#xe665</i>

    </a>


</div>

    https://img1.sycdn.imooc.com//6329c3b80001bdf111790675.jpg

    完成:

    https://img1.sycdn.imooc.com//6329c3ee00012cb315750692.jpg


    下一节继续完善 O(∩_∩)O















点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
数据库工程师
手记
粉丝
5
获赞与收藏
0

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消