search

博客列表 >Grid布局防写百度翻译手机端

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

东风又西风
东风又西风原创
2023年03月29日 16:25:56187浏览

防百度翻译

  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. }
上一条：函数的四种形式下一条：Jenkins与实现CI/CD
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多