问答详情
源自：-

大佬们，这样的html和css怎么写

http://img.mukewang.com/5d786ff0000134b103620127.jpg

研究了好久。

提问者：慕慕0116261 2019-09-11 11:54

个回答

  • 阳火锅
    2019-09-11 15:32:54
    已采纳

    你把我上面写的代码  拿去看看   找点思路...  我只能帮你到这了

    0
  • 阳火锅
    2019-09-11 15:32:14

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">    
        <title></title>
    </head>
    <body>
        <div style='background:royalblue;width:350px;height:100px;margin:0 auto;display:flex;justify-content:center;align-items:center'>
            <div style='width:90%;height:80px;'>
                <div style='width:90%;height:50px;line-height:50px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;'>
                    <span style='background:#fff;width:30px;height:30px;text-align:center;line-height:30px;display:inline-block;border-radius:50%;color:royalblue'>1</span>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <span style='background:#fff;width:30px;height:30px;text-align:center;line-height:30px;display:inline-block;border-radius:50%;color:royalblue'>2</span>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <span style='background:#fff;width:30px;height:30px;text-align:center;line-height:30px;display:inline-block;border-radius:50%;color:royalblue'>3</span>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <i></i>
                    <span style='background:#fff;width:30px;height:30px;text-align:center;line-height:30px;display:inline-block;border-radius:50%;color:royalblue'>4</span>
                </div>
                <div style='width:100%;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:space-between;margin:0 auto'>
                    <span>手机号/密码</span>
                    <span>确认身份</span>
                    <span>上传头像</span>
                    <span>完成注册</span>
                </div>
            </div>
        </div>
    </body>
    </html>

    0
  • 慕慕0116261
    2019-09-11 14:55:20

    <div class="nu1mber">
    <div class="test">
        <div class="test1">
            1
        </div>
        <div class="font">
            手机号/密码
        </div>
    </div>
    <div class="test">
        <div class="test1">
            1
        </div>
        <div class="font">
            手机号/密码
        </div>
    </div>
    <div class="test">
        <div class="test1">
            1
        </div>
        <div class="font">
            手机号/密码
        </div>
    </div>
    <div class="test">
        <div class="test1">
            1
        </div>
        <div class="font">
            手机号/密码
        </div>
    </div>

</div>
    .nu1mber{
      width: 90%;
      height: 100px;
      font-size: 0;
      text-align: center;
      margin:80px auto 0;
  }

.test{
    width: 25%;
    display: inline-block;
    text-align: center;
}
.test1{
    width: 30px;
    height: 30px;
    background: white;
    font-size: 0.7rem;
    color: #6A85F8;
    border-radius: 50%;
    line-height: 30px;
    margin: 0 auto;
    display: inline-block;
    text-align: center;
}
.font{
    display: block;
    font-size: 0.9rem;
    color: white;
    margin-top: 15px;
}
    .yuan{
   border: 1px solid white;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
    vertical-align: middle;
    transform: scale(0.7);
}


    0
  • 慕慕0116261
    2019-09-11 14:37:15

    6个小圆的位置不知道怎么放，假如没有那6个小圆 我是知道怎么写的

    0
  • 阳火锅
    2019-09-11 14:31:57

    这个很简单啊，你是哪里觉得难？

    0