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

【九月打卡】第19天 javascript(子菜单背景图片内容1)

1.课程名称:子菜单结构与样式


课程章节: javascript(子菜单背景图片)


2.课程内容:

        我们需要在子菜单的背景添加内容

        我们在inner-box里面再添加一个容器 sub-inner-box

        https://img1.sycdn.imooc.com/632dc3bc0001427208570344.jpg

        里面再写入一个容器

        div class =title 用来添加文字内容

        

        写入css样式

        .sub-inner-box

        width 652

        左边距 40 px

        https://img3.sycdn.imooc.com/632dc5a600015c7510690409.jpg


        添加设置title文字样式

        https://img1.sycdn.imooc.com/632dc5ec00018e6810420782.jpg

        颜色

        线高

        右中下边

        字体加粗

        效果

        https://img1.sycdn.imooc.com/632dcad80001cd7913630104.jpg

        


            在添加一个容器

            div sub-row

            用来放置大内容

            https://img3.sycdn.imooc.com/632dcb3e000189ad11620858.jpg

            

          然后添加css样式

            .bold 设置字体加粗

        https://img1.sycdn.imooc.com/632dce400001ca3207660440.jpg

        

          https://img1.sycdn.imooc.com/632dceff00013a4206050444.jpg  

            blod mr10 css 设置 右边距 10px

        https://img1.sycdn.imooc.com/632dcf4c0001471a04000132.jpg

        

            /  左右边距也要设置

https://img4.sycdn.imooc.com/632dcf730001ba3005840399.jpg

https://img1.sycdn.imooc.com/632dcf7b0001d15105400138.jpg

            

            span 里面得 sub-row 设置右边距25px

            .

            https://img3.sycdn.imooc.com/632dcfaa0001d4d405580717.jpg


        添加测试内容

        https://img3.sycdn.imooc.com/632dcfca00014a9a10230759.jpg

        

        效果:

        https://img4.sycdn.imooc.com/632dcfdd0001479915930660.jpg

        完美!!O(∩_∩)O

        

        三:本节重点就是理解div容器!!

        

点击查看更多内容
TA 点赞

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

评论

作者其他优质文章

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

100积分直接送

付费专栏免费学

大额优惠券免费领

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

举报

0/150
提交
取消