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

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

博主信息

博文 7

粉丝 0

访问量 4257

专题推荐

更多>

防百度翻译

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="font_icon/iconfont.css" />
    <link rel="stylesheet" href="chushihua.css" />
    <link rel="stylesheet" href="07-baidufanyi.css" />
  </head>
  <body>
    <div class="toubu">
      <div class="header">
        <div class="icon">
          <div class="iconfont icon-shangyiye"></div>
          <div class="iconfont icon-xiayiye"></div>
        </div>
        <div class="app">
          <img src="img/QQ1.jpg" alt="" />
          <span>百度翻译APP</span>
        </div>
        <div class="button">
          <button>下载</button>
        </div>
      </div>
    </div>
    <div class="xuanze">
      <div class="zidong">
        <select name="" id="">
          <option value="auto">自动检测</option>
        </select>
      </div>
        <div class="iconfont icon-xiayiye"></span></div>
        <div class="china"> 
          <select name="" id="">
          <option value="auto">中文</option>
          </select>
      </div>
    </div>
    <textarea class="input" id="" cols="30" rows="10" value="请输入文字"></textarea>
    <!-- <textarea class="input" type="" value="请输入文字"> -->
  </body>
</html>

css部分

body{
    padding: 0;
    margin: 0;
}
.toubu{
    position: relative;
    top: 0;
    right: 0;
    left: 0;
}
.header{
    display: grid;
    grid-template-columns:repeat(4,1fr);
    /* border: .01rem solid #ccc; */
    background-color:#fafafb;
    height:0.6rem;
    place-items:  center;
    place-content: space-around;
}
.header .icon{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 10px;
}
.header .app{
    display: grid;
    grid-template-columns:0.45rem 1fr ;
    place-content: space-around;
    grid-column: span 2;
    gap: 0.05rem;
}
.header .app img{
place-comtent:start center;
padding: 0.05rem 0.05rem 0 0;
}
.header .app span{
    font-weight:bolder;
    line-height: 0.6rem;
    text-align: left;
}
.header .button button{
    /* display: inline-block; */
    background-color: #089cff;
    height: 0.3rem;
    width: 0.6rem;
    text-align: center;
    line-height: 0.3rem;
    font-size:medium;
    color:#fff;
    border: none;
    border-radius: 0.05rem;
}
.xuanze{
    display: grid;
    grid-template-columns: repeat(9,1fr);
    height:0.6rem;
    place-items: center;
}
.xuanze .zidong{
    grid-column: span 4;
}
.xuanze .zidong select{
    border: none;
    font-size: 0.18rem;
}
.xuanze .china{
    grid-column: span 4;
}.xuanze .china select{
    border: none;
    font-size: 0.18rem;
}
.input{
     width: 100%;
     height: 1.3rem;
     font-size: larger;
}

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

开学第一天

2023-03-10 11:51:37