Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 使用flex弹性盒子模拟布局移动端首页
Blogger Information
Blog 4
fans 0
comment 1
visits 2299
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
使用flex弹性盒子模拟布局移动端首页
Neo( -᷅_-᷄ )
Original
632 people have browsed it

演示地址：http://php.xmkuyue.com/zuoye/mphp.html
html示例代码：

  1. <!DOCTYPE html>
  2. <html lang="ch-zn">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <link rel="stylesheet" href="./static/css2/font-icon.css" />
  7.     <link rel="icon" href="./static/img/logo.png">
  8.     <title>php中文网移动端首页</title>
  9.   </head>
  10.   <style>
  11.     /* 初始化 */
  12.     * {
  13.       margin: 0;
  14.       padding: 0;
  15.     }
  17.     a {
  18.       text-decoration: none;
  19.       color: #888;
  20.     }
  22.     html {
  23.       width: 100vw;
  24.       height: 100vh;
  25.       font-size: 14px;}
  27.     body {
  28.       min-width: 360px;
  29.       background-color: #EDEFF0;
  30.       display: flex;
  31.       flex-flow: column nowrap;
  32.     }
  33.     /* 页眉 */
  34.     body > header {
  35.       background-color: #2d353c;
  36.       color: white;
  37.       height: 40px;
  38.       display: flex;
  39.       justify-content: space-between;
  40.       align-items: center;
  41.       padding: 0 15px;
  42.       position: fixed;
  43.       width: 94vw;
  44.     }
  45.     header > .iconfont {
  46.       font-size: 1.5rem;
  47.     }
  48.     /* 轮播图 */
  49.     body > .slider {
  50.       height: 180px;
  51.     }
  52.     body > .slider >img {
  53.       width: 100%;
  54.       margin-top: 40px;
  55.     }
  56.     /* 主导航区 */
  57.     nav {
  58.       height: 170px;
  59.       display: flex;
  60.       flex-flow: row wrap;
  61.       background-color: white;
  62.       box-sizing: border-box;
  63.       margin-bottom: 10px;
  64.     }
  65.     nav > div {
  66.       width: 25vw;
  67.       display: flex;
  68.       flex-flow: column nowrap;
  69.       align-items: center;
  70.       font-size: 0.9rem;
  71.     }
  72.     nav > div > a:first-of-type {
  73.       text-align: center;
  74.     }
  76.     nav > div img {
  77.       width: 50%;
  78.       margin-top: 10px;
  79.     }
  80.     /* 推荐课程 */
  81.     /* 标题 */
  82.     .title {
  83.       font-size: 1.3rem;
  84.       color: #888;
  85.       padding-left: 10px;
  86.       margin-top: 25px;
  87.       box-sizing: border-box;
  88.     }
  89.     /* 轮播图 */
  90.     .r-banner {
  91.       margin-top: 6px;
  92.       display: flex;
  93.     }
  94.     .r-banner > a > img {
  95.       width: 50vw;
  96.       padding: 5px;
  97.       box-sizing: border-box;
  98.     }
  99.     /* 推荐课程第二部分 */
  100.     .r-course {
  101.       background-color: white;
  102.       margin: 15px 10px 10px;
  103.       display: flex;
  104.       flex-flow: column nowrap;
  105.     }
  106.     .r-course-desc > a > img {
  107.       width: 40vw;
  108.     }
  109.     .r-course-desc {
  110.       display: flex;
  111.       margin: 10px;
  112.     }
  113.     .r-course-desc > a:last-of-type {
  114.       padding-left: 10px;
  115.       font-size: 1.1rem;
  116.     }
  117.     /* 最新更新 */
  118.     .new-course {
  119.       display: flex;
  120.       flex-flow: column nowrap;
  121.       margin:10px 10px 0;
  122.     }
  123.     .n-course {
  124.       display: flex;
  125.       flex-flow: row nowrap;
  126.       margin-bottom:10px;
  127.       padding: 10px;
  128.       background-color: white;
  129.     }
  130.     .n-course > a > img {
  131.       width: 40vw;
  132.     }
  133.     .n-course-desc {
  134.       display: flex;
  135.       flex-flow: column nowrap;
  136.       padding-left: 10px;
  137.     }
  138.     .n-course-desc > a:last-of-type{
  139.       font-size: 0.8rem;
  140.       padding-top: 15px;
  141.     }
  143.     /* 最新文章 */
  144.     .new-article {
  145.       display: flex;
  146.       flex-flow: column nowrap;
  147.       margin: 10px;
  148.     }
  149.     .n-article > a > img {
  150.       width: 25vw;
  151.       height: 10vh;
  153.     }
  154.     .n-article {
  155.       background-color: white;
  156.       margin-bottom: 10px;
  157.       padding: 10px 10px 10px;
  158.       display: flex;
  160.     }
  161.     .new-article-desc {
  162.       display: flex;
  163.       flex-flow: column nowrap;
  164.       width: 65vw;
  165.       height: 80px;
  166.     }
  167.     .new-article-desc > a:last-of-type {
  168.       font-size: 0.8rem;
  169.       margin-top: 10px;
  170.     }
  171.     /* 最新博文 */
  172.     .bowen {
  173.       display: flex;
  174.       flex-flow: column nowrap;
  175.     }
  176.     .desc {
  177.       display: flex;
  178.       background-color: white;
  179.       margin: 10px 10px 0;
  180.       height: 35px;
  181.       justify-content: space-between;
  182.       padding: 10px;
  183.     }
  184.     /* 最新问答 */
  185.     .answer {
  186.       display: flex;
  187.       flex-flow: column nowrap;
  188.     }
  189.     .answerdesc {
  190.       display: flex;
  191.       background-color: white;
  192.       margin: 10px 10px 0;
  193.       height: 35px;
  194.       justify-content: space-between;
  195.       padding: 10px;
  196.     }
  197.     .answerdesc:last-of-type {
  198.       margin-bottom: 60px;
  199.     }
  201.     /* 底部菜单 */
  202.     footer {
  203.       display: flex;
  204.       justify-content: space-around;
  205.       background-color: #EDEFF0;
  206.       width: 100vw;
  207.       height: 50px;
  208.       position:fixed;
  209.       bottom: 0;
  210.       align-items: center;
  211.       border-top: 1px solid #8888;
  212.     }
  213.     .downnav {
  214.       display: flex;
  215.       flex-flow: column nowrap;
  216.       text-align: center;
  217.       font-size: 1.1rem;
  218.     }
  219.     .downnav > a:hover {
  220.       color: coral;
  221.     }
  223.     .iconfont {
  224.       font-size: 1.5rem;
  225.     }
  228.   </style>
  229.   <body>
  230.     <!-- 页眉 -->
  231.     <header>
  232.       <span class="iconfont"> &#xe620;</span>
  233.       <a href=""><img src="./static/img/logo.png" alt="" width="100" /></a>
  234.       <span class="iconfont"> &#xe67c;</span>
  235.     </header>
  237.     <!-- 轮播图 -->
  238.     <div class="slider">
  239.       <img src="./static/img/banner1.jpg" alt=""  />
  240.     </div>
  242.     <!-- 主导航区 -->
  243.     <nav>
  244.       <div>
  245.         <a href=""><img src="./static/img/nav1.png" alt="" /></a>
  246.         <a href="">HTML/CSS</a>
  247.       </div>
  248.       <div>
  249.         <a href=""><img src="./static/img/nav2.png" alt="" /></a>
  250.         <a href="">JavaScript</a>
  251.       </div>
  252.       <div>
  253.         <a href=""><img src="./static/img/nav3.png" alt="" /></a>
  254.         <a href="">服务端</a>
  255.       </div>
  256.       <div>
  257.         <a href=""><img src="./static/img/nav4.png" alt="" /></a>
  258.         <a href="">数据库</a>
  259.       </div>
  260.       <div>
  261.         <a href=""><img src="./static/img/nav5.png" alt="" /></a>
  262.         <a href="">移动端</a>
  263.       </div>
  264.       <div>
  265.         <a href=""><img src="./static/img/nav6.png" alt="" /></a>
  266.         <a href="">手册</a>
  267.       </div>
  268.       <div>
  269.         <a href=""><img src="./static/img/nav7.png" alt="" /></a>
  270.         <a href="">工具</a>
  271.       </div>
  272.       <div>
  273.         <a href=""><img src="./static/img/nav8.png" alt="" /></a>
  274.         <a href="">直播</a>
  275.       </div>
  276.     </nav>
  278.     <!-- 推荐课程 -->
  279.     <h2 class="title">推荐课程</h2>
  280.     <div class="recommend">
  281.       <div class="r-banner">
  282.         <a href=""><img src="./static/img/r-banner1.jpg" alt="" /></a>
  283.         <a href=""><img src="./static/img/r-banner2.jpg" alt="" /></a>
  284.       </div>
  285.       <div class="r-course">
  286.         <div class="r-course-desc">
  287.           <a href=""><img src="./static/img/r-course1.jpg" alt="" /></a>
  288.           <a href="">CI框架30分钟极速入门</a>
  289.         </div>
  290.       </div>
  292.       <div class="r-course">
  293.         <div class="r-course-desc">
  294.           <a href=""><img src="./static/img/r-course2.jpg" alt="" /></a>
  295.           <a href="">2018前端入门_HTML5</a>
  296.         </div>
  297.       </div>
  300.     </div>
  302.     <!-- 最新更新 -->
  303.     <h2 class="title">最新更新</h2>
  304.     <div class="new-course">
  305.       <div class="n-course">
  306.           <a href=""><img src="./static/img/n-course1.png" alt="" /></a>
  307.           <div class="n-course-desc"> 
  308.           <a href="">PHP快速操控Excel</a>
  309.           <a href="">老的PHPExcel已经停止更新了！</a>
  310.         </div>
  311.         </div>
  312.         <div class="n-course">
  313.           <a href=""><img src="./static/img/n-course2.png" alt="" /></a>
  314.           <div class="n-course-desc"> 
  315.           <a href="">PHP快速操控Excel</a>
  316.           <a href="">老的PHPExcel已经停止更新了！</a>
  317.         </div>
  318.         </div>
  319.         <div class="n-course">
  320.           <a href=""><img src="./static/img/n-course3.png" alt="" /></a>
  321.           <div class="n-course-desc"> 
  322.           <a href="">PHP快速操控Excel</a>
  323.           <a href="">老的PHPExcel已经停止更新了！</a>
  324.         </div>
  325.         </div>
  326.         <div class="n-course">
  327.           <a href=""><img src="./static/img/n-course4.png" alt="" /></a>
  328.           <div class="n-course-desc"> 
  329.           <a href="">PHP快速操控Excel</a>
  330.           <a href="">老的PHPExcel已经停止更新了！</a>
  331.         </div>
  332.         </div>
  333.         <div class="n-course">
  334.           <a href=""><img src="./static/img/n-course5.png" alt="" /></a>
  335.           <div class="n-course-desc"> 
  336.           <a href="">PHP快速操控Excel</a>
  337.           <a href="">老的PHPExcel已经停止更新了！</a>
  338.         </div>
  339.         </div>
  340.         <div class="n-course">
  341.           <a href=""><img src="./static/img/n-course6.png" alt="" /></a>
  342.           <div class="n-course-desc"> 
  343.           <a href="">PHP快速操控Excel</a>
  344.           <a href="">老的PHPExcel已经停止更新了！</a>
  345.         </div>
  346.         </div>
  347.         </div>
  349.     <!-- 最新文章 -->
  350.     <h2 class="title">最新文章</h2>
  351.     <div class="new-article">
  352.       <div class="n-article"> 
  353.         <div class="new-article-desc"> 
  354.         <a href="">为什么我的电脑只有C盘</a>
  355.         <a href="">发布时间：2020-04-11</a>
  356.         </div>
  357.         <a href=""><img src="./static/img/n-article1.jpg" alt="" /></a>
  358.       </div>
  359.       <div class="n-article"> 
  360.         <div class="new-article-desc"> 
  361.         <a href="">为什么我的电脑只有C盘</a>
  362.         <a href="">发布时间：2020-04-11</a>
  363.         </div>
  364.         <a href=""><img src="./static/img/n-article2.jpg" alt="" /></a>
  365.       </div>
  366.       <div class="n-article"> 
  367.         <div class="new-article-desc"> 
  368.         <a href="">为什么我的电脑只有C盘</a>
  369.         <a href="">发布时间：2020-04-11</a>
  370.         </div>
  371.         <a href=""><img src="./static/img/n-article3.jpg" alt="" /></a>
  372.       </div>
  373.       <div class="n-article"> 
  374.         <div class="new-article-desc"> 
  375.         <a href="">为什么我的电脑只有C盘</a>
  376.         <a href="">发布时间：2020-04-11</a>
  377.         </div>
  378.         <a href=""><img src="./static/img/n-article4.jpg" alt="" /></a>
  379.       </div>
  380.       <div class="n-article"> 
  381.         <div class="new-article-desc"> 
  382.         <a href="">为什么我的电脑只有C盘</a>
  383.         <a href="">发布时间：2020-04-11</a>
  384.         </div>
  385.         <a href=""><img src="./static/img/n-article5.jpg" alt="" /></a>
  386.       </div>
  387.     </div>
  389.     <!-- 最新博文 -->
  390.     <h2 class="title">最新博文</h2>
  391.     <div class="bowen">
  392.       <div class="desc">
  393.          <a href=""><strong>thinkphp5.6源码阅读1</strong></a>
  394.          <a href="">2020-04-11</a>
  395.       </div>
  396.       <div class="desc">
  397.         <a href=""><strong>thinkphp5.6源码阅读1</strong></a>
  398.         <a href="">2020-04-11</a>
  399.      </div>
  400.      <div class="desc">
  401.       <a href=""><strong>thinkphp5.6源码阅读1</strong></a>
  402.       <a href="">2020-04-11</a>
  403.    </div>
  404.    <div class="desc">
  405.     <a href=""><strong>thinkphp5.6源码阅读1</strong></a>
  406.     <a href="">2020-04-11</a>
  407.  </div>
  408.  <div class="desc">
  409.   <a href=""><strong>thinkphp5.6源码阅读1</strong></a>
  410.   <a href="">2020-04-11</a>
  411. </div>
  412. </div>
  414.     <!-- 最新问答 -->
  415.     <h2 class="title">最新问答</h2>
  416.       <div class="answer">
  417.         <div class="answerdesc">
  418.            <a href=""><strong>thinkphp5.6源码阅读1</strong></a>
  419.            <a href="">2020-04-11</a>
  420.         </div>
  421.         <div class="answerdesc">
  422.           <a href=""><strong>thinkphp5.6源码阅读1</strong></a>
  423.           <a href="">2020-04-11</a>
  424.        </div>
  425.        <div class="answerdesc">
  426.         <a href=""><strong>thinkphp5.6源码阅读1</strong></a>
  427.         <a href="">2020-04-11</a>
  428.      </div>
  429.      <div class="answerdesc">
  430.       <a href=""><strong>thinkphp5.6源码阅读1</strong></a>
  431.       <a href="">2020-04-11</a>
  432.    </div>
  433.    <div class="answerdesc">
  434.     <a href=""><strong>thinkphp5.6源码阅读1</strong></a>
  435.     <a href="">2020-04-11</a>
  436.   </div>
  437. </div>
  439.     <footer>
  440.       <div class="downnav">
  441.         <span class="iconfont">&#xe723;</span>
  442.         <a href="">首页</a>
  443.       </div>
  444.       <div class="downnav">
  445.         <span class="iconfont">&#xe750;</span>
  446.         <a href="">视频</a>
  447.       </div>
  448.       <div class="downnav">
  449.         <span class="iconfont">&#xe67e;</span>
  450.         <a href="">社区</a>
  451.       </div>
  452.       <div class="downnav">
  453.         <span class="iconfont">&#xe602;</span>
  454.         <a href="">我的</a>
  455.       </div>
  456.     </footer>
  457.   </body>
  458. </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