登录  /  注册
博主信息
博文 23
粉丝 1
评论 0
访问量 28748
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
用flex仿PHP中文网手机端(m.php.com)案例--PHP中文网第九期线上班
Liu
原创
550人浏览过

一、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

总结:

(总结正在更新中..,)

批改状态:合格

老师批语:手写代码的要求很高的, 是一遍过, 所以比较难
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学