仿php中文网移动端实战-前端第九期线上班

仿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;
}