网页制作，网页制作网页制作

要制作一个下面这样的手机网页，不要求很完美，状态栏不用，其他图片有的网页打开显示出来就行

img

网页制作用js css就能完成。

我写了格简单的，你自己改一下字体颜色，和图标。

<!DOCTYPE html>
<html lang="en">
<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>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html{
            /* 1rem等于10px */
            font-size: 62.5%; 
        }
        .box{
            width: 100%;
            height: 100%;
        }
        ul{
            list-style: none;
            /* display: flex; */
        }
        li{
            width: 100%;
            height: 5rem;
          
          
            display: flex;
            position: relative;
        }
        .leftBox{
           line-height: 100%;
           height: 100%;
           display: flex;
           align-items: center;
           margin: 0 1.2rem;
        }
        .leftBox img{
            width: 3rem;
            height: 3rem;
            border-radius: 50%;
        }
        .centerBox{
          /* display: flex;
          flex-wrap: wrap; */
          
          height:4rem;
          margin: auto 0;
          /* padding-left:1.2rem ; */
        }
        .centerBox .name{
         font-size: 1.6rem;
        }
        .centerBox .text{
         font-size:1.2rem;
         width: 10rem;
         height:2rem;
        }
        .centerBox1{
            height: 5rem;
            line-height: 5rem;
            /* padding-left:1.2rem ; */
        }
        .centerBox1 .wen{
            font-size: 1.6rem;
        }
        .rightBox{
            line-height: 5rem;
            height: 5rem;
            position: absolute;
            right:12px;
        }
        .rightBox .rtext{
            margin: 0 1.2rem;
            color: gray;
        }
        .hr{
            width: 90%;
            height: 1px;
            margin: 0 auto;
            background: gray;
        }
    </style>
</head>
<body>
    <div class="box">
       <ul>
          <li>
              <div class="leftBox">
                <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile03.16sucai.com%2F2016%2F10%2F1100%2F16sucai_p20161004049_098.JPG&refer=http%3A%2F%2Ffile03.16sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627526069&t=254d86f033e2279617c40b2035e57849" alt="">
              </div>
              
              <div class="centerBox">
                    <span class="name">Li_Yi</span>
                    <p class="text">管理账号云服务</p>
              </div>
              <div class="rightBox">
                 >
              </div>
          </li>
          <li>
            <div class="leftBox">
              <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile03.16sucai.com%2F2016%2F10%2F1100%2F16sucai_p20161004049_098.JPG&refer=http%3A%2F%2Ffile03.16sucai.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627526069&t=254d86f033e2279617c40b2035e57849" alt="">
            </div>
            
            <div class="centerBox1">
                  <span class="wen">Li_Yi</span>
            </div>
            <div class="rightBox">
               <span class="rtext">444</span>>
            </div>
        </li>
        <div class="hr"></div>
       </ul>
    </div>
</body>
<script>

</script>
</html>

img