发表于： 2019-06-17 09:51:26
1 835
今日完成的事情
知道了怎样消除图片的默认属性，body{margin:0; padding:0;
怎么让input密码里面变成黑点？
Input type="text"改成“password"
Input type=""password"
怎么让文字有下划线
Text-decoration:underline
明天计划
学习弹性盒子
遇到的问题
缩放比例到320px；
要么图片加分隔符加边距变小，
要么input宽表小
可以改变图片，分隔符之间的padding margin 之间的数值
我是改变了margin padding 的值
.img1{
vertical-align:middle;
margin: 0 10px;
padding:0 10px;
width:15px;
height:20px;
}
.line{
width:1px;
height:16px;
vertical-align:middle;
background-color:#eaedee;
margin:3px;
display:inline-block;
}
.input1{
width:70%;
height:50px;
line-height:45px;
display:inline-block;
border:none;
outline:none;
padding:0 12px;
font-size:16px;
}
.s2{
margin-top:10px;
background-color:#ffffff;
}
.img2{
vertical-align:middle;
margin:0 10px;
padding:0 10px;
width:15px;
height:22px;
font-family:"黑体";
color:#e1e5e7;
}
.line{
width:1px;
height:16px;
vertical-align:middle;
background-color:#eaedee;
margin:3px;
display:inline-block;
}
.input2{
width:70%;
height:50px;
line-height:45px;
display:inline-block;
border:none;
outline:none;
padding:0 12px;
font-size:16px;
}
.s3{
margin-top: 30px;
}
.frame{
padding:15px;
font-size:18px;
text-align:center;
background-color:#5fc0cd;color:#e1e5e7;
}
.s4{
margin-top: 0px;
float:right;
text-decoration:underline;
}
.s5{
font-family:"黑体";
color:#83ccd7;
}
body{
margin:0px;
padding:0px;
background-color: #eff0f4;
}
</style>
</head>
<body >
<div class="box">
<div class="a2">关闭</div>
<div class="a4">注册</div>
<div class="a3">登录</div>
</div>
<div class="s">
<img src="ps4文件夹/st1.png" alt=""class="img1">
<div class="line"></div>
<input type="text"class="input1" placeholder="请输入手机号" >
</div>
<div class="s2">
<img src="ps4文件夹/st2.png" alt=""class="img2">
<div class="line"></div>
<input type="password"class="input2" placeholder="请输入密码" >
</div>
<div class="s3">
<div class="frame">登录</div>
</div>
<div class="s4">
<div class="s5">忘记密码？</div>
</div>
</div>
</body>
</html>
因为input占70%；其他的图片 分隔符 padding margin 占30%，图片和分隔符都是具体的值，我试了几次都不行，没思路
收获
知道了怎放大字体 ctrl+"+"可以放大字体，CTRL+“-”是缩小
返回列表
评论