Java教程

【学习打卡】第4天 banner区大图片

本文主要是介绍【学习打卡】第4天 banner区大图片，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一 课程名称


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


课程章节：页眉及banner区制作



二 课程内容

    1.重点体现banner区和页眉区域的间距，以及水平居中的关系

    2.掌握元素和元素之间的配合

    

    添加欢迎图片

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

    

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

    图片显示出来了，但是位置不太对，需要和红色图片对齐还要注意和页眉上下之间的间距

    单击菜单之后要显示在图片前面

    

    写样式改变图片左右边的距离

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

    

    效果

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

    调整完左右开始调整上下

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

    

    点击菜单后ul显示在图片前面

    

    给予绝对定位

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

    加上宽度对齐

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

    增加透明效果 和背景色 

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

    本章完成

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

三 课程难点

    元素和元素之间的配合，上下距离还是需要多练多试才能知道效果，在练习的过程中遇到了很多问题，前端并不是想象中的那么简单

    

   

    

    

这篇关于【学习打卡】第4天 banner区大图片的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航