做网站用apache还是nginx,o2o最好的平台,百度爱采购怎么优化排名,织梦网站网址变了如何搬家目录
前言
效果展示
编辑 代码
思路分析 前言 上一期我们学习了弹性布局#xff0c;那么这一期我们用弹性布局来写一个小案例#xff0c;下面看代码#xff08;上一期链接htmlCSS-----弹性布局_灰勒塔德的博客-CSDN博客#xff09;
效果展示 代码
html代码那么这一期我们用弹性布局来写一个小案例下面看代码上一期链接htmlCSS-----弹性布局_灰勒塔德的博客-CSDN博客
效果展示 代码
html代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlelink relstylesheet href./index.css
/head
bodydiv classtitle我最喜欢的动漫/divdiv classboxdiv classfirstimg srchttps://p1.ssl.qhimg.com/t0115ce3cbc4015ec6a.jpg alt width380px height580px/divdiv classsecondimg srchttps://pic2.zhimg.com/v2-12739c6fd519e482491c474c5d4c555d_r.jpg?source172ae18b alt width380px height280px/divdiv classthirdimg srchttps://ts1.cn.mm.bing.net/th/id/R-C.5bb547e5904c73e0fd6797f9d84fd385?rikZArey%2blfkd7qZgriuhttp%3a%2f%2fimg1.gtimg.com%2fent%2fpics%2fhv1%2f220%2f19%2f1897%2f123357490.jpgehkp%2bq0rmM2VU56Zk8J9UED%2fkOsy06RWh5fYYO%2fuqkvj8o%3drislpidImgRawr0sres1sresct1 alterror width380px height280px/divdiv classforthimg srchttps://tse4-mm.cn.bing.net/th/id/OIP-C.6VInImvpRRAbGNLyA-O-7wHaEK?pidImgDetrs1 alt000 width380px height280px/divdiv classfifthimg srchttps://pic1.zhimg.com/v2-eba5063f7938e90321291c220ab672b7_b.jpg alt width380px height280px/div/div
/body
/html
CSS代码
.box{margin: 0 auto;display: flex;height: 600px;width: 1200px;justify-content: space-around;flex-wrap: wrap;flex-direction: column;border: 2px solid yellow;}
.title{font-size: 40px;color: blueviolet;margin-left: 40%;
}
.first{height: 580px;width: 380px;background-color: red;background-image: url();
}
.second{background-color: blue;height: 280px;width: 380px;
}
.third{background-color: rgb(0, 255, 208);height: 280px;width: 380px;
}
.forth{background-color: rgb(0, 255, 208);height: 280px;width: 380px;
}
.fifth{background-color: rgb(0, 255, 208);height: 280px;width: 380px;
}
思路分析 首先我们去创建一个大盒子box作为容器里面放入5个项目小盒子。其中容器的主轴设置为y轴然后设置为换行还有对齐方式设置为所有间隔分均分配即所有子元素拥有相同的左右(上下)间隔space-around以上就可以实现每一个项目纵向排列不会出现超出边框的问题然后就是依次放入小盒子在里面最后就是放入图片了图片均是网上资源可查阅。 好了以上就是今天的作品展示了你们会了吗我们下一期再见
每日分享一张壁纸
