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

【学习打卡】第9天 商品展示页脚区

一 课程名称


课程名称:前端油画商城案例


课程章节:商品展示页脚区


二 课程内容


 添加商品展示的页脚区


  1. 写入div

    https://img4.sycdn.imooc.com/62f88d050001906312660843.jpg

    https://img1.sycdn.imooc.com/62f88d720001cad216830681.jpg

    2. 开始写入css样式代码

    给.footer整个页眉区域 宽度100% 高度60px 边距控制上下,给予60px 左右设置自动

    https://img3.sycdn.imooc.com/62f8a63600015a9909620706.jpg

    高度 间距就出来了

    https://img4.sycdn.imooc.com/62f8a6550001472814880659.jpg

    添加上划线 1px 固定的 颜色是灰色

    https://img1.sycdn.imooc.com/62f8a8a00001803a06140244.jpg

    https://img2.sycdn.imooc.com/62f8a8c30001a2ba16690210.jpg

    3.然后处理footer里的文字段咯 

    https://img4.sycdn.imooc.com/62f8a9ee000119b314140884.jpg

    text-align:center  将文字居中

    margin-top:30px  

    https://img1.sycdn.imooc.com/62f8ae0a0001ca5714820780.jpg

    

    4. 文字前头加上颜色 ,给需要的文字加上span

    https://img1.sycdn.imooc.com/62f8af96000154b008160454.jpg

    css直接给span加上颜色代码就可以了

    .footer p span{ color: blueviolet}

    https://img1.sycdn.imooc.com//62f8b5e8000120a908040867.jpg

    最终效果

    https://img1.sycdn.imooc.com//62f8b63d00010eaf15790741.jpg

    

  

三 本章难点

    本小节基本是全章最简单的一小节,没难点,思路清晰的话一下就做出来了

    


    

    

    


点击查看更多内容
TA 点赞

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

评论

作者其他优质文章

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

100积分直接送

付费专栏免费学

大额优惠券免费领

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

举报

0/150
提交
取消