今天完成的事情
任务四魔镜登陆页ui图已还原，如下:
html代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>任务四</title>
<link rel="stylesheet" type="text/css" href="Task04.css">
</head>
<body>
<div class="box1">
<div class="close">关闭</div>
<div class="SignIn">登陆</div>
<div class="register">注册</div>
</div>
<div class="box2">
<img src="iphone.png" class="iphone" alt="image">
<div class="line1"></div>
<input type="text" name="number" placeholder="请输入手机号" />
</div>
<div class="box3">
<img src="locked.png" class="locked" alt="image">
<div class="line2"></div>
<input type="password" name="pass" placeholder="请输入密码" />
</div>
<div class="box4">登陆</div>
<div class="box5"><u>忘记密码?</u></div>
</body>
</html>
CSS样式如下：
body {
background-color: rgb(239, 240, 244);
margin: 0px;
color: white;
font-size: 15.7px;
}
.box1 {
background-color: rgb(95, 192, 205);
height: 44.25px;
text-align: center;
line-height: 44.25px;
}
.close {
width: 32px;
height: 15.6px;
margin-left: 15.5px;
float: left;
}
.SignIn {
width: 32px;
height: 15.6px;
display: inline-block;
}
.register {
width: 32px;
height: 15.6px;
margin-right: 15.5px;
display: inline-block;
float: right;
}
.box2 {
height: 50px;
margin-top: 8px;
background-color: rgb(255, 255, 255);
}
.iphone {
height: 20.5px;
width: 13.3px;
margin-left: 21.5px;
margin-top: 15px;
float: left;
}
.line1 {
height: 25.5px;
width: 1px;
background-color: rgb(225, 229, 231);
margin-left: 23px;
margin-top: 12px;
display: inline-block;
}
input {
height: 20px;
margin-left: 16px;
margin-top: 14.5px;
font-size: 14.5px;
border-style: none;
outline: none;
position: absolute;
}
.box3 {
height: 50px;
margin-top: 7.3px;
background-color: rgb(255, 255, 255);
}
.locked {
height: 20.5px;
width: 13.3px;
margin-left: 21.5px;
margin-top: 15px;
float: left;
}
.line2 {
height: 25.5px;
width: 1px;
background-color: rgb(225, 229, 231);
margin-left: 23px;
margin-top: 12px;
display: inline-block;
}
input {
height: 20px;
margin-left: 16px;
margin-top: 14.5px;
font-size: 14.5px;
border-style: none;
outline: none;
position: absolute;
}
input::-webkit-input-placeholder {
color: rgb(210, 210, 210);
}
.box4 {
height: 50px;
margin-top: 34.5px;
background-color: rgb(95, 192, 205);
text-align: center;
font-size: 15px;
line-height: 50PX;
}
.box5 {
color: rgb(95, 192, 205);
height: 23.8px;
font-size: 14.5px;
padding-top: 10PX;
float: right;
padding-right: 16.7px;
}
以下是对昨天遗留问题的解决：
问题：忘记密码字样添加下划线
解决：使用<u></u>标签添加下划线
<div class="box5"><u>忘记密码?</u></div>
问题：“请输入手机号”和“请输入密码”字样在实际输入过程中不会消失，而是和新增加的字样混合在一起
解决： 将input中的value改成placeholder
<input type="text" name="number" placeholder="请输入手机号" />
问题：使用placeholder代码后，输入框内的提示文字的颜色等样式无法修改
解决：假如以下代码修改
input::-webkit-input-placeholder {
color: rgb(210, 210, 210);
问题： 手机号和密码输入的边框使用border-style：none清除后，在输入过程中边框还是会显示
解决： 输入outline：none；
border-style: none;
outline: none;
问题：手机号输入框和密码输入框在竖线移到右边后，出现无法居中现象，如下
解决：css样式input中加入
position: absolute;
今天的收获：
1.任务四已基本完成
2.昨天遗留的问题已解决
明天的计划
1.开始任务五
返回列表
评论