search

博客列表 >使用flex弹性盒子模拟布局移动端首页

使用flex弹性盒子模拟布局移动端首页

Neo( -᷅_-᷄ )
Neo( -᷅_-᷄ )原创
2020年04月12日 09:39:18631浏览

演示地址：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>
上一条：用js将简体转换为繁体下一条：简单了解PHP文件上传相关知识
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多