Community Learn Tools Library Leisure
search
English
Home > List of blog posts > web页集合弹性盒子,精灵图,flex布局,grid布局实现移动端首页
Blogger Information
Blog 56
fans 1
comment 0
visits 62501
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
web页集合弹性盒子,精灵图,flex布局,grid布局实现移动端首页
零龙
Original
815 people have browsed it

web页集合弹性盒子,精灵图,flex布局,grid布局实现移动端首页

源码：

  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="font/iconfont.css" />
  7.     <title>移动端首页</title>
  8.   </head>
  9.   <script src="js/loading.js"></script>
  10.   <style>
  11.     * {
  12.       margin: 0;
  13.       padding: 0;
  14.       box-sizing: border-box;
  15.       font-size: 15px;
  16.     }
  17.     a {
  18.       text-decoration: none;
  19.       color: rgb(173, 208, 255);
  20.     }
  21.     body {
  22.       background: #eee;
  23.       width: 100%;
  24.       max-width: 10rem;
  25.       position: relative;      
  26.       margin: 0 auto;
  27.     }
  28.     header {
  29.       height: 0.8rem;
  30.       display: -webkit-box;
  31.       display: -moz-box;
  32.       padding: 0.2;
  33.       position: relative;
  34.       background: rgb(255, 255, 255);
  35.       display: flex;
  36.       flex-flow: row nowrap;
  37.       text-align: center;
  38.     }
  39.     header a:first-of-type {
  40.       width: 2rem;
  41.       line-height: 0.8rem;
  42.       display: block;
  43.       -moz-box-flex: 0;
  44.       position: relative;
  45.       color: green;
  46.     }
  47.     header a:first-of-type span {
  48.       font-size: 0.3rem;
  49.     }
  50.     header a:nth-of-type(2) {
  51.       width: 7.4rem;
  52.       line-height: 0.8rem;
  53.     }
  54.     header a:nth-of-type(2) input {
  55.       width: 6.5rem;
  56.       height: 0.6rem;
  57.       background: #f2f2f2;
  58.       border-radius: 0.1rem;
  59.       border: 0rem;
  60.       padding-left: 0.1rem;
  61.       color: #666;
  62.       font-size: 0.25rem;
  63.     }
  64.     header a:nth-of-type(2) button {
  65.       background: #f2f2f2;
  66.       height: 0.6rem;
  67.       border-radius: 0.1rem;
  68.       position: relative;
  69.       right: 0.5rem;
  70.       border: 0rem;
  71.     }
  72.     header a:last-of-type {
  73.       width: 1rem;
  74.     }
  75.     header a:last-of-type span {
  76.       font-size: 0.5rem;
  77.       line-height: 0.8rem;
  78.       -webkit-font-size: 0.6rem;
  79.     }
  80.     .top {
  81.       width: 100%;
  82.       max-width: 10rem;
  84.       background: url("http://www.situcms.com/uploads/2018/1023/a65fb1e2acaa597e80e6fd753e4363b4.jpg")
  85.         no-repeat;
  86.      background-size:10rem 3.6rem ;
  87.       height: 3.6rem;
  89.     }
  90.     .nav {
  91.       width: 100%;
  92.       max-width: 10rem;
  93.       height: 3.5rem;
  94.       background: #fff;
  95.       padding: 0.3rem;
  96.       margin-top: 0.01rem;
  98.     }
  99.     .nav > ul {
  100.       max-width: 10rem;
  101.       list-style: none;
  102.       display: flex;
  103.       justify-content: space-evenly;
  104.       flex-flow: row wrap;
  105.       text-align: center;
  106.     }
  107.     .nav > ul > li {
  108.       width: 1.8rem;
  109.       height: 1.5rem;
  110.     }
  111.     .nav > ul > li:first-of-type > span {
  112.       background: url("image/tb.png") no-repeat;
  113.       background-size: 0.75rem 7rem;
  114.       background-position: -2px -37px;
  115.       width: 0.7rem;
  116.       height: 0.7rem;
  117.       display: inline-block;
  118.     }
  119.     .nav > ul > li:nth-of-type(2) > span {
  120.       background: url("image/tb.png") no-repeat;
  121.       background-size: 0.75rem 7rem;
  122.       background-position: -2px 1px;
  123.       width: 0.7rem;
  124.       height: 0.7rem;
  125.       display: inline-block;
  126.     }
  127.     .nav > ul > li:nth-of-type(3) > span {
  128.       background: url("image/tb.png") no-repeat;
  129.       background-size: 0.75rem 7rem;
  130.       background-position: -2px -76px;
  131.       width: 0.7rem;
  132.       height: 0.7rem;
  133.       display: inline-block;
  134.     }
  135.     .nav > ul > li:nth-of-type(4) > span {
  136.       background: url("image/tb.png") no-repeat;
  137.       background-size: 0.75rem 7rem;
  138.       background-position: -2px -114px;
  139.       width: 0.7rem;
  140.       height: 0.7rem;
  141.       display: inline-block;
  142.     }
  143.     .nav > ul > li:nth-of-type(5) > span {
  144.       background: url("image/tb.png") no-repeat;
  145.       background-size: 0.75rem 7rem;
  146.       background-position: -2px -152px;
  147.       width: 0.7rem;
  148.       height: 0.7rem;
  149.       display: inline-block;
  150.     }
  151.     .nav > ul > li:nth-of-type(6) > span {
  152.       background: url("image/tb.png") no-repeat;
  153.       background-size: 0.75rem 7rem;
  154.       background-position: -2px -191px;
  155.       width: 0.7rem;
  156.       height: 0.7rem;
  157.       display: inline-block;
  158.     }
  159.     .nav > ul > li:nth-of-type(7) > span {
  160.       background: url("image/tb.png") no-repeat;
  161.       background-size: 0.75rem 7rem;
  162.       background-position: -2px -229px;
  163.       width: 0.7rem;
  164.       height: 0.7rem;
  165.       display: inline-block;
  166.     }
  167.     .nav > ul > li:nth-of-type(8) > span {
  168.       background: url("image/tb.png") no-repeat;
  169.       background-size: 0.75rem 7rem;
  170.       background-position: -2px -268px;
  171.       width: 0.7rem;
  172.       height: 0.7rem;
  173.       display: inline-block;
  174.     }
  175.     .nav > ul > li:nth-of-type(9) > span {
  176.       background: url("image/tb.png") no-repeat;
  177.       background-size: 0.75rem 7rem;
  178.       background-position: -2px -306px;
  179.       width: 0.7rem;
  180.       height: 0.7rem;
  181.       display: inline-block;
  182.     }
  183.     .nav > ul > li:last-of-type > span {
  184.       background: url("image/tb.png") no-repeat;
  185.       background-size: 0.75rem 7rem;
  186.       background-position: -2px -344px;
  187.       width: 0.7rem;
  188.       height: 0.7rem;
  189.       display: inline-block;
  190.     }
  191.     .nav > ul > li > a {
  192.       float: left;
  193.       width: 100%;
  194.       font-size: 0.3rem;
  195.       color: #666;
  196.     }
  197.     .container{
  198.       width: 100%;
  199.       height: 4.8rem;
  200.       margin-top: 0.01rem;
  201.       background: #fff;
  202.       display: grid;
  203.       grid-template-columns:4rem 5.7rem;
  204.       grid-template-rows:2.2rem 2.2rem;
  205.       place-items:center;
  206.       gap:0.1rem; 
  207.       padding: 0.1rem;
  208.     }
  210.     .container a:first-of-type{
  211.         background:url("http://www.situcms.com/uploads/2018/1023/b66a15f2b65535057b87d60455544890.jpg");
  212.         background-size: 4rem 2.2rem;
  213.         width: 4rem;
  214.         height: 2.2rem;
  215.     }
  216.     .container  a:hover{
  217.         box-shadow: 0px 0px 0.1rem rgba(53, 53, 53, 0.712);
  218.     }
  219.     .container a:nth-of-type(2){
  220.         background: #666;
  221.         grid-row: span 2;
  222.         background: url("image/timg.jpg");
  223.         background-size: 5.6rem 4.5rem;
  224.         width: 5.6rem;
  225.         height: 4.5rem;
  226.     }
  227.     .container a:nth-of-type(3){
  229.              background:url("image/0.jpg");
  230.         background-size: 4rem 2.2rem;
  231.         width: 4rem;
  232.         height: 2.2rem;
  234.     }
  235.     .c-nav{
  236.         width: 100%;
  237.         height: 5rem;
  238.         background: #fff;
  239.         margin-top: 0.01rem;
  240.     }
  241.     .c-nav ul{
  242.         list-style: none;
  243.         display: grid;
  244.         grid-template-columns:repeat(3,3rem) ;
  245.         grid-template-rows:repeat(5,1rem);
  246.         place-content: center;
  247.         text-align: center;
  248.     }
  249.     .c-nav ul li{
  250.          color: #666;   
  252.     }
  253.     .c-nav ul li:first-of-type{       
  254.         grid-column:span 3;
  255.         line-height: 0.8rem;
  256.         font-size: 0.33rem;     
  258.     }
  259.      .c-nav ul li:first-of-type i{       
  260.         margin-left: 0.1rem;
  261.         margin-right: 0.1rem;
  262.         line-height: 1.1rem;
  263.         color:#999;
  264.     }
  265.         .c-nav ul li a{ 
  266.         border: 1px solid #ccc;
  267.         line-height: 0.7rem;
  268.         color:#999;
  269.         width: 2.5rem;
  270.         height: 0.7rem;
  271.         display:inline-block;
  272.         margin-top: 0.05rem;
  274.     }
  275.      .c-nav ul li a:hover{ 
  276.        box-shadow: 0rem 0rem 0.05rem rgba(53, 53, 53, 0.712);
  278.     }
  279.      .c-nav ul li:last-of-type{
  280.          grid-column: span 3;
  281.          line-height: 0.8rem;
  282.          font-size: 0.33rem;   
  283.          border-top: 0.01rem solid #ccc;
  284.      }
  285.      .c-nav ul li:last-of-type a{
  286.          border: 0;
  287.          color:yellowgreen;
  288.      }
  289.      .c-nav ul li:last-of-type a:hover{
  290.         box-shadow:0 0 0;
  291.      }
  292.      .c-nav ul li:last-of-type a span{
  293.         font-size: 0.2rem;
  294.         margin-left: 0.1rem;
  295.      }
  296.      .c-r{
  297.          width: 100%;
  298.          margin-top: 0.05rem;
  299.          background: #fff;
  301.      }
  302.      .c-r .c-rt{
  304.          height: 0.8rem;
  305.          line-height: 0.8rem;
  306.          color: red;
  307.          padding-left: 0.3rem;
  308.          font-size: 0.3rem;
  309.      }
  310.     .c-r > .c-rc{
  311.          padding: 0.1rem;        
  312.          width: 90%;    
  313.          margin: 0 auto;   
  314.          position: relative;
  316.      }
  317.      .c-rc > .c-rc1{
  318.          background-image: linear-gradient(0deg, #eee, #fff); 
  319.          height: 3.5rem;
  320.          text-align: center;      
  321.          padding: 0.2rem;    
  323.      }  
  324.     .c-rc >.c-rc1 > img{
  325.          border: 0rem;
  326.          width: 7rem;         
  327.          display:inline-block;
  329.      }   
  330.      .c-rc > .c-rc2{
  331.          height: 0.8rem;
  332.          line-height: 0.8rem;
  333.          color:#fff;
  334.          padding-left: 0.3rem;
  335.          font-size: 0.3rem;
  336.          width:98%;
  337.          position: absolute;
  338.          top:2.5rem;
  339.          background: rgba(34, 34, 34, 0.363);
  340.      }
  341.       .c-rc > .c-rc2 a{
  342.           color: #fff;
  343.       }
  344.      .c-rc3{
  345.          width: 100%;
  346.          height: 2rem;   
  347.          list-style: none;  
  348.          margin-top: 0.2rem;  
  350.      }
  351.      .c-rc3 a{
  352.          width: 4rem;
  353.          height: 2rem;
  354.          float: left;
  355.          margin: 0.1rem;
  356.          margin-bottom: 1rem;
  357.      }
  358.      .c-rc3 a img{
  359.          width: 4rem;
  360.          height: 2.3rem;
  361.          border-radius: 0.2rem;
  362.          box-shadow: 0 0 0.3rem rgba(53, 53, 53, 0.11);
  363.      }
  364.      .c-rc3 a span{
  365.         float: left;
  366.         white-space:nowrap;
  367.         text-overflow: ellipsis;
  368.         overflow: hidden;
  369.         width: 4rem;
  370.      }
  371.      .c-rf{
  372.          width: 100%;
  373.          background: #fff;
  374.          height: 1rem;        
  375.          line-height: 1rem;
  376.          text-align:center ;
  377.          overflow: hidden;
  378.          border-top: 0.01rem solid #eee;
  381.      }
  382.       .c-rf a{
  384.          color: goldenrod;
  385.         }
  386.      .c-rf span{
  387.          font-size: 0.2rem;
  388.      }
  389.     .c-f{
  390.         height: 1rem;
  391.         background: #fff;
  392.         margin-top: 0.01rem;
  394.     }
  395.     .c-f ul{
  396.         list-style: none;
  397.     }
  398.     .c-f ul li{
  399.         width: 3rem;
  400.         text-align: center;
  401.         line-height: 1rem;        
  402.         float: left;
  403.     }
  404.     .c-f ul li a{
  405.         color:green;
  406.         font-size: 0.33rem;
  408.     }
  409.     .c-f ul li:hover{
  410.         border-bottom: 0.05rem solid green;
  412.     }
  413.     .c-fc{
  414.         width: 100%;
  415.         float:left ;
  416.         position: relative;
  417.     }
  418.     .c-fc1{
  419.         width: 100%;
  420.         height: 4.5rem;
  421.         background: #ccc;
  422.         padding: 0.5rem;
  423.         text-align: center;
  425.     }
  426.     .c-fc1 i{
  427.         position: absolute;
  428.         background: rgba(0, 0, 0, 0.521);
  429.         width: 1.8rem;
  430.         height: 0.5rem;
  431.         top:0.3rem;
  432.         left: 1rem;
  433.         border-radius: 0.3rem;
  434.         text-align: left;
  435.         padding-left: 0.15rem;
  436.         line-height: 0.5rem;
  437.         color: #fff;
  438.         font-style: normal;
  439.     }
  440.     .c-fc1 strong{
  441.         position: absolute;
  442.         background:red;
  443.         top:3.5rem;
  444.         left: 0;
  445.         width: 1.5rem;
  446.         height: 0.8rem;
  447.         border-radius: 0 0.15rem 0.15rem 0;
  448.         font-size: 0.35rem;
  449.         line-height: 0.8rem;
  450.         color: lawngreen;
  451.         font-weight: normal;
  452.     }
  453.         .c-fc2{
  454.         width: 100%;
  455.         height: 1.6rem;
  456.         background: #fff;
  457.         padding: 0.1rem;
  458.          white-space:nowrap;
  459.         text-overflow: ellipsis;
  460.         overflow: hidden;
  461.         text-align: left; 
  462.     }
  463.     .c-fc21{
  464.         width: 100%;
  465.         font-size: 0.3rem;
  467.     }
  468.     .c-fc2 p{
  469.         font-size: 0.4rem;
  470.         color: #000;
  471.         width: 100%;
  472.     }   
  473.      .c-fc2 b{
  474.          width: 100%;
  475.         text-align:left;
  476.         color:steelblue;
  477.         font-size: 0.24rem;
  478.         font-weight: normal;
  480.      }
  481.        .c-fc2 i{
  482.            border: 0.01rem solid green;
  483.            font-size: 0.22rem;
  484.            color:tomato;
  485.            padding: 0.05rem;
  486.            float: left;
  487.            font-style: normal;
  488.            line-height: 0.20rem;
  489.            border-radius: 0.08rem;
  490.            margin-right: 0.05rem;
  491.            margin-top: 0.05rem;
  493.        }
  494.        .foot{
  495.          width: 100%;
  496.          height: 2.3rem;
  497.          margin-top: 0.05rem;
  498.          background-color: #fff;
  499.         display: flex;
  500.         flex-flow: row nowrap;
  501.         justify-content: space-around;
  502.         text-align: center;
  503.        }
  504.        .foot a{
  505.          width: 2rem;
  506.          height: 1.6rem;
  507.          margin-top: 0.5rem;
  508.        }
  509.        .foot a span{
  510.          font-size:  1.2rem;
  511.          color: #ccc;
  512.          font-weight: normal;
  514.        }
  515.         .foot a i{
  516.          font-size:  0.3rem;
  517.          color: #ccc;
  518.          text-align: center;
  519.          float: left;
  520.          font-style: normal;
  521.          width: 2rem;
  522.        }
  523.   </style>
  524.   <body>
  525.     <header>
  526.       <a href="">选择城市<span class="iconfont icon-arrow-right"></span></a>
  527.       <a>
  528.         <form action="#" method="GET" name="form">
  529.           <input
  530.             type="text"
  531.             id="myinput"
  532.             name="myinput"
  533.             class="search-text"
  534.             placeholder="搜索目的地/关键词"
  535.           />
  536.           <button class="iconfont icon-sousuo"></button>
  537.         </form>
  538.       </a>
  539.       <a href="#"><span class="iconfont icon-touxiang"></span></a>
  540.     </header>
  541.     <div class="top"></div>
  542.     <div class="nav">
  543.       <ul>
  544.         <li><span></span><a href="">结伴</a></li>
  545.         <li><span></span><a href="">景点</a></li>
  546.         <li><span></span><a href="">路线</a></li>
  547.         <li><span></span><a href="">导游</a></li>
  548.         <li><span></span><a href="">酒店</a></li>
  549.         <li><span></span><a href="">特产</a></li>
  550.         <li><span></span><a href="">租车</a></li>
  551.         <li><span></span><a href="">游轮</a></li>
  552.         <li><span></span><a href="">签证</a></li>
  553.         <li><span></span><a href="">户外</a></li>
  554.       </ul>
  555.     </div>
  556.     <div class="container">
  557.        <a href=""></a>
  558.        <a href=""></a>
  559.        <a href=""></a>      
  560.     </div>
  561.     <div class="c-nav">
  562.         <ul>
  563.             <li><i>——</i>推荐目的地<i>——</i></li>
  564.             <li><a href="">国内旅游</a></li>
  565.             <li><a href="">拉萨</a></li>
  566.             <li><a href="">日本</a></li>
  567.             <li><a href="">峨眉山</a></li>
  568.             <li><a href="">九寨沟</a></li>
  569.             <li><a href="">首尔</a></li>
  570.             <li><a href="">普吉岛</a></li>
  571.             <li><a href="">马尔代夫</a></li>
  572.             <li><a href="">港澳台</a></li>
  573.             <li><a href="">目的地大全<span class="iconfont icon-arrow-right"></span></a></li>
  574.         </ul>
  575.     </div>
  576.     <div class="c-r">
  577.         <div class="c-rt">热卖景区</div>
  578.         <div class="c-rc">
  579.             <div class="c-rc1">
  580.                  <img src="http://www.situcms.com/uploads/2018/1023/a59771d3aec6b4ac76d319ed6dcf91c2_350x150.png">
  581.             </div>
  582.             <div class="c-rc2">
  583.               <a href="">马尔代夫多少钱？</a> 
  584.             </div>
  585.             <div class="c-rc3">
  586.                <a href=""><img src="http://www.situcms.com/uploads/2015/1028/14630bcd06ba3ff7ed8b82c624801460_170x85.jpg" >
  587.                 <span>泰、老、越三国有望实现单一旅游签证</span>
  588.             </a>
  589.               <a href=""><img src="http://www.situcms.com/uploads/2018/0515/44239935fcfae2520dbab338a23ca5ec_170x85.jpg" alt="">
  590.                 <span>新马泰旅游签证怎么办理？</span>
  591.                 </a>
  592.             </div>
  593.         </div>
  594.         <div class="c-rf">
  595.           <a href="">查看更多<span class="iconfont icon-arrow-right"></span></a>
  596.         </div>
  597.     </div>
  598.     <div class="c-f">
  599.         <div class="c-ft">
  600.             <ul>
  601.                 <li><a href="">热门旅游路线</a>
  602.                     </li>
  603.                 <li><a href="">热门酒店预订</a>
  604.                     </li>
  605.                 <li><a href="">热门租车</a>
  606.                     </li>
  607.             </ul>
  608.         </div>
  609.         <div class="c-fc">
  610.                 <a href="">
  611.                     <div class="c-fc1">
  612.                        <img src="http://www.situcms.com/uploads/2017/1020/d9616c1cb0d89689a19c2aa897d9dc81_375x187.png" alt="">
  613.                        <i><span class="iconfont icon-dingwei"></span>&nbsp;昆明出发</i>
  614.                        <strong>￥:6500</strong>
  615.                     </div>
  616.                     <div class="c-fc2">
  617.                         <p>九寨沟+黄龙+卧龙熊猫谷+都江堰双汽4日跟团游</p>
  618.                         <b>行程内用车为旅游交通巴士，散客拼团全程可能非同一台车；因延线有行车公里数限制或部分路段维修，易发生堵车，发车时间均较早，行程
  619.                         </b>
  620.                         <i>九寨沟</i>
  621.                         <i>省心更团游</i>
  622.                         <i>飞机团</i>
  623.                         <i>汽车团</i>
  624.                         <i>快乐自助游</i>
  625.                     </div>
  627.                </a>
  629.             </ul>
  630.         </div>
  631.         <div class="c-fc">
  632.                 <a href="">
  633.                     <div class="c-fc1">
  634.                        <img src="http://www.situcms.com/uploads/2017/0428/1d48604ef1bb654e44ad9a1217b03f6a_375x187.jpg" alt="">
  635.                        <i><span class="iconfont icon-dingwei"></span>&nbsp;昆明出发</i>
  636.                        <strong>￥:2500</strong>
  637.                     </div>
  638.                     <div class="c-fc2">
  639.                         <p>云南昆明+大理+丽江+洱海+玉龙雪山6日5晚跟团游 </p>
  640.                         <b>行程内用车为旅游交通巴士，散客拼团全程可能非同一台车；因延线有行车公里数限制或部分路段维修，易发生堵车，发车时间均较早，行程
  641.                         </b>
  642.                         <i>九寨沟</i>
  643.                         <i>省心更团游</i>
  644.                         <i>飞机团</i>
  645.                         <i>汽车团</i>
  646.                         <i>快乐自助游</i>
  647.                     </div>
  649.                </a>
  651.             </ul>
  652.         </div>
  653.         <div class="c-fc">
  654.                 <a href="">
  655.                     <div class="c-fc1">
  656.                        <img src="http://www.situcms.com/uploads/main/litimg/20150722/20150722154931_375x187.png" alt="">
  657.                        <i><span class="iconfont icon-dingwei"></span>&nbsp;昆明出发</i>
  658.                        <strong>￥:500</strong>
  659.                     </div>
  660.                     <div class="c-fc2">
  661.                         <p>厦门+鼓浪屿+福建土楼5日4晚跟团游 3晚威斯汀+5星下午茶 1晚岛上 </p>
  662.                         <b>行程内用车为旅游交通巴士，散客拼团全程可能非同一台车；因延线有行车公里数限制或部分路段维修，易发生堵车，发车时间均较早，行程
  663.                         </b>
  664.                         <i>九寨沟</i>
  665.                         <i>省心更团游</i>
  666.                         <i>飞机团</i>
  667.                         <i>汽车团</i>
  668.                         <i>快乐自助游</i>
  669.                     </div>
  671.                </a>
  673.             </ul>
  674.         </div>
  676.     </div>
  677.     <div class="c-rf">
  678.           <a href="">查看更多旅游路线<span class="iconfont icon-arrow-right"></span></a>
  679.     </div>
  680.     <div class="foot">
  681.     <a href=""><span class="iconfont icon-dianhua"></span> <i>客服电话</i> </a>
  682.     <a href=""><span class="iconfont icon-bangzhu"></span> <i>帮助中心</i> </a>
  683.     <a href=""><span class="iconfont icon-dingdan"></span> <i>我的订单</i> </a>
  684.     <a href=""><span class="iconfont icon-guanyuwomen"></span> <i>关于我们</i> </a>
  685.     </div>
  686.     <div class="c-rf">
  687.           <a href="">注册|登录</a>
  688.     </div>
  689.   </body>
  690. </html>

编写过程中由于网页自适应没有办法，只能调用一个js文件：loading.js

  • 示例图：

  • 使用position:relative对网页元素进行排列。
  • 示例图
  • 示例图
Correcting teacher：GuanhuiGuanhui

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