发表于: 2018-09-02 23:34:23

1 744


今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin) 
今天完成了任务四的一部分,其中就包括了第一段的请输入号码

在下面的这段我完成了以后,结果我发现我一开始看图就不对了,正常的话是按照师兄的说的用外边的盒子套进去里面有两个盒子,

那么的话左边的图标单独的做一个盒子,右边的表单又是一个盒子,那么这样只要再设定了宽高以后就可以成了


<!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>
<header>
<span class="close">关闭</span>
<span class="login">登陆</span>
<span class="register">注册</span>  
</header>
<div class="box">
<div class="phone"><i class="icon"></i>
<input placeholder="请输入手机号">
</div>
<div class="box1">
</div>
</body>


</html>

html {
font-size: 312.5%;
}

body {
margin: 0;
font-size: .32rem;
}

header {
height: .88rem;
background-color: #5fc0cd;
text-align: center;
}

.close {
float: left;
color: white;
font-size: .32rem;
line-height: .88rem;
padding-left: .31rem;
}

.login {
color: white;
font-size: .36rem;
line-height: .88rem;
}

.register {
float: right;
color: white;
font-size: .32rem;
line-height: .88rem;
padding-right: .31rem;
}
.box{
border-top:  .16rem solid #EFF0F4;
border-bottom:  .16rem solid #EFF0F4;
height: 1rem
}
.phone{
background-repeat: no-repeat;
color: #EFF0F4;
margin-left: .42rem;
background-size: 0.4rem;
margin-top: .2rem;
}
.icon{
display:inline-block;
width: .27rem;
height: .41rem;
background: url(./登陆_03.png);
background-size: cover;
text-align: center;
}
.phone p{
font-size: 0.5rem;
display: inline;
padding-left: .73rem;
}
input{
display: inline;
outline: none;
text-align: center;
margin-left: .4rem;
padding-left: .3rem;
border-top: 0;
border-right: 0;
border-bottom: 0;
}


明天计划的事情:(一定要写非常细致的内容) 
继续完成任务四

遇到的问题:(遇到什么困难,怎么解决的) 
遇到了一些关于无法解决的就是表格的边框的问题,后来我百度了一下就知道了,大概就是这样

收获:(通过今天的学习,学到了什么知识)

学习到了边框input里面设置下,输入之前有字,输入后就没字了是这样输入的属性

placeholder=“这里面是你要输入的字”,一定要在属性里面输入,不在CSS里面输入,然后如果要去除边框的话可以这样输入:

outline: none;

border: 0;

这样的话。上面的边框就会消失了




返回列表 返回列表
评论

    分享到