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

来源:-

慕慕0116261

2019-09-11 11:54

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

研究了好久。

写回答 关注

5回答

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

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

    阳火锅 回复慕慕0116...

    采纳我一下

    2019-09-11 15:37:22

    共 2 条回复 >

  • 阳火锅
    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>

  • 慕慕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);
    }


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

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

    慕慕0116... 回复阳火锅

    你还 因为回复不能超过三百个字,所以我把代码放在了这个问题面板上,你看看

    2019-09-11 14:59:07

    共 4 条回复 >

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

    这个很简单啊,你是哪里觉得难?

    慕慕0116...

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

    2019-09-11 14:41:52

    共 1 条回复 >

初识HTML(5)+CSS(3)-升级版

HTML(5)+CSS(3)基础教程8小时带领大家步步深入学习标签用法和意义

1223089 学习 · 18212 问题

查看课程

相似问题