仿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>
效果图

Correcting teacher：
天蓬老师

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
offset 的用法

2022-03-01 16:40:59
仿php中文网手机站

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

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

效果图

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