PHP8.1.21版本已发布
vue8.1.21版本已发布
jquery8.1.21版本已发布

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

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

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

防百度翻译

  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>
  40. </div>
  41. <textarea class="input" id="" cols="30" rows="10" value="请输入文字"></textarea>
  42. <!-- <textarea class="input" type="" value="请输入文字"> -->
  43. </body>
  44. </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;
  35. }
  36. .header .app span{
  37. font-weight:bolder;
  38. line-height: 0.6rem;
  39. text-align: left;
  40. }
  41. .header .button button{
  42. /* display: inline-block; */
  43. background-color: #089cff;
  44. height: 0.3rem;
  45. width: 0.6rem;
  46. text-align: center;
  47. line-height: 0.3rem;
  48. font-size:medium;
  49. color:#fff;
  50. border: none;
  51. border-radius: 0.05rem;
  52. }
  53. .xuanze{
  54. display: grid;
  55. grid-template-columns: repeat(9,1fr);
  56. height:0.6rem;
  57. place-items: center;
  58. }
  59. .xuanze .zidong{
  60. grid-column: span 4;
  61. }
  62. .xuanze .zidong select{
  63. border: none;
  64. font-size: 0.18rem;
  65. }
  66. .xuanze .china{
  67. grid-column: span 4;
  68. }.xuanze .china select{
  69. border: none;
  70. font-size: 0.18rem;
  71. }
  72. .input{
  73. width: 100%;
  74. height: 1.3rem;
  75. font-size: larger;
  76. }
上一条: 函数的四种形式 下一条: Jenkins与实现CI/CD
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议