发表于: 2019-06-04 23:04:31

1 741


今天完成的事

1.添加“忘记密码“字样

<h_4 class="h_4">忘记密码</h_4>

2.为“忘记密码”添加样式

.h_4{
position: absolute;       /*设置绝对定位*/
   color:rgb(95, 192, 205);  /*设置字体颜色*/
   font-size: 12px;          /*设定字体大小为12spx*/
   right: 10px;              /*设置距离右边10px*/
   top: 230px;               /*设置距离上边缘230px*/
   text-decoration:underline;/*为字体添加下划线*/
}

3.为登录按钮添加颜色并设置字体大小

color: aliceblue;                    /*设置字体颜色为白色s*/

font-size: 15px;                     /*设定字体大小为15spx*/

4.修改输入密码框的表单属性

<input type="password"  name="psw"

5.设置表单左内边距 使输入框右移

padding-left: 50px;                   /*设置表单左内边距为50px 使输入框左移*/

6.在表单内添加手机和锁图标

class="maegin heightp img img1"

class="maegin heightp img img2"
.img{
background-repeat:no-repeat;        /*设置图片不重复*/
   background-size:15px;               /*设置图片大小为15px*/
}
.img1{
background-image: url("iphone.png");/*插入手机图标*/
   background-position:10px;           /*设置图片在input内的位置*/
.img2{
background-image: url("locked.png");
   background-position:10px;           /*设置图片在input内的位置*/


明天计划的事

1.实现表单内的分隔线

2.在完成任务4的情况下开始学习任务5


遇到的问题

表单内添加了一个背景图片后不知道该怎么添加分隔线的图片 或许应该换一种思路使用代码来实现分隔符而不是图片


收获

1.学会在表单内插入图片

2.学会设置图片在元素内的位置

background-position:10px;           /*设置图片在input内的位置*/

3.学会设置图片的大小

background-size:15px;               /*设置图片大小为15px*/

4.学会为文字添加下划线

text-decoration:underline;/*为字体添加下划线*/



返回列表 返回列表
评论

    分享到