search

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

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

零龙
零龙原创
2020年07月03日 23:46:13734浏览

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对网页元素进行排列。
  • 示例图
  • 示例图
上一条：商桥系统的基本通讯原理下一条：了解php变量-php12章7.2
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多