驴友网图标区域页面制作——如何进行上图标下文字的块布局

本章节对应7-4的课程 1.首先在git线上新创建一个分支 index-icons 2.将线上分支拿到本地，然后在git bash切换到该分支上进行开发

git pull git checkout index-icons

注意：进行下面这种设置的时候，一定记得让heght：0，不然在变化时，高度不会是页面宽度的25%，

.icon float left background red width 25% height 0 padding-bottom 25%

注意：在div+css中，如何使得自己的图片能够自适应div的大小，只要使得img的width和height为100%，即可，如果要求一个最大的宽高度，则需要在这个img上style=“max-height:图片高度; max-width:图片宽度”

如何进行上图标下文字的布局

1.自己的处理方法

//html <div class="icon"> <img class="icon-img" src="@/assets/images/icon-img/jingdian.png" alt=""> <p>景点门票</p> </div> //.css .icon float left //这个属性是自身项目需要，可按照自己的实际进行增加和删除 background red width 25% height 0 padding-bottom 25% .icon-img width 60% padding-top 5% padding-bottom 5%

2.教程中的方法 在本例中，需要图片和文字一起自适应外边框的大小。

//html <div class="icon"> <div class="icon-img"> <img class="icon-img-content" src="@/assets/images/icon-img/jingdian.png" alt=""> </div> <p>景点门票</p> </div> //.css .icon position relative float left background red width 25% height 0 padding-bottom 25% .icon-img position absolute top 0 left 0 right 0 bottom .44rem background blue .icon-img-content height 100%