仿php中文网手机站

页面用H5编写用到header main aside footer等标签；css部分用的flex布局编写封装了部分块减少一定的代码量；

线上效果 http://test.fmlove.top/zuoye/0410/

<!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">
    <link rel="stylesheet" href="./font/iconfont.css">
    <title>Document</title>
</head>
<style>
    *{padding: 0;margin: 0;list-style: none; text-decoration: none}
    html{width: 100vw;height: 100vh;font-size: 14px;}
    html,a{ color: #888;}
    body{display: flex;flex-flow: column nowrap;font-family: "iconfont" !important;background-color: #e5e5e5;}
    header{display: flex;flex-flow: row nowrap;justify-content: space-between;height: 42px;background: #2d353c;align-items: center;position: fixed;top: 0;width: 100vw }
    header>a{color: #fff;font-size: 20px}
    header>a:first-of-type{margin-left: 10px;}
    header>a:last-of-type{margin-right: 10px;}
    header>img{width: 25vw}
    .banner{margin-top: 42px;}
    .banner>img{width: 100%}
    nav{display: flex;flex-flow: row wrap;justify-content: space-between;    background: #fff;}
    nav div{width: 25%;display: flex;flex-flow: column nowrap;text-align: center;padding-top: 10px;}
    nav>div>a{color: #888}
    nav>div>a>p{margin: 0px 0px 10px;    font-weight: 550;    font-size: 13px;}
    nav>div>a>img{width: 48%}
    main{width: 96vw;margin: 0 auto;    }
    main h3{display: block;  padding-bottom: 10px;  font-size: 18px; font-weight: bold;}
    main>.Hot{display: flex;flex-flow: column nowrap;margin-top: 30px}
    main>.Hot>div{display: flex;flex-flow:row nowrap ;justify-content: space-between}
    main>.Hot>div>a{width: 49%;}
    main>.Hot>div>a>img{width: 100%}
    aside{display: flex;flex-flow: row nowrap;justify-content: space-between;background: #fff ;margin: 10px 0;}
    aside>.w40{padding: 10px 0px 10px 10px;width: 40%;}
    aside>.w40 a img{width: 100%;}
    aside>.w60{display: flex;flex-flow: column nowrap;padding:10px 10px 10px 0;width:50%;}
    aside>.w60 a{font-size: 16px;margin-bottom: 10px;    white-space: nowrap; overflow: hidden;  text-overflow: ellipsis;}
    aside>.w60 p{    overflow: hidden; white-space: nowrap;   text-overflow: ellipsis;margin-bottom: 10px;}
    aside>.w60 div{display:flex;flex-flow: row wrap;justify-content: space-between}
    .level{background: #595757; border-radius: 8px;color: #fff; font-size: 10px;padding: 3px;}
    .count{font-size: 12px;}
    .w30{width: 30%!important;padding: 10px 10px 10px 0px!important;}
    .w70{width: 65%!important;padding:10px 0px 10px 10px!important;}
    .w70>span{     font-size: 12px;}
    .more{display: block;    margin: 0 auto;   /* line-height: 30px; */   line-height: 10px;  text-align: center;    background: #fff;padding: 10px 0;}
    .mt{margin-top: 20px}
    article{display: flex;flex-flow: row nowrap;justify-content: space-between;    border-bottom: 1px solid #eee; margin-bottom: 8px;   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);   background: #fff;       padding: 10px; }
    article>a{width: 65%}
    footer{display: flex;flex-flow: nowrap row;justify-content: space-around;background: #edeff0;    border-top: 1px solid #ccc;    position: fixed;  bottom: 0;width: 100%;}
    footer>a{  display: flex;  flex-flow: column;align-items: center;}
    footer>a:first-of-type{color: red}
    footer>a>i{    font-style: normal;margin: 3px;font-size: 16px}
    .mb{margin-bottom: 50px}
</style>
<body>
<header>
    <a href="" class="icon-wodedangxuan"></a>
    <img src="./images/logo.png"  alt="">
    <a href="" class="icon-caidanlan"></a>
</header>
<div class="banner">
    <img src="./images/11.png" alt="">
</div>
<nav>
    <div>
        <a href="">
            <img src="./images/html.png" alt="">
            <p>HTML/CSS</p>
        </a>
    </div>
    <div>
        <a href="">
            <img src="./images/JavaScript.png" alt="">
            <p>JavaScript</p>
        </a>
    </div>
    <div>
        <a href="">
            <img src="./images/code.png" alt="">
            <p>服务端</p>
        </a>
    </div>
    <div>
        <a href="">
            <img src="./images/sql.png" alt="">
            <p>数据库</p>
        </a>
    </div>
    <div>
        <a href="">
            <img src="./images/app.png" alt="">
            <p>移动端</p>
        </a>
    </div>
    <div>
        <a href="">
            <img src="./images/manual.png" alt="">
            <p>手册</p>
        </a>
    </div>
    <div>
        <a href="">
            <img src="./images/tool2.png" alt="">
            <p>工具</p>
        </a>
    </div>
    <div>
        <a href="">
            <img src="./images/live.png" alt="">
            <p>直播</p>
        </a>
    </div>
</nav>
<main>
    <div class="Hot">
        <h3>推荐课程</h3>
        <div class="HotT">
            <a href="">
                <img src="./images/5d2426f409839992.jpg" alt="">
            </a>
            <a href="">
                <img src="./images/5d2426f409839992.jpg" alt="">
            </a>
        </div>
        <aside>
            <div class="w40">
                <a href="">
                    <img src="./images/5d2941e265889366.jpg" alt="">
                </a>
            </div>
            <div class="w60">
                <a href="">CI框架30分钟极速入门</a>
                <span class="count"><span class="level">中级</span>61267次播放</span>
            </div>
        </aside>
        <aside>
            <div class="w40">
                <a href="">
                    <img src="./images/5d2941e265889366.jpg" alt="">
                </a>
            </div>
            <div class="w60">
                <a href="">CI框架30分钟极速入门</a>
                <span class="count"><span class="level">中级</span>61267次播放</span>
            </div>
        </aside>
    </div>
    <div class="Newest">
        <h3> 最新更新</h3>
        <aside>
            <div class="w40">
                <a href="">
                    <img src="./images/5d2941e265889366.jpg" alt="">
                </a>
            </div>
            <div class="w60">
                <a href="">CI框架30分钟极速入门</a>
                <p>老的PHPExcel已经停止更新了！目前最新的是使用phpOffice插件PhpSpreadsheet，用纯 php 编写的库，它提供了一组类，允许您读取和写入不同的电子表格文件格式！php中文网欧阳克老师原创课程！注：PHP运行环境需要PHP7.1以上</p>
                <div>
                    <span class="level">中级</span><span class="count">15125次播放</span>
                </div>
            </div>
        </aside>
        <aside>
            <div class="w40">
                <a href="">
                    <img src="./images/5d2941e265889366.jpg" alt="">
                </a>
            </div>
            <div class="w60">
                <a href="">CI框架30分钟极速入门</a>
                <p>老的PHPExcel已经停止更新了！目前最新的是使用phpOffice插件PhpSpreadsheet，用纯 php 编写的库，它提供了一组类，允许您读取和写入不同的电子表格文件格式！php中文网欧阳克老师原创课程！注：PHP运行环境需要PHP7.1以上</p>
                <div>
                    <span class="level">中级</span><span class="count">15125次播放</span>
                </div>
            </div>
        </aside>
        <aside>
            <div class="w40">
                <a href="">
                    <img src="./images/5d2941e265889366.jpg" alt="">
                </a>
            </div>
            <div class="w60">
                <a href="">CI框架30分钟极速入门</a>
                <p>老的PHPExcel已经停止更新了！目前最新的是使用phpOffice插件PhpSpreadsheet，用纯 php 编写的库，它提供了一组类，允许您读取和写入不同的电子表格文件格式！php中文网欧阳克老师原创课程！注：PHP运行环境需要PHP7.1以上</p>
                <div>
                    <span class="level">中级</span><span class="count">15125次播放</span>
                </div>
            </div>
        </aside>
        <aside>
            <div class="w40">
                <a href="">
                    <img src="./images/5d2941e265889366.jpg" alt="">
                </a>
            </div>
            <div class="w60">
                <a href="">CI框架30分钟极速入门</a>
                <p>老的PHPExcel已经停止更新了！目前最新的是使用phpOffice插件PhpSpreadsheet，用纯 php 编写的库，它提供了一组类，允许您读取和写入不同的电子表格文件格式！php中文网欧阳克老师原创课程！注：PHP运行环境需要PHP7.1以上</p>
                <div>
                    <span class="level">中级</span><span class="count">15125次播放</span>
                </div>
            </div>
        </aside>
        <aside>
            <div class="w40">
                <a href="">
                    <img src="./images/5d2941e265889366.jpg" alt="">
                </a>
            </div>
            <div class="w60">
                <a href="">CI框架30分钟极速入门</a>
                <p>老的PHPExcel已经停止更新了！目前最新的是使用phpOffice插件PhpSpreadsheet，用纯 php 编写的库，它提供了一组类，允许您读取和写入不同的电子表格文件格式！php中文网欧阳克老师原创课程！注：PHP运行环境需要PHP7.1以上</p>
                <div>
                    <span class="level">中级</span><span class="count">15125次播放</span>
                </div>
            </div>
        </aside>
        <aside>
            <div class="w40">
                <a href="">
                    <img src="./images/5d2941e265889366.jpg" alt="">
                </a>
            </div>
            <div class="w60">
                <a href="">CI框架30分钟极速入门</a>
                <p>老的PHPExcel已经停止更新了！目前最新的是使用phpOffice插件PhpSpreadsheet，用纯 php 编写的库，它提供了一组类，允许您读取和写入不同的电子表格文件格式！php中文网欧阳克老师原创课程！注：PHP运行环境需要PHP7.1以上</p>
                <div>
                    <span class="level">中级</span><span class="count">15125次播放</span>
                </div>
            </div>
        </aside>
        <aside>
            <div class="w40">
                <a href="">
                    <img src="./images/5d2941e265889366.jpg" alt="">
                </a>
            </div>
            <div class="w60">
                <a href="">CI框架30分钟极速入门</a>
                <p>老的PHPExcel已经停止更新了！目前最新的是使用phpOffice插件PhpSpreadsheet，用纯 php 编写的库，它提供了一组类，允许您读取和写入不同的电子表格文件格式！php中文网欧阳克老师原创课程！注：PHP运行环境需要PHP7.1以上</p>
                <div>
                    <span class="level">中级</span><span class="count">15125次播放</span>
                </div>
            </div>
        </aside>
    </div>
    <div class="NewestArticle mt">
        <h3> 最新文章</h3>
        <aside>
            <div class="w60 w70">
                <a href="">thinkphp5 + barcode 生成条形码的方法</a>
                <span>发布时间：2020-04-12</span>
            </div>
            <div class="w40 w30">
                <a href="">
                    <img src="./images/5d2941e265889366.jpg" alt="">
                </a>
            </div>
        </aside>
        <aside>
            <div class="w60 w70">
                <a href="">CI框架30分钟极速入门</a>
                <span>发布时间：2020-04-12</span>
            </div>
            <div class="w40 w30">
                <a href="">
                    <img src="./images/5d2941e265889366.jpg" alt="">
                </a>
            </div>
        </aside>
        <aside>
            <div class="w60 w70">
                <a href="">CI框架30分钟极速入门</a>
                <span>发布时间：2020-04-12</span>
            </div>
            <div class="w40 w30">
                <a href="">
                    <img src="./images/5d2941e265889366.jpg" alt="">
                </a>
            </div>
        </aside>
        <aside>
            <div class="w60 w70">
                <a href="">CI框架30分钟极速入门</a>
                <span>发布时间：2020-04-12</span>
            </div>
            <div class="w40 w30">
                <a href="">
                    <img src="./images/5d2941e265889366.jpg" alt="">
                </a>
            </div>
        </aside>
        <aside>
            <div class="w60 w70">
                <a href="">CI框架30分钟极速入门</a>
                <span>发布时间：2020-04-12</span>
            </div>
            <div class="w40 w30">
                <a href="">
                    <img src="./images/5d2941e265889366.jpg" alt="">
                </a>
            </div>
        </aside>
        <aside>
            <div class="w60 w70">
                <a href="">CI框架30分钟极速入门</a>
                <span>发布时间：2020-04-12</span>
            </div>
            <div class="w40 w30">
                <a href="">
                    <img src="./images/5d2941e265889366.jpg" alt="">
                </a>
            </div>
        </aside>
        <aside>
            <div class="w60 w70">
                <a href="">CI框架30分钟极速入门</a>
                <span>发布时间：2020-04-12</span>
            </div>
            <div class="w40 w30">
                <a href="">
                    <img src="./images/5d2941e265889366.jpg" alt="">
                </a>
            </div>
        </aside>
        <a href="/article.html" class="more">更多内容</a>
    </div>
    <div class="NewestBlog mt">
        <h3> 最新博文</h3>
        <article>
            <a href="">php+workerman实现新订单提示语音</a>
            <span>2020-04-12</span>
        </article>
        <article>
            <a href="">php+workerman实现新订单提示语音</a>
            <span>2020-04-12</span>
        </article>
        <article>
            <a href="">php+workerman实现新订单提示语音</a>
            <span>2020-04-12</span>
        </article>
        <article>
            <a href="">php+workerman实现新订单提示语音</a>
            <span>2020-04-12</span>
        </article>
    </div>
    <div class="NewestAsk mt mb">
        <h3> 最新问答</h3>
        <article>
            <a href="">php+workerman实现新订单提示语音</a>
            <span>2020-04-12</span>
        </article>
        <article>
            <a href="">php+workerman实现新订单提示语音</a>
            <span>2020-04-12</span>
        </article>
        <article>
            <a href="">php+workerman实现新订单提示语音</a>
            <span>2020-04-12</span>
        </article>
        <article>
            <a href="">php+workerman实现新订单提示语音</a>
            <span>2020-04-12</span>
        </article>
        <article>
            <a href="">php+workerman实现新订单提示语音</a>
            <span>2020-04-12</span>
        </article>
        <a href="/article.html" class="more">更多内容</a>
    </div>
</main>
<footer>
    <a href="" ><i class="icon-home-copy"></i>首页</a>
    <a href="" > <i class="icon-shipin"></i>视频</a>
    <a href="" > <i class="icon-shequ"></i>社区</a>
    <a href="" > <i class="icon-wodedangxuan"></i>我的</a>
</footer>
</body>
</html>