发表于： 2018-10-30 20:36:11
1 815
今天完成的事情：完成了任务4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="task04.css">
</head>
<body>
<header>
<div class="head">
<p class="txt1">注册</p>
<p class="txt3">关闭</p>
<p class="txt2">登陆</p>
</div>
</header>
<div class="your">
<div class="iphone">
<img src="task04-iphone.png" height="41" width="27"/>
</div>
<div class="yourname">
<input type="text" onkeyup="this.value=this.value.replace(/[^0-9-]+/,'');" maxlength="11" placeholder="请输入账号" style="border: 0;height: 45px;width: 90%;outline: none">
</div>
</div>
<div class="pass">
<div class="lock">
<img src="task04-lock.png" height="43" width="29"/>
</div>
<div class="password">
<input type="password" maxlength="20" placeholder="请输入密码" style="border: 0;height: 45px;width: 90%;outline:none;">
</div>
</div>
<div class="login">
<p class="login-a">登陆</p>
</div>
<div class="cancle">
<p class="txt5">忘记密码</p>
</div>
</body>
</html>
body{
background-color: aliceblue;
margin: 0 ;
padding: 0;
}
.head{
width: 100%;
height: 60px;
background-color: #5EBFCC;
}
.txt1{
float: left;
height: 60px;
margin: 0;
padding-left: 7px;
line-height: 60px;
color: white;
}
.txt3{
float:right;
height: 60px;
margin: 0;
padding-right: 7px;
line-height: 60px;
color: white;
}
.txt2{
margin: 0;
text-align: center;
line-height: 60px;
color: white;
}
.your{
background-color: white;
margin-top: 10px;
height: 60px;
display: flex;
align-items: center;
}
.iphone{
width: 65px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
border-right: 1px solid #dddddd;
}
.yourname{
height: 60px;
width: 90%;
display: flex;
align-items: center;
margin-left: 20px;
}
.pass{
background-color: white;
margin-top: 10px;
height: 60px;
display: flex;
align-items: center;
}
.lock{
width: 65px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
border-right: 1px solid #dddddd;
}
.password{
height: 60px;
width: 90%;
display: flex;
align-items: center;
margin-left: 20px;
}
.login{
width: 100%;
height: 60px;
background-color: #5EBFCC;
}
.login-a{
color: white;
text-align: center;
line-height: 60px;
}
.txt5{
color: #5EBFCC;
float:right;
margin-right: 10px;
border-bottom: 1px solid #5EBFCC;
}
明天计划的事情，了解并尽量完成任务5
遇到的问题：
1，在刚开是做任务四布置header的时候，顶部三个元素分别需要两边固定显示，剩下一个元素居中显示，所以刚开始做任务的时候我使用的flex布局饿方式，
justify-content:space-between;
最后页面显示也达成了这个效果，但是在最后根据任务（去掉 header 的三块文字的任意一两个，剩下的一两个都还在原位置上不会受到影响）进行验收的时候去掉其中一个文字其他文字的位置发生了改变。最后经过向师兄的询问发现使用的布局有问题，最后我决定使用float 布局的方式来达到要球，最后完成了任务标准所达到的要求。
2，在进行顶部页面进行header进行float进行布局的时候发现左边和右边的两个文字可以很好的利用float布局来达到要求，但是中间的“登陆”一直达不到居中的效果，我的命名方式是这样的
<div class="head">
<p class="txt1">注册</p>
<p class="txt3">关闭</p>
<p class="txt2">登陆</p>
</div>
最后经过查询发现，在使用这种float布局的方式下，在css控制文件中，必须先确定txt1,和txt3 的属性，要把txt2的属性控制放到两者之后才不会出现一直错误的情况。
3，在进行input进行输入的时候，刚开始我采用的是先设置一个大的div，其中包含3个小的div，其中一个div用来放置图片，一个div用来产生一个类似空格的效果，然后利用这个div的边框来实现虚线效果，最后一个div用来放置input，最后也达到了这个效果，但是其中所定义的class 太多，胆码看起来比较混淆，经过向其他师兄询问后发先直接可以把放置图片的div的边框放大一点，input输入框可以利用设置外边距来达到效果，最后我又重新更改其代码来达到这个效果
4，最后在进行账户名字输入的时候发现如果把
type="text"
maxlength="11"
设置成这样的话，虽然限制了字符的输入长度，但在实际输入的时候限制的11个字符其实是不生效的，最后经过查询发现还需要加上一行
onkeyup="this.value=this.value.replace(/[^0-9-]+/,'')
来达到限制输入字符长度的效果
收获：对flex布局有了更加深刻的理解，初步了解input的如何使用，以及在什么情况下使用flex和float.
返回列表
评论