search

博客列表 >仿php中文网移动端网页

仿php中文网移动端网页

雪~人胖胖
雪~人胖胖原创
2020年04月16日 03:25:18727浏览

使用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个小时，发现自己还有很多知识未掌握，需要好好的在梳理几遍知识。

上一条：grid的建立与划分形式、默认和命名在网格线和网格区域的形式、项目与单元格的对齐方式以及项目之间的间距下一条：PHP 基本知识入门
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多