今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）
今天完成了任务四的一大部分，像上面的三行字母，还有边框的调试等等都完成了
明天计划的事情：（一定要写非常细致的内容）
明天我计划把剩下的部分都完成了把，就是尾巴的一些部分
遇到的问题：（遇到什么困难，怎么解决的）
遇到了无法居中对齐的，后来在师兄的指导下，我使用了vertical-align: middle;
这样的办法来完成了居中方式
我的问题是这样的
为什么我如果在父系盒子设置居中以后。底下的盒子就不用设置padding top就可以对其了。只要设置左右浮动就好了还有maing的左右边距
收获：（通过今天的学习，学到了什么知识）
这样的话。上面的边框就会消失了，或者可以打开发者模式F12看一下，是否有边框和其他的，如果有撑起来的，可以设置0
inupt也是可以设置宽高的
type="number"，这个是限制只能输入汉字的，别的输入不了。写在input里面
body里面就是由一个个盒子组成的，就像一个俄罗斯方块一样的，要弄清楚每一个盒子标签的特性，像块级元素，行内元素，行内快元素
vertical-align: middle;这个也是调节居中的一种方式
二倍图的话计算出百分比以后要除以2
letter-spacing这个的代码意思是可以让字体的间距扩大或者缩小，
最后附上现在的代码
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<link rel="stylesheet" type="text/css" href="task4.css">
</head>
<body>
<div class="box">
<a class="close">关闭</a>
<span class="longin">登陆</span>
<a class="register">注册</a>
</div>
<div class="box1">
<div class="phone"></div>
<input placeholder="请输入手机号" type="number">
</div>
<div class="box2">
<div class="lock"></div>
<input type="password">
</div>
<button>登陆</button>
<a>忘记密码</a>
</body>
</html>
html{
font-size: 62.5%;
}
body{
background-color: #EFF0F4;
margin: 0;
}
.box{
height: 4.4rem;
background-color: #5FC0CD;
color: white;
text-align: center;
}
.close{
margin-left: 1.5rem;
font-size: 2rem;
float: left;
margin-top: 1rem;
}
.longin{
font-size: 2.6rem;
line-height:4.6rem;
}
.register{
float: right;
margin-right: 1.5rem;
font-size: 2rem;
margin-top: 1rem;
}
.box1{
background-color: white;
height: 5rem;
margin-top: 1.6rem;
line-height: 5rem;
vertical-align: middle;
}
.phone{
display: inline-block;
background: url(./iphone.png);
margin-left: 2.1rem;
width: 2rem;
height: 2.6rem;
background-size:70%;
background-repeat: no-repeat;
margin-top: .3rem;
vertical-align: middle;
}
input{
border: 2px solid #E1E5E7;
border-top: 0;
border-right: 0;
border-bottom: 0;
height: 3rem;
padding-left: 1.6rem;
}
.box2{
background-color: white;
margin-top: 1.4rem;
height: 5rem;
line-height: 5rem;
}
.lock{
display: inline-block;
background: url(./locked\ 2.png);
width: 2rem;
height: 2.6rem;
background-repeat: no-repeat;
background-size:70%;
margin-top: .3rem;
margin-left: 2.1rem;
vertical-align: middle;
}
返回列表
评论