大佬们，这样的html和css怎么写
研究了好久。
慕慕0116261
2019-09-11
5 回答
<!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>
<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);
}查看1条回复
举报
0/150
提交
取消
