Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 用flex仿PHP中文网手机端（m.php.com）案例--PHP中文网第九期线上班
Blogger Information
Blog 23
fans 1
comment 0
visits 29614
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
用flex仿PHP中文网手机端（m.php.com）案例--PHP中文网第九期线上班
Liu
Original
572 people have browsed it

一、PHP中文网手机端（m.php.com）案例

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>flex-防PHP中文网移动端网站（m.php.cn）</title>
<!--    <link rel="stylesheet" href="css/style1.css">-->
    <style>
        /*样式初始化*/
        body,footer{
            min-width: 320px;
            max-width: 768px;
            margin: 0 auto;
            background: #edeff0;
            overflow-y: initial;
            position: relative;
            color: gray;
            overflow-x: hidden;
            /*针对苹果手机高亮透明*/
            -webkit-tap-highlight-color: transparent;
        }

        img{
            width: 100%;
        }

        ul,li{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }

        a{
            text-decoration: none;
            color: #555;
        }
        @import "init.css";

        * {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            flex-flow: column nowrap;
        }

        /*头部*/
        header {
            /*固定定位*/
            position: fixed;
            top: 0;
            width: 100%;
            height: 42px;
            background-color: #444;
            color: white;

            min-width: 320px;
            max-width: 768px;

            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;

        }

        header > img:first-of-type,
        header > img:last-of-type {
            width: 26px;
            height: 26px;
            margin: 5px 10px;
        }

        header > img {
            width: 94px;
        }

        header > img:first-of-type {
            border-radius: 50%;
        }

        /*轮播图*/
        .banner {
            display: flex;
        }

        /*导航区*/
        nav {
            background-color: #fff;
            display: flex;
            flex-flow: column nowrap;
        }

        nav img {
            width: 45px;
            height: 49px;
        }

        nav > ul {
            display: flex;
        }

        nav ul li {
            flex: 1;
        }

        nav ul li a {
            display: flex;
            /*垂直换行*/
            flex-flow: column wrap;
            /*在交叉轴上居中对齐*/
            align-items: center;
            margin: 10px;
        }

        nav ul li a span {
            padding: 5px 0;
        }

        /**********************************主体内容区***********************************/
        main {
            display: flex;
            flex-flow: column nowrap;
        }

        main > .recommend > h3,
        main > .new > h3,
        main > .new-artcle > h3 {
            margin: 20px 0 5px;
        }

        /*设置水平排列*/
        main > .recommend > section:first-of-type {
            /*设置为弹性容器 默认水平排列*/
            display: flex;
        }

        main > .recommend > section:first-of-type > a {
            /*让每个弹性元素平均分配空间*/
            flex: 1;
            margin: 5px;
        }

        main > .recommend > section:first-of-type > a > img {
            height: 90px;
        }

        /*垂直排列的课程*/
        main > .recommend > section:last-of-type {
            display: flex;
            flex-flow: column nowrap;
        }

        main > .recommend > section:last-of-type > div {
            background-color: #fff;
            margin: 5px 0;
            display: flex;
            padding: 10px 10px 5px;
        }

        main > .recommend > section:last-of-type > div img,
        main > .new > section > div img {
            width: auto;
            height: 85px;
        }


        main > .recommend > section:last-of-type > div > span {
            display: flex;
            flex-flow: column nowrap;
            padding: 0 15px;
            flex: 1;
        }

        main > .recommend > section:last-of-type > div > span > span {
            font-size: 0.85rem;
            margin-top: 10px;
        }

        main > .recommend > section:last-of-type > div > span i {
            font-style: normal;
            background: #333;
            color: #fff;
            border-radius: 5px;
            padding: 0 6px;
            margin-right: 5px;
        }

        /*最新更新*/

        main > .new > section {
            display: flex;
            flex-flow: column nowrap;
        }

        main > .new > section > div,
        main > .new-artcle > div {
            background-color: #fff;
            margin: 5px 0;
            display: flex;
            padding: 10px 10px 5px;
        }

        main > .new > section > div > span {
            box-sizing: border-box;
            display: flex;
            flex-flow: column nowrap;
            padding: 0 15px;
        }

        main > .new > section > div > span > p {
            height: 20px;
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            margin: 5px 0 10px;
            font-size: 0.75rem;
        }

        main > .new > section > div > span > span {
            display: flex;
            font-size: 0.75rem;
            justify-content: space-between;
        }

        main > .new > section > div > span > span i {
            font-style: normal;
            background: #444;
            border-radius: 5px;
            padding: 0 5px;
            color: #fff;
        }

        /*更多按钮*/
        main > .new > section > a,
        main > .blog > p > a {
            background-color: #fff;
            display: flex;
            justify-content: center;
            padding: 5px 0;
            margin: 5px 0;
        }

        /*最新文章*/
        main > .new-artcle > div > a img {
            width: 220px;
            height: 64px;
        }

        main > .new-artcle > div > span {
            display: flex;
            flex-flow: column nowrap;
            flex: 1;
            order: -1;
        }

        main > .new-artcle > div > span > p {
            margin: 5px 0 10px;
            font-size: 0.75rem;
        }

        /*最新播放*/
        main > .blog >h3{
            margin: 15px 0 10px;
        }
        main > .blog > ul > li {
            background: #fff;
            padding: 15px;
            margin: 5px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /*底部*/
        footer {
            display: flex;
            background: #edeff0;
            position: fixed;
            bottom: 0;
            border-top: 1px solid #ccc;
            width: 100%;
            padding: 10px 0;
            min-width: 320px;
            max-width: 768px;
            box-sizing: border-box;

        }

        footer > a {
            display: flex;
            flex: 1;
            flex-flow: column nowrap;
            justify-content: center;
            align-items: center;
        }

        footer > a img {
            width: 25px;
        }
    </style>
</head>
<body>
<!--顶部固定定位-->
<header>
    <img src="images/login.png" alt="">
    <img src="images/logo.png" alt="">
    <img src="images/ico.png" alt="">
</header>
<!--banner-->
<section class="banner">
    <a href="#"><img src="images/banner.jpg" alt=""></a>
</section>
<!--导航-->
<nav>
    <ul>
        <li>
            <a href="#">
                <img src="images/html.png" alt="">
                <span>HTML/CSS</span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/JavaScript.png" alt="">
                <span>Javascript</span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/html.png" alt="">
                <span>服务端</span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/sql.png" alt="">
                <span>数据库</span>
            </a>
        </li>
    </ul>
    <ul>
        <li>
            <a href="#">
                <img src="images/app.png" alt="">
                <span>移动端</span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/manual.png" alt="">
                <span>手册</span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/code.png" alt="">
                <span>工具</span>
            </a>
        </li>
        <li>
            <a href="#">
                <img src="images/live.png" alt="">
                <span>直播</span>
            </a>
        </li>
    </ul>
</nav>

<!--主体内容区-->
<main>
    <!--    推荐课程区-->
    <article class="recommend">
        <h3>推荐课程</h3>
        <section>
            <a href="#">
                <img src="images/tj1.jpg" alt="">
            </a>
            <a href="#">
                <img src="images/tj1.jpg" alt="">
            </a>
        </section>
        <section>
            <div>
                <a href=""><img src="images/tj1.jpg" alt=""></a>
                <span>
                    <a href="">CI框架30分钟极速入门</a>
                    <span><i>中级</i>52971次播放</span>
                </span>
            </div>
            <div>
                <a href=""><img src="images/tj1.jpg" alt=""></a>
                <span>
                    <a href="">CI框架30分钟极速入门</a>
                    <span><i>中级</i>52971次播放</span>
                </span>
            </div>
        </section>
    </article>
    <!--    最新更新-->
    <article class="new">
        <h3>最新更新</h3>
        <section>
            <div>
                <a href=""><img src="images/tj1.jpg" alt=""></a>
                <span>
                    <a href="">CI框架30分钟极速入门</a>
                    <p>重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解，了解可以利用HTML+CSS做什么，有相关工具、后端语言，逻辑思维训练等知识点</p>
                    <span><i>中级</i>52971次播放</span>
                </span>
            </div>
            <div>
                <a href=""><img src="images/tj1.jpg" alt=""></a>
                <span>
                    <a href="">CI框架30分钟极速入门</a>
                    <p>好多同学在PHP基础的时候对PHP文件的操作了解的不够多，本节课就带着大家来学习PHP文件的基础操作，PHP操作文件主要用到的就是PHP文件相关的函数，那么我们主要讲的也就是PHP文件相关的各种函数，相信本节课程会让你对PHP更感兴趣哦！</p>
                    <span><i>中级</i>52971次播放</span>
                </span>
            </div>
            <div>
                <a href=""><img src="images/tj1.jpg" alt=""></a>
                <span>
                    <a href="">CI框架30分钟极速入门</a>
                    <p>重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解，了解可以利用HTML+CSS做什么，有相关工具、后端语言，逻辑思维训练等知识点</p>
                    <span><i>中级</i>52971次播放</span>
                </span>
            </div>
            <div>
                <a href=""><img src="images/tj1.jpg" alt=""></a>
                <span>
                    <a href="">CI框架30分钟极速入门</a>
                    <p>好多同学在PHP基础的时候对PHP文件的操作了解的不够多，本节课就带着大家来学习PHP文件的基础操作，PHP操作文件主要用到的就是PHP文件相关的函数，那么我们主要讲的也就是PHP文件相关的各种函数，相信本节课程会让你对PHP更感兴趣哦！</p>
                    <span><i>中级</i>52971次播放</span>
                </span>
            </div>
            <div>
                <a href=""><img src="images/tj1.jpg" alt=""></a>
                <span>
                    <a href="">CI框架30分钟极速入门</a>
                    <p>重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解，了解可以利用HTML+CSS做什么，有相关工具、后端语言，逻辑思维训练等知识点</p>
                    <span><i>中级</i>52971次播放</span>
                </span>
            </div>
            <div>
                <a href=""><img src="images/tj1.jpg" alt=""></a>
                <span>
                    <a href="">CI框架30分钟极速入门</a>
                    <p>好多同学在PHP基础的时候对PHP文件的操作了解的不够多，本节课就带着大家来学习PHP文件的基础操作，PHP操作文件主要用到的就是PHP文件相关的函数，那么我们主要讲的也就是PHP文件相关的各种函数，相信本节课程会让你对PHP更感兴趣哦！</p>
                    <span><i>中级</i>52971次播放</span>
                </span>
            </div>
            <div>
                <a href="#"><img src="images/tj1.jpg" alt=""></a>
                <span>
                    <a href="#">CI框架30分钟极速入门</a>
                    <p>重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解，了解可以利用HTML+CSS做什么，有相关工具、后端语言，逻辑思维训练等知识点</p>
                    <span><i>中级</i>52971次播放</span>
                </span>
            </div>
            <div>
                <a href="#"><img src="images/tj1.jpg" alt=""></a>
                <span>
                    <a href="#">CI框架30分钟极速入门</a>
                    <p>好多同学在PHP基础的时候对PHP文件的操作了解的不够多，本节课就带着大家来学习PHP文件的基础操作，PHP操作文件主要用到的就是PHP文件相关的函数，那么我们主要讲的也就是PHP文件相关的各种函数，相信本节课程会让你对PHP更感兴趣哦！</p>
                    <span><i>中级</i>52971次播放</span>
                </span>
            </div>
            <div>
                <a href="#"><img src="images/tj1.jpg" alt=""></a>
                <span>
                    <a href="#">CI框架30分钟极速入门</a>
                    <p>重点介绍了HTML、CSS、web布局前端核心技术，通过视频讲解，了解可以利用HTML+CSS做什么，有相关工具、后端语言，逻辑思维训练等知识点</p>
                    <span><i>中级</i>52971次播放</span>
                </span>
            </div>
            <div>
                <a href="#"><img src="images/tj1.jpg" alt=""></a>
                <span>
                    <a href="#">CI框架30分钟极速入门</a>
                    <p>好多同学在PHP基础的时候对PHP文件的操作了解的不够多，本节课就带着大家来学习PHP文件的基础操作，PHP操作文件主要用到的就是PHP文件相关的函数，那么我们主要讲的也就是PHP文件相关的各种函数，相信本节课程会让你对PHP更感兴趣哦！</p>
                    <span><i>中级</i>52971次播放</span>
                </span>
            </div>
            <a href="#">更多内容</a>
        </section>
    </article>
    <!--最新文章-->
    <article class="new-artcle">
        <h3>最新文章</h3>
        <div>
            <a href="#"><img src="images/tj1.jpg" alt=""></a>
            <span>
                    <a href="#">CI框架30分钟极速入门</a>
                     <p>时间：2019年11月7日</p>
                </span>
        </div>
        <div>
            <a href="#"><img src="images/tj1.jpg" alt=""></a>
            <span>
                    <a href="#">CI框架30分钟极速入门</a>
                     <p>时间：2019年11月7日</p>
                </span>
        </div>
        <div>
            <a href="#"><img src="images/tj1.jpg" alt=""></a>
            <span>
                    <a href="#">CI框架30分钟极速入门</a>
                    <p><i>中级</i>52971次播放</p>
                </span>
        </div>
        <div>
            <a href="#"><img src="images/tj1.jpg" alt=""></a>
            <span>
                    <a href="#">CI框架30分钟极速入门</a>
                    <p>时间：2019年11月7日</p>
                </span>
        </div>
        <div>
            <a href="#"><img src="images/tj1.jpg" alt=""></a>
            <span>
                    <a href="#">CI框架30分钟极速入门</a>
                     <p>时间：2019年11月7日</p>
                </span>
        </div>
        <div>
            <a href="#"><img src="images/tj1.jpg" alt=""></a>
            <span>
                    <a href="#">CI框架30分钟极速入门</a>
                    <p>时间：2019年11月7日</p>
                </span>
        </div>
        <div>
            <a href="#"><img src="images/tj1.jpg" alt=""></a>
            <span>
                    <a href="#">CI框架30分钟极速入门</a>
                    <p>时间：2019年11月7日</p>
                </span>
        </div>
    </article>
    <!--    最新博文-->
    <article class="blog">
        <h3>最新博文</h3>
        <ul>
            <li><a href="#">外交部就习近平访问希腊举行中外媒体吹风会</a><span>2019-08-02</span></li>
            <li><a href="#">快船逆转擒开拓者 莱昂纳德27+13末节独得18分</a><span>2019-08-02</span></li>
            <li><a href="#">64岁费玉清正式封麦，含泪告别47年演艺生涯！</a><span>2019-08-02</span></li>
            <li><a href="#">车圈 | 欧盟官员称中国将取代德国汽车领头地位</a><span>2019-08-02</span></li>
            <li><a href="#">魏锐危险了！赛前更换对手 连升两个级别作战</a><span>2019-08-02</span></li>
        </ul>
        <p><a href="#">更多内容</a></p>
    </article>
    <!--    最新问答-->
    <!--    最新博文-->
    <article class="blog">
        <h3>最新问答</h3>
        <ul>
            <li><a href="#">外交部就习近平访问希腊举行中外媒体吹风会</a><span>2019-08-02</span></li>
            <li><a href="#">快船逆转擒开拓者 莱昂纳德27+13末节独得18分</a><span>2019-08-02</span></li>
            <li><a href="#">64岁费玉清正式封麦，含泪告别47年演艺生涯！</a><span>2019-08-02</span></li>
            <li><a href="#">车圈 | 欧盟官员称中国将取代德国汽车领头地位</a><span>2019-08-02</span></li>
            <li><a href="#">魏锐危险了！赛前更换对手 连升两个级别作战</a><span>2019-08-02</span></li>
        </ul>
        <p><a href="#">更多内容</a></p>
    </article>
</main>
footer
<footer>
    <a href="#">
        <img src="images/home.png" alt="">
        <span>首页</span>
    </a>
    <a href="">
        <img src="images/video.png" alt="">
        <span>视频</span>
    </a>
    <a href="">
        <img src="images/code2.png" alt="">
        <span>社区</span>
    </a>
    <a href="">
        <img src="images/user.png" alt="">
        <span>用户</span>
    </a>
</footer>
</body>
</html>
显示效果
1.png

手抄作业
01.jpg

总结：

（总结正在更新中..,）

Correction status：qualified

Teacher's comments：手写代码的要求很高的, 是一遍过, 所以比较难
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post