search

博客列表 >使用flex布局实战模仿php中文网移动端

使用flex布局实战模仿php中文网移动端

我是郭富城
我是郭富城原创
2020年04月15日 01:19:58693浏览

演示站：https://php520.vip/final/php.cn.html
请切换至手机模式，或者直接使用手机浏览效果更佳

确认文档结构

  • 第一步是最核心的，需要清楚自己的html文档的具体结构

    实际上明确文档结构就是在脑海中浮现出即将要实现的html页面，知道他的结构和内容

通用的基本样式设置

  • css通用的基本样式

以下是完整的代码

  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.     <link rel="stylesheet" href="css/icon.css" />
  7.     <title>使用flex布局实战模仿php中文网移动端</title>
  8.     <style>
  9.       * {
  10.         padding: 0;
  11.         margin: 0;
  12.       }
  13.       a {
  14.         text-decoration: none;
  15.         color: #666;
  16.       }
  17.       html {
  18.         width: 100vw;
  19.         height: 100vh;
  20.         font-size: 14px;
  21.       }
  22.       body {
  23.         min-width: 360px;
  24.         background-color: #edeff0;
  25.         display: flex;
  26.         flex-flow: column nowrap;
  27.       }
  28.       header {
  29.         height: 50px;
  30.         background-color: #2d353c;
  31.         display: flex;
  32.         flex-flow: row nowrap;
  33.         align-items: center;
  34.         justify-content: space-between;
  35.         padding: 0 15px;
  36.         position: fixed;
  37.         width: 95vw;
  38.       }
  39.       header > a:first-of-type > span {
  40.         font-size: 1.8rem;
  41.       }
  42.       header > a:last-of-type > span {
  43.         font-size: 1.8rem;
  44.         color: #fff;
  45.       }
  46.       header img {
  47.         width: 80px;
  48.       }
  49.       .slider {
  50.         height: 160px;
  51.         margin-top: 50px;
  52.       }
  53.       .slider > img {
  54.         width: 100%;
  55.       }
  56.       nav {
  57.         height: 180px;
  58.         display: flex;
  59.         flex-flow: row wrap;
  60.       }
  61.       nav > div {
  62.         width: 25vw;
  63.         display: flex;
  64.         flex-flow: column nowrap;
  65.         align-items: center;
  66.       }
  67.       nav > div > a:first-of-type > img {
  68.         width: 50%;
  69.       }
  70.       nav > div > a:first-of-type {
  71.         text-align: center;
  72.       }
  73.       h3 {
  74.         color: #888a8c;
  75.         padding-left: 5px;
  76.       }
  77.       .tuijian-course {
  78.         height: 350px;
  79.         display: flex;
  80.         flex-flow: column nowrap;
  81.         margin-top: 10px;
  82.       }
  83.       .tuijian-course > div:first-of-type {
  84.         display: flex;
  85.         flex-flow: row nowrap;
  86.         justify-content: space-evenly;
  87.       }
  88.       .tuijian-course > div:first-of-type > img {
  89.         width: 45vw;
  90.       }
  91.       .tuijian-course > div:nth-of-type(2) {
  92.         display: flex;
  93.         flex-flow: row nowrap;
  94.         background-color: #fff;
  95.         margin: 12px;
  96.         box-sizing: border-box;
  97.       }
  98.       .tuijian-course > div:nth-of-type(2) > img {
  99.         width: 40vw;
  100.         padding: 10px;
  101.       }
  102.       .tuijian-course > div:nth-of-type(2) > div {
  103.         display: flex;
  104.         flex-flow: column nowrap;
  105.         justify-content: space-evenly;
  106.       }
  107.       .tuijian-course > div:nth-of-type(2) > div > a:first-of-type {
  108.         font-size: 1.2rem;
  109.       }
  110.       .tuijian-course > div:nth-of-type(2) > div > a:last-of-type {
  111.         font-size: 0.8rem;
  112.       }
  113.       .tuijian-course > div:nth-of-type(2) > div > a:last-of-type > span {
  114.         background-color: #595757;
  115.         color: #fff;
  116.         border-radius: 6px;
  117.       }
  118.       .tuijian-course > div:last-of-type {
  119.         display: flex;
  120.         flex-flow: row nowrap;
  121.         background-color: #fff;
  122.         margin: 12px;
  123.         box-sizing: border-box;
  124.       }
  125.       .tuijian-course > div:last-of-type > img {
  126.         width: 40vw;
  127.         padding: 10px;
  128.       }
  129.       .tuijian-course > div:last-of-type > div {
  130.         display: flex;
  131.         flex-flow: column nowrap;
  132.         justify-content: space-evenly;
  133.       }
  134.       .tuijian-course > div:last-of-type > div > a:first-of-type {
  135.         font-size: 1.2rem;
  136.       }
  137.       .tuijian-course > div:last-of-type > div > a:last-of-type {
  138.         font-size: 0.8rem;
  139.       }
  140.       .tuijian-course > div:last-of-type > div > a:last-of-type > span {
  141.         background-color: #595757;
  142.         color: #fff;
  143.         border-radius: 6px;
  144.       }
  145.       .zuixin {
  146.         height: 800px;
  147.         display: flex;
  148.         flex-flow: column nowrap;
  149.         justify-content: space-evenly;
  150.       }
  151.       .zuixin > .tuwen {
  152.         display: flex;
  153.         flex-flow: row nowrap;
  154.         background-color: #fff;
  155.         margin: 12px;
  156.       }
  157.       .zuixin > .tuwen > a > img {
  158.         width: 40vw;
  159.         padding: 10px;
  160.       }
  161.       .miaoshu {
  162.         display: flex;
  163.         flex-flow: column nowrap;
  164.         justify-content: space-evenly;
  165.       }
  166.       .miaoshu > a:first-of-type {
  167.         font-size: 1.2rem;
  168.       }
  169.       .miaoshu > a:last-of-type {
  170.         font-size: 0.8rem;
  171.       }
  172.       .miaoshu > div {
  173.         display: flex;
  174.         flex-flow: row nowrap;
  175.         justify-content: space-between;
  176.       }
  177.       .miaoshu > div > span:first-of-type {
  178.         background-color: #595757;
  179.         border-radius: 5px;
  180.         font-size: 0.8rem;
  181.         color: #fff;
  182.       }
  183.       .miaoshu > div > span:last-of-type {
  184.         font-size: 0.8rem;
  185.         color: #88a5c4;
  186.       }
  187.       .zuixin-article {
  188.         display: flex;
  189.         flex-flow: column nowrap;
  190.         justify-content: space-evenly;
  191.       }
  192.       .zuowen {
  193.         display: flex;
  194.         background-color: #fff;
  195.         margin: 12px;
  196.         justify-content: space-between;
  197.       }
  198.       .zuowen > a > img {
  199.         width: 35vw;
  200.         height: 65px;
  201.         padding: 10px;
  202.       }
  203.       .zuowen > div {
  204.         display: flex;
  205.         flex-flow: column nowrap;
  206.         justify-content: space-evenly;
  207.         padding: 10px;
  208.       }
  209.       .zuowen > div > a:first-of-type {
  210.         font-weight: bold;
  211.         font-size: 0.9rem;
  212.       }
  213.       .zuowen > div > a:last-of-type {
  214.         font-size: 0.8rem;
  215.       }
  216.       .gengduo {
  217.         background-color: #fff;
  218.         height: 30px;
  219.         margin: 12px;
  220.         display: flex;
  221.         justify-content: center;
  222.         align-items: center;
  223.       }
  224.       .zuixin-bowen {
  225.         display: flex;
  226.         flex-flow: column nowrap;
  227.         justify-content: space-between;
  228.       }
  229.       .bowen {
  230.         display: flex;
  231.         flex-flow: row nowrap;
  232.         background-color: #fff;
  233.         height: 40px;
  234.         margin: 12px;
  235.         align-items: center;
  237.         justify-content: space-around;
  238.       }
  239.       .bowen > a:first-of-type {
  240.         font-weight: bold;
  241.       }
  242.       footer {
  243.         height: 50px;
  244.         background-color: #eeeeee;
  245.         display: flex;
  246.         justify-content: space-around;
  247.         position: fixed;
  248.         width: 100vw;
  249.         bottom: 0;
  250.         align-items: center;
  251.       }
  252.       footer > div {
  253.         display: flex;
  254.         flex-flow: column nowrap;
  255.         align-items: center;
  256.       }
  257.       footer > div > a:first-of-type > span {
  258.         font-size: 1.4rem;
  259.       }
  260.     </style>
  261.   </head>
  262.   <body>
  263.     <!-- 页眉 -->
  264.     <header>
  265.       <a href=""><span class="iconfont"></span></a>
  266.       <a href=""><img src="img/logo.png" alt="" /></a>
  267.       <a href=""><span class="iconfont"></span></a>
  268.     </header>
  269.     <!-- 轮播图 -->
  270.     <div class="slider">
  271.       <img src="img/2.jpg" alt="" />
  272.     </div>
  273.     <!-- 导航 -->
  274.     <nav>
  275.       <div>
  276.         <a href=""><img src="img/html.png" alt="" /></a>
  277.         <a href="">HTML/CSS</a>
  278.       </div>
  279.       <div>
  280.         <a href=""><img src="img/JavaScript.png" alt="" /></a>
  281.         <a href="">JacaScript</a>
  282.       </div>
  283.       <div>
  284.         <a href=""><img src="img/code.png" alt="" /></a>
  285.         <a href="">服务端</a>
  286.       </div>
  287.       <div>
  288.         <a href=""><img src="img/sql.png" alt="" /></a>
  289.         <a href="">数据库</a>
  290.       </div>
  291.       <div>
  292.         <a href=""><img src="img/app.png" alt="" /></a>
  293.         <a href="">移动端</a>
  294.       </div>
  295.       <div>
  296.         <a href=""><img src="img/manual.png" alt="" /></a>
  297.         <a href="">手册</a>
  298.       </div>
  299.       <div>
  300.         <a href=""><img src="img/tool2.png" alt="" /></a>
  301.         <a href="">工具</a>
  302.       </div>
  303.       <div>
  304.         <a href=""><img src="img/live.png" alt="" /></a>
  305.         <a href="">直播</a>
  306.       </div>
  307.     </nav>
  308.     <!-- 推荐课程 -->
  309.     <h3>推荐课程</h3>
  310.     <div class="tuijian-course">
  311.       <div>
  312.         <img src="img/tianlong.jpg" alt="" />
  313.         <img src="img/tianlong2.jpg" alt="" />
  314.       </div>
  315.       <div>
  316.         <img src="img/30.jpg" alt="" />
  317.         <div>
  318.           <a href="">CI框架30分钟极速入门</a>
  319.           <a href=""><span>中级</span>61401次播放</a>
  320.         </div>
  321.       </div>
  322.       <div>
  323.         <img src="img/30.jpg" alt="" />
  324.         <div>
  325.           <a href="">CI框架30分钟极速入门</a>
  326.           <a href=""><span>中级</span>61401次播放</a>
  327.         </div>
  328.       </div>
  329.     </div>
  330.     <!-- 最新更新 -->
  331.     <h3>最新更新</h3>
  332.     <div class="zuixin">
  333.       <div class="tuwen">
  334.         <a href=""><img src="img/excel.png" alt="" /></a>
  335.         <div class="miaoshu">
  336.           <a href="">php快速操控EXcel之P...</a>
  337.           <a>老的phpexcel已经停止更新了!目...</a>
  338.           <div>
  339.             <span>中级</span>
  340.             <span>49862次播放</span>
  341.           </div>
  342.         </div>
  343.       </div>
  344.       <div class="tuwen">
  345.         <a href=""><img src="img/excel.png" alt="" /></a>
  346.         <div class="miaoshu">
  347.           <a href="">php快速操控EXcel之P...</a>
  348.           <a>老的phpexcel已经停止更新了!目...</a>
  349.           <div>
  350.             <span>中级</span>
  351.             <span>49862次播放</span>
  352.           </div>
  353.         </div>
  354.       </div>
  355.       <div class="tuwen">
  356.         <a href=""><img src="img/excel.png" alt="" /></a>
  357.         <div class="miaoshu">
  358.           <a href="">php快速操控EXcel之P...</a>
  359.           <a>老的phpexcel已经停止更新了!目...</a>
  360.           <div>
  361.             <span>中级</span>
  362.             <span>49862次播放</span>
  363.           </div>
  364.         </div>
  365.       </div>
  366.       <div class="tuwen">
  367.         <a href=""><img src="img/excel.png" alt="" /></a>
  368.         <div class="miaoshu">
  369.           <a href="">php快速操控EXcel之P...</a>
  370.           <a>老的phpexcel已经停止更新了!目...</a>
  371.           <div>
  372.             <span>中级</span>
  373.             <span>49862次播放</span>
  374.           </div>
  375.         </div>
  376.       </div>
  377.       <div class="tuwen">
  378.         <a href=""><img src="img/excel.png" alt="" /></a>
  379.         <div class="miaoshu">
  380.           <a href="">php快速操控EXcel之P...</a>
  381.           <a>老的phpexcel已经停止更新了!目...</a>
  382.           <div>
  383.             <span>中级</span>
  384.             <span>49862次播放</span>
  385.           </div>
  386.         </div>
  387.       </div>
  388.       <div class="tuwen">
  389.         <a href=""><img src="img/excel.png" alt="" /></a>
  390.         <div class="miaoshu">
  391.           <a href="">php快速操控EXcel之P...</a>
  392.           <a>老的phpexcel已经停止更新了!目...</a>
  393.           <div>
  394.             <span>中级</span>
  395.             <span>49862次播放</span>
  396.           </div>
  397.         </div>
  398.       </div>
  399.     </div>
  400.     <!-- 最新文章 -->
  401.     <h3>最新文章</h3>
  402.     <div class="zuixin-article">
  403.       <div class="zuowen">
  404.         <div>
  405.           <a href="">如何在linux环境下安装docker</a>
  406.           <a href="">发布时间:2020-04-14</a>
  407.         </div>
  408.         <a href=""><img src="img/qie.jpg" alt="" /></a>
  409.       </div>
  410.       <div class="zuowen">
  411.         <div>
  412.           <a href="">如何在linux环境下安装docker</a>
  413.           <a href="">发布时间:2020-04-14</a>
  414.         </div>
  415.         <a href=""><img src="img/qie.jpg" alt="" /></a>
  416.       </div>
  417.       <div class="zuowen">
  418.         <div>
  419.           <a href="">如何在linux环境下安装docker</a>
  420.           <a href="">发布时间:2020-04-14</a>
  421.         </div>
  422.         <a href=""><img src="img/qie.jpg" alt="" /></a>
  423.       </div>
  424.       <div class="zuowen">
  425.         <div>
  426.           <a href="">如何在linux环境下安装docker</a>
  427.           <a href="">发布时间:2020-04-14</a>
  428.         </div>
  429.         <a href=""><img src="img/qie.jpg" alt="" /></a>
  430.       </div>
  431.       <div class="zuowen">
  432.         <div>
  433.           <a href="">如何在linux环境下安装docker</a>
  434.           <a href="">发布时间:2020-04-14</a>
  435.         </div>
  436.         <a href=""><img src="img/qie.jpg" alt="" /></a>
  437.       </div>
  438.     </div>
  439.     <div class="gengduo">
  440.       <a href="">更多内容</a>
  441.     </div>
  442.     <!-- 最新博文 -->
  443.     <h3>最新博文</h3>
  444.     <div class="zuixin-bowen">
  445.       <div class="bowen">
  446.         <a href="">phpstrom安装PHPUnit-9单元测试</a>
  447.         <a href="">2020-04-14</a>
  448.       </div>
  449.       <div class="bowen">
  450.         <a href="">phpstrom安装PHPUnit-9单元测试</a>
  451.         <a href="">2020-04-14</a>
  452.       </div>
  453.       <div class="bowen">
  454.         <a href="">phpstrom安装PHPUnit-9单元测试</a>
  455.         <a href="">2020-04-14</a>
  456.       </div>
  457.       <div class="bowen">
  458.         <a href="">phpstrom安装PHPUnit-9单元测试</a>
  459.         <a href="">2020-04-14</a>
  460.       </div>
  461.       <div class="bowen">
  462.         <a href="">phpstrom安装PHPUnit-9单元测试</a>
  463.         <a href="">2020-04-14</a>
  464.       </div>
  465.     </div>
  466.     <div class="gengduo">
  467.       <a href="">更多内容</a>
  468.     </div>
  469.     <!-- 最新问答 -->
  470.     <h3>最新问答</h3>
  471.     <div class="zuixin-bowen">
  472.       <div class="bowen">
  473.         <a href="">请教Think PHP安装问题</a>
  474.         <a href="">2020-04-14</a>
  475.       </div>
  476.       <div class="bowen">
  477.         <a href="">请教Think PHP安装问题</a>
  478.         <a href="">2020-04-14</a>
  479.       </div>
  480.       <div class="bowen">
  481.         <a href="">请教Think PHP安装问题</a>
  482.         <a href="">2020-04-14</a>
  483.       </div>
  484.       <div class="bowen">
  485.         <a href="">请教Think PHP安装问题</a>
  486.         <a href="">2020-04-14</a>
  487.       </div>
  488.       <div class="bowen">
  489.         <a href="">请教Think PHP安装问题</a>
  490.         <a href="">2020-04-14</a>
  491.       </div>
  492.     </div>
  493.     <div class="gengduo">
  494.       <a href="">更多内容</a>
  495.     </div>
  496.     <!-- 页脚 -->
  497.     <footer>
  498.       <div>
  499.         <a href=""><span class="iconfont"></span></a>
  500.         <a href="">首页</a>
  501.       </div>
  502.       <div>
  503.         <a href=""><span class="iconfont"></span></a>
  504.         <a href="">视频</a>
  505.       </div>
  506.       <div>
  507.         <a href=""><span class="iconfont"></span></a>
  508.         <a href="">社区</a>
  509.       </div>
  510.       <div>
  511.         <a href=""><span class="iconfont"></span></a>
  512.         <a href="">我的</a>
  513.       </div>
  514.     </footer>
  515.   </body>
  516. </html>

效果图

上一条：Go基本语法下一条：Go环境安装、配置
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多