简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 仿php中文网移动端网页
Blogger Information
Blog 26
fans 0
comment 0
visits 18146
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
仿php中文网移动端网页
雪~人胖胖
Original
716 people have browsed it

使用flex布局实现php中文网移动端网页布局

地址http://120.26.174.178:90/0411/demo1.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <link rel="stylesheet" href="static/css/font-icon.css" />
  8.     <style>
  9.       /* 初始化设置 */
  10. * {
  11.   margin: 0;
  12.   padding: 0;
  13. }
  14. a {
  15.   text-decoration: none;
  16.   color: #666;
  17. }
  19. html {
  20.   width: 100vw;
  21.   height: 100vh;
  22.   font-size: 14px;
  23. }
  25. body {
  26.   min-width: 360px;
  27.   background-color: #dddddd;
  28.   display: flex;
  29.   flex-flow: column nowrap;
  30.   justify-content: center;
  31.   align-items: center;
  32. }
  33. /* 页眉 */
  34. header {
  35.   width: 100vw;
  36.   height: 5vh;
  37.   background-color: #333;
  38.   display: flex;
  39.   align-items: center;
  40.   justify-content: space-between;
  41.   color: #fff;
  42.   padding: 0px 16px;
  43.   position: fixed;
  44.   top: 0px;
  45. }
  46. header > img:first-of-type {
  47.   margin: 0px 15px;
  48.   width: 20px;
  49.   border-radius: 16px;
  50. }
  51. header > img:last-of-type {
  52.   width: 70px;
  53. }
  54. header > span {
  55.   margin-right: 3vw;
  56. }
  57. .slider img {
  58.   width: 100vw;
  59.   margin-top: 5vh;
  60. }
  61.       nav {
  62.         display: flex;
  63.         flex-flow: row wrap;
  64.         background-color: #fff;
  65.       }
  66.       nav > div {
  67.         display: flex;
  68.         flex-flow: column nowrap;
  69.         width: 25vw;
  70.         align-items: center;
  71.         margin: 10px 0px;
  72.       }
  73.       nav > div > a img {
  74.         width: 50%;
  75.       }
  76.       nav > div > a {
  77.         text-align: center;
  78.       }
  79.       h3 {
  80.         display: block;
  81.         margin-bottom: 10px;
  82.         color: #888;
  83.       }
  84.       /* 双图片 */
  85.       .course {
  86.         display: flex;
  87.         flex-flow: column nowrap;
  88.         margin: 30px 0px 30px;
  89.         flex: 1 1 auto;
  90.         width: 95vw;
  91.       }
  92.       .img1 {
  93.         width: 95vw;
  94.         display: flex;
  95.         flex-flow: row nowrap;
  96.         justify-content: space-between;
  97.         margin-bottom: 15px;
  98.       }
  99.       .course > .img1 > a > img {
  100.         width: 46vw;
  101.       }
  102.       /* 课程 */
  103.       .course > div:not(:first-of-type) {
  104.         display: flex;
  105.         flex-flow: row nowrap;
  106.         width: 95vw;
  107.         background-color: #fff;
  108.         margin-bottom: 20px;
  109.       }
  110.       .course > div:not(:first-of-type) a {
  111.         display: flex;
  112.         box-sizing: border-box;
  113.       }
  114.       .course > div:not(:first-of-type) > a > img {
  115.         width: 40vw;
  116.         margin: 10px;
  117.       }
  118.       .course > div:not(:first-of-type) > div {
  119.         padding: 10px 0px;
  120.         font-size: 1.2rem;
  121.       }
  122.       .level {
  123.         font-size: 12px;
  124.         background-color: #333;
  125.         border-radius: 7px;
  126.         color: #fff;
  127.         padding: 3px;
  128.       }
  129.       .course > div:not(:first-of-type) > div > span:last-of-type {
  130.         font-size: 12px;
  131.         color: #888;
  132.       }
  133.       .course > div:not(:first-of-type) > div > a {
  134.         margin-bottom: 10px;
  135.       }
  136.       /* 最新更新 */
  137.       .update {
  138.         width: 95vw;
  139.       }
  140.       .update > .update-list {
  141.         display: flex;
  142.         flex-flow: row nowrap;
  143.         font-size: 1.2rem;
  144.         align-items: center;
  145.         background-color: #fff;
  146.         margin-bottom: 20px;
  147.       }
  148.       .update > .update-list > div {
  149.         flex: 1 1 auto;
  150.       }
  151.       .update > .update-list > a {
  152.         display: flex;
  153.         box-sizing: border-box;
  154.       }
  155.       .update > .update-list > a > img {
  156.         width: 40vw;
  157.         margin: 10px;
  158.         height: 84px;
  159.       }
  160.       .update > .update-list > div > p {
  161.         font-size: 12px;
  162.         color: #888;
  163.         margin-top: 10px;
  164.       }
  165.       .update > .update-list > div > span:first-of-type {
  166.         display: block;
  167.         margin-bottom: 10px;
  168.       }
  169.       .update > .update-list > div > a {
  170.         display: block;
  171.       }
  172.       .update > .update-list > div > p:nth-of-type(2) {
  173.         display: flex;
  174.         justify-content: space-between;
  175.         align-items: center;
  176.         line-height: 14px;
  177.         margin-right: 15px;
  178.       }
  179.       /* 最新文章 */
  180.       .article {
  181.         width: 95vw;
  182.         margin-top: 10px;
  183.       }
  184.       .article > div {
  185.         display: flex;
  186.         flex-flow: column wrap;
  187.         height: 84px;
  188.         justify-content: center;
  189.         align-content: space-between;
  190.         padding: 10px 10px 8px;
  191.         background-color: #fff;
  192.         margin-bottom: 20px;
  193.       }
  194.       .article > div > a:last-of-type > img {
  195.         height: 65px;
  196.         width: 100.5px;
  197.       }
  198.       .article > div > span {
  199.         font-size: 12px;
  200.         color: #888;
  201.       }
  202.       .article > p {
  203.         text-align: center;
  204.         background-color: #fff;
  205.         line-height: 30px;
  206.       }
  207.       /* 最新博文 */
  208.       .blog {
  209.         width: 95vw;
  210.         margin-top: 10px;
  211.       }
  212.       .blog > div {
  213.         display: flex;
  214.         flex-flow: row nowrap;
  215.         height: 45px;
  216.         background-color: #fff;
  217.         margin-bottom: 20px;
  218.         padding: 10px 10px 8px;
  219.         box-sizing: border-box;
  220.         line-height: 19px;
  221.         font-size: 10px;
  222.         justify-content: space-between;
  223.       }
  224.       .blog > div > span {
  225.         font-size: 12px;
  226.         color: #666;
  227.       }
  228.       .blog > p {
  229.         text-align: center;
  230.         background: #fff;
  231.         line-height: 30px;
  232.       }
  233.       .question {
  234.         width: 95vw;
  235.         margin-top: 10px;
  236.         margin-bottom: 70px;
  237.       }
  238.       .question > div {
  239.         display: flex;
  240.         flex-flow: row nowrap;
  241.         height: 45px;
  242.         background-color: #fff;
  243.         margin-bottom: 20px;
  244.         padding: 10px 10px 8px;
  245.         box-sizing: border-box;
  246.         line-height: 19px;
  247.         font-size: 10px;
  248.         justify-content: space-between;
  249.       }
  250.       .question > div > span {
  251.         font-size: 12px;
  252.         color: #666;
  253.       }
  254.       .question > p {
  255.         text-align: center;
  256.         background: #fff;
  257.         line-height: 30px;
  258.       }
  259.       /* 页脚 */
  260.       footer {
  261.         display: flex;
  262.         justify-content: space-around;
  263.         height: 50px;
  264.         border-top: 1px solid #888;
  265.         padding-top: 10px;
  266.         position: fixed;
  267.         bottom: 0px;
  268.         width: 100vw;
  269.         background-color: #fff;
  270.       }
  271.       footer > a {
  272.         display: flex;
  273.         flex-flow: column nowrap;
  274.         align-items: center;
  275.       }
  276.     </style>
  277.   </head>
  278.   <body>
  279.     <!-- 页眉 -->
  280.     <header>
  281.       <img src="static/image/user_avatar.jpg" alt="" />
  282.       <img src="static/image/logo.png" alt="" />
  283.       <span class="iconfont">&#xe61f;</span>
  284.     </header>
  286.     <!-- 轮播图 -->
  287.     <div class="slider"><img src="static/image/3.jpg" alt="" /></div>
  288.     <!-- 导航栏 -->
  289.     <nav>
  290.       <div>
  291.         <a href=""><img src="static/image/html.png" alt="" /></a>
  292.         <a href="">HTML/CSS</a>
  293.       </div>
  294.       <div>
  295.         <a href=""><img src="static/image/JavaScript.png" alt="" /></a>
  296.         <a href="">JavaScript</a>
  297.       </div>
  298.       <div>
  299.         <a href=""><img src="static/image/code.png" alt="" /></a>
  300.         <a href="">服务器</a>
  301.       </div>
  302.       <div>
  303.         <a href=""><img src="static/image/sql.png" alt="" /></a>
  304.         <a href="">数据库</a>
  305.       </div>
  306.       <div>
  307.         <a href=""><img src="static/image/app.png" alt="" /></a>
  308.         <a href="">移动端</a>
  309.       </div>
  310.       <div>
  311.         <a href=""><img src="static/image/manual.png" alt="" /></a>
  312.         <a href="">手册</a>
  313.       </div>
  314.       <div>
  315.         <a href=""><img src="static/image/tool2.png" alt="" /></a>
  316.         <a href="">工具</a>
  317.       </div>
  318.       <div>
  319.         <a href=""><img src="static/image/live.png" alt="" /></a>
  320.         <a href="">直播</a>
  321.       </div>
  322.     </nav>
  323.     <!-- 推荐课程 -->
  324.     <div class="course">
  325.       <h3>推荐课程</h3>
  326.       <div class="img1">
  327.         <a href=""><img src="static/image/5d242759adb88970.jpg" alt="" /></a>
  328.         <a href=""><img src="static/image/5d2426f409839992.jpg" alt="" /></a>
  329.       </div>
  330.       <div>
  331.         <a href=""><img src="static/image/5d2941e265889366.jpg" alt="" /></a>
  332.         <div>
  333.           <a href="">CI框架30分钟极速入门</a>
  334.           <span class="level">中级</span>
  335.           <span>61447次播放</span>
  336.         </div>
  337.       </div>
  338.       <div>
  339.         <a href=""><img src="static/image/5aa23f0ded921649.jpg" alt="" /></a>
  340.         <div>
  341.           <a href="">2018前端入门HTML5</a>
  342.           <span class="level">初级</span>
  343.           <span>311851次播放</span>
  344.         </div>
  345.       </div>
  346.     </div>
  347.     <!-- 最新更新 -->
  348.     <div class="update">
  349.       <h3>最新更新</h3>
  350.       <div class="update-list">
  351.         <a href=""><img src="static/image/5e0d6387e45cc764.png" alt="" /></a>
  352.         <div>
  353.           <a href="">PHP快速操控Excel之...</a>
  354.           <p>老的EXCEL已经停止更新了！...</p>
  355.           <p><span class="level">中级</span> <span>15604次播放</span></p>
  356.         </div>
  357.       </div>
  358.       <div class="update-list">
  359.         <a href=""><img src="static/image/5e0d82773b4fe808.png" alt="" /></a>
  360.         <div>
  361.           <a href="">Thinkphp正式版视频...</a>
  362.           <p>Thinkphp6.0从2019年10月24日...</p>
  363.           <p><span class="level">中级</span> <span>15604次播放</span></p>
  364.         </div>
  365.       </div>
  366.       <div class="update-list">
  367.         <a href=""><img src="static/image/5db2b53c67bca626.jpg" alt="" /></a>
  368.         <div>
  369.           <a href="">2019python自学视频...</a>
  370.           <p>本课程适合从零开始学习Pytho...</p>
  371.           <p><span class="level">初级</span> <span>15604次播放</span></p>
  372.         </div>
  373.       </div>
  374.       <div class="update-list">
  375.         <a href=""><img src="static/image/5da7e9b7895ed229.png" alt="" /></a>
  376.         <div>
  377.           <a href="">PHP开发免费公益直播</a>
  378.           <p>主讲：php中文网-朱老师（P...</p>
  379.           <p><span class="level">中级</span> <span>15604次播放</span></p>
  380.         </div>
  381.       </div>
  382.       <div class="update-list">
  383.         <a href=""><img src="static/image/5da6a50535529903.jpg" alt="" /></a>
  384.         <div>
  385.           <a href="">从零开始到WEB响应...</a>
  386.           <p>重点介绍了HTML、css...</p>
  387.           <p><span class="level">中级</span> <span>15604次播放</span></p>
  388.         </div>
  389.       </div>
  390.       <div class="update-list">
  391.         <a href=""><img src="static/image/5da51b8ff1224244.png" alt="" /></a>
  392.         <div>
  393.           <a href="">PHP文件基础操作</a>
  394.           <p>好多同学在PHP基础的时候对P...</p>
  395.           <p><span class="level">中级</span> <span>15604次播放</span></p>
  396.         </div>
  397.       </div>
  398.     </div>
  399.     <!-- 最新文章 -->
  400.     <div class="article">
  401.       <h3>最新文章</h3>
  402.       <div>
  403.         <a href=""><h3>golint的简易使用方法</h3></a>
  404.         <span>发布时间：2020-04-15</span>
  405.         <a href=""><img src="static/image/5e96d958599ba696.jpg" alt="" /></a>
  406.       </div>
  407.       <div>
  408.         <a href=""><h3>golint的简易使用方法</h3></a>
  409.         <span>发布时间：2020-04-15</span>
  410.         <a href=""><img src="static/image/java.jpg" alt="" /></a>
  411.       </div>
  412.       <div>
  413.         <a href=""><h3>golint的简易使用方法</h3></a>
  414.         <span>发布时间：2020-04-15</span>
  415.         <a href=""><img src="static/image/5e96c2939d609975.jpg" alt="" /></a>
  416.       </div>
  417.       <div>
  418.         <a href=""><h3>golint的简易使用方法</h3></a>
  419.         <span>发布时间：2020-04-15</span>
  420.         <a href=""><img src="static/image/5e96bf348260c743.jpg" alt="" /></a>
  421.       </div>
  422.       <div>
  423.         <a href=""><h3>golint的简易使用方法</h3></a>
  424.         <span>发布时间：2020-04-15</span>
  425.         <a href=""><img src="static/image/5e96bdf7bf922749.jpg" alt="" /></a>
  426.       </div>
  427.       <p><a href="">更多内容</a></p>
  428.     </div>
  429.     <!-- 最新博文 -->
  430.     <div class="blog">
  431.       <h3>最新博文</h3>
  432.       <div>
  433.         <h2><a href="">Shiro RememberMe1.2.4反序列...</a></h2>
  434.         <span>2020-04-15</span>
  435.       </div>
  436.       <div>
  437.         <h2><a href="">200多行代码实现微信公众号网页...</a></h2>
  438.         <span>2020-04-15</span>
  439.       </div>
  440.       <div>
  441.         <h2><a href="">PhpStrom安装PHPUnit-9单元测试...</a></h2>
  442.         <span>2020-04-15</span>
  443.       </div>
  444.       <div>
  445.         <h2><a href="">微信的openid和unionid</a></h2>
  446.         <span>2020-04-15</span>
  447.       </div>
  448.       <div>
  449.         <h2><a href="">JS实现HTML标签转义及反转义</a></h2>
  450.         <span>2020-04-15</span>
  451.       </div>
  452.       <p><a href="">更多内容</a></p>
  453.     </div>
  454.     <!-- 最新问答 -->
  455.     <div class="question">
  456.       <h3>最新问答</h3>
  457.       <div>
  458.         <h2><a href="">请先启动wep服务是什么意思？</a></h2>
  459.         <span>2020-04-15</span>
  460.       </div>
  461.       <div>
  462.         <h2><a href="">ATOM官网打不开无法下载</a></h2>
  463.         <span>2020-04-15</span>
  464.       </div>
  465.       <div>
  466.         <h2><a href="">想做网站开发</a></h2>
  467.         <span>2020-04-15</span>
  468.       </div>
  469.       <p><a href="">更多内容</a></p>
  470.     </div>
  471.     <!-- 页脚 -->
  472.     <footer>
  473.       <a href="">
  474.         <span class="iconfont">&#xe60c;</span>
  475.         <span>首页</span>
  476.       </a>
  477.       <a href="">
  478.         <span class="iconfont">&#xe60a;</span>
  479.         <span>视频</span>
  480.       </a>
  481.       <a href="">
  482.         <span class="iconfont">&#xe675;</span>
  483.         <span>社区</span>
  484.       </a>
  485.       <a href="">
  486.         <span class="iconfont">&#xe600;</span>
  487.         <span>我的</span>
  488.       </a>
  489.     </footer>
  490.   </body>
  491. </html>

效果图


总结

自己研究了差不多6个小时，发现自己还有很多知识未掌握，需要好好的在梳理几遍知识。

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！