仿php中文网移动端
实例
<!-- 最新更新--> <article class="newupdate"> <h3>最新更新</h3> <section> <div> <a href=""><img src="static/images/gxnr1.jpg" alt=""></a> <span> <a href="">2019python自学视频</a> <p>本课程适合想从零开始学习Python编程语言的开发人员</p> <span><i>初级</i>2529次播放</span> </span> </div> <div> <a href=""><img src="static/images/gxnr2.jpg" alt=""></a> <span> <a href="">PHP开发免费公益直播</a> <p>主讲:php中文网-朱老师(Peter Zhu)</p> <span><i>初级</i>1820次播放</span> </span> </div> <div> <a href=""><img src="static/images/gxnr3.jpg" alt=""></a> <span> <a href="">从零开始到web响应式布局</a> <p>重点了解HTML、CSS、web布局前端核心技术</p> <span><i>初级</i>3455次播放</span> </span> </div> </section> </article> </main> <footer> <a href=""><img src="static/font-icon/zhuye.png" alt=""> <span>首页</span> </a> <a href=""> <img src="static/font-icon/video.png" alt=""> <span>视频</span> </a> <a href=""> <img src="static/font-icon/luntan.png" alt=""> <span>社区</span> </a> <a href=""> <img src="static/font-icon/geren.png" alt=""> <span>我的</span> </a> </footer>
运行实例 »
点击 "运行实例" 按钮查看在线实例
1、方便起见,设置一个类.newupdate代表操作最新更新
最新更新可以 分为 “最新更新”<h3>和 <section>“课程内容”两大块( 因为没有左右分块,所以其实都是一个类型,上下分块,都放在一个section里面)
2、每个课程分为一个<div>块,与上课时一样都有a标签加载图片链接以及span标签文字部分,只不过多加了一个p段落
3、关键是与视频教程不同的是"初级"与xxx次播放的布局样式是起止两端对齐而不是紧紧接在一起,因此把最后span中i标签与xxx次播放再转成一个flex容器
然后主轴用 justify-content: space-between;仿制效果
4、底部footer仿照头部固定及基本布局设置颜色等,其他之前视频有交代,然后用 justify-content: space-around; 仿起止两边X,中间2X的间隔距离的布局效果,
实例
/*******************最新更新*********************/ main >.newupdate>section:first-of-type{ display: flex; flex-flow: row nowrap; } main > .newupdate >section:first-of-type > a{ flex: 1; margin: 5px; } main > .newupdate >section:first-of-type > a > img{ height: 90px; } main > .newupdate >section:last-of-type { display: flex; flex-flow: column nowrap; } /*设置垂直排列的最新更新*/ main > .newupdate >section:first-of-type div{ background-color: #fff; margin: 5px; display: flex; } main > .newupdate >section:first-of-type div img{ width: 350px; height: 90px; } main > .newupdate >section:first-of-type>div>span { display: flex; flex-flow: column nowrap; flex: 1; /*如果不加,flex: 1; 会有剩余空间影响,最后播放次数的无法右对齐*/ margin-top: 5px; padding-left: 10px; } main > .newupdate >section:first-of-type > div > span >span { display: flex; flex-flow: row nowrap; flex: 1; justify-content: space-between; } main > .newupdate >section:first-of-type>div>span i{ font-style: normal; background-color: #333333; color: white; border-radius: 4px; font-size:smaller ; } /*****************底部区域*******************/ footer{ position:fixed; bottom: 0; width: 100%; height: 50px; background-color: lightgrey; color: white; min-width: 320px; max-width: 768px; display: flex; justify-content: space-around; align-items: center; } footer img{ width: 26px; height: 26px; margin: 5px; } footer a { display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; color: #444444; font-size: smaller; }
运行实例 »
点击 "运行实例" 按钮查看在线实例