Grid布局防写百度翻译手机端

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
防百度翻译
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="font_icon/iconfont.css" />
  9.     <link rel="stylesheet" href="chushihua.css" />
  10.     <link rel="stylesheet" href="07-baidufanyi.css" />
  11.   </head>
  12.   <body>
  13.     <div class="toubu">
  14.       <div class="header">
  15.         <div class="icon">
  16.           <div class="iconfont icon-shangyiye"></div>
  17.           <div class="iconfont icon-xiayiye"></div>
  18.         </div>
  19.         <div class="app">
  20.           <img src="img/QQ1.jpg" alt="" />
  21.           <span>百度翻译APP</span>
  22.         </div>
  23.         <div class="button">
  24.           <button>下载</button>
  25.         </div>
  26.       </div>
  27.     </div>
  28.     <div class="xuanze">
  29.       <div class="zidong">
  30.         <select name="" id="">
  31.           <option value="auto">自动检测</option>
  32.         </select>
  33.       </div>
  34.         <div class="iconfont icon-xiayiye"></span></div>
  35.         <div class="china"> 
  36.           <select name="" id="">
  37.           <option value="auto">中文</option>
  38.           </select>
  39.       </div>
  41.     </div>
  42.     <textarea class="input" id="" cols="30" rows="10" value="请输入文字"></textarea>
  43.     <!-- <textarea class="input" type="" value="请输入文字"> -->
  44.   </body>
  45. </html>
css部分
  1. body{
  2.     padding: 0;
  3.     margin: 0;
  4. }
  5. .toubu{
  6.     position: relative;
  7.     top: 0;
  8.     right: 0;
  9.     left: 0;
  10. }
  11. .header{
  12.     display: grid;
  13.     grid-template-columns:repeat(4,1fr);
  14.     /* border: .01rem solid #ccc; */
  15.     background-color:#fafafb;
  16.     height:0.6rem;
  17.     place-items:  center;
  18.     place-content: space-around;
  19. }
  20. .header .icon{
  21.     display: grid;
  22.     grid-template-columns: repeat(2,1fr);
  23.     gap: 10px;
  24. }
  25. .header .app{
  26.     display: grid;
  27.     grid-template-columns:0.45rem 1fr ;
  28.     place-content: space-around;
  29.     grid-column: span 2;
  30.     gap: 0.05rem;
  31. }
  32. .header .app img{
  33. place-comtent:start center;
  34. padding: 0.05rem 0.05rem 0 0;
  36. }
  37. .header .app span{
  38.     font-weight:bolder;
  39.     line-height: 0.6rem;
  40.     text-align: left;
  41. }
  42. .header .button button{
  43.     /* display: inline-block; */
  44.     background-color: #089cff;
  45.     height: 0.3rem;
  46.     width: 0.6rem;
  47.     text-align: center;
  48.     line-height: 0.3rem;
  49.     font-size:medium;
  50.     color:#fff;
  51.     border: none;
  52.     border-radius: 0.05rem;
  54. }
  55. .xuanze{
  56.     display: grid;
  57.     grid-template-columns: repeat(9,1fr);
  58.     height:0.6rem;
  59.     place-items: center;
  61. }
  63. .xuanze .zidong{
  64.     grid-column: span 4;
  65. }
  66. .xuanze .zidong select{
  67.     border: none;
  68.     font-size: 0.18rem;
  69. }
  70. .xuanze .china{
  71.     grid-column: span 4;
  72. }.xuanze .china select{
  73.     border: none;
  74.     font-size: 0.18rem;
  75. }
  76. .input{
  77.      width: 100%;
  78.      height: 1.3rem;
  79.      font-size: larger;
  80. }
【文章转自日本多IP服务器 http://www.558idc.com/japzq.html提供，感恩】
更多阅读