博客列表 >仿php中文网移动端实战-前端第九期线上班

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

emagic
emagic原创
2019年11月11日 16:49:06612浏览

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

运行实例 »

点击 "运行实例" 按钮查看在线实例

QQ截图20191111155915.png

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

运行实例 »

点击 "运行实例" 按钮查看在线实例



声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议