仿php中文网手机站
页面用H5编写 用到header main aside footer等标签 ；css部分用的flex布局编写 封装了部分块 减少一定的代码量 ；
<!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>
效果图
