继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

土星猪
关注TA
已关注
手记 76
粉丝 5
获赞 0

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


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


2.课程内容:

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

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

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

        里面再写入一个容器

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

        

        写入css样式

        .sub-inner-box

        width 652

        左边距 40 px

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


        添加设置title文字样式

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

        颜色

        线高

        右中下边

        字体加粗

        效果

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

        


            在添加一个容器

            div sub-row

            用来放置大内容

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

            

          然后添加css样式

            .bold 设置字体加粗

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

        

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

            blod mr10 css 设置 右边距 10px

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

        

            /  左右边距也要设置

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

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

            

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

            .

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


        添加测试内容

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

        

        效果:

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

        完美!!O(∩_∩)O

        

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

        

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP