一、今日完成任务
1. 任务目标——任务4；
2. 完成进度：90%；
3. 效果呈现：
演示时，“关闭”和“注册”两个文本按键，左右间距用绝对定位，忘记其另外设置字体大小，导致间距稍大，现已更改；
二、已解决的困难
HTML
1. <meta>在移动端的设置：
<meta
name="viewport"
content="width=device-width,height=device-height,inital-scale=1.0,user-scalable=no"
/>
<!--100%可视屏幕显示，不允许缩放-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--删除默认的苹果工具栏和菜单栏-->
<meta
name="apple-mobile-web-app-status-bar-style"
content="black-translucent"
/>
<!--使状态栏为灰色半透明-->
<meta name="format-detection" content="telephone=no" />
<!--电话号码和邮箱不会显示为如拨号的超链接-->
2. <form>的表单设置：
<form method="get" action="save.php" name="login page">
<!--表单提交的内容要在form里面，且包含的input必须有name属性值才能提交，传达方式一般为get，数据量较小-->
<input
class="import"
type="text"
name="account"
maxlength="11"
oninput="value=value.replace(/[^\d]/g,'')"
placeholder="请输入手机号"
required
/>
<!--手机号码输入框，只能输入纯数字且限制长度为11个字符-->
<input
class="import"
type="password"
name="password"
placeholder="请输入密码"
required
/> <!--required规定必需在提交之前填写输入字段-->
CSS3
1. 去除输入框以及按钮的默认样式：
input,
input:focus {
background: none;
outline: none;
border: none;
} /* 去除全部输入框及按钮的默认样式 */
2. 去除a链接的默认样式：
.forget a {
text-decoration: none;
outline: none;
min-height: 3em;
font-size: 1.6em;
letter-spacing: 0.05em;
color: #5fc0cd;
} /* 清除a的默认样式，定义其字体类型及大小，且min-height 保证点击尺寸至少44px */
3. header的设置（任意去除两个都不会改变位置）：
① 可能有更优解，会有更简略的方式；
② “关闭”和“注册”用绝对定位position:absolute，来确定左右到屏幕边缘的距离，“登录”文本作为不定宽的块状元素，用父元素为flex布局，其左右外边距margin值为auto来实现居中，给父元素设置 float:left，position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中；
header {
display: flex;
height: 4.4em;
line-height: 4.4em;
background-color: #5fc0cd;
} /* 由于在html的media标签里限制必须全屏显示，所以不用position:fixed固定在顶部 */
.close,
.register {
min-width: 3em;
font-size: 1.6em;
} /* min-width 保证点击尺寸至少44px */
.register {
text-align: right;
} /* 当“注册”的字体宽度小于44px，处于右端，来完成两端对齐 */
.close {
position: absolute;
left: 1em;
}
.register {
position: absolute;
right: 1em;
} /* “关闭”和“注册”两个文本按键，以绝对定位来代替margin值 */
.tittle {
margin: 0 auto;
font-size: 1.8em;
font-weight: 500;
letter-spacing: 0.2em;
} /* 特别改变页面标题的字体类型，和居中位置 */
4. 输入框的布局（flex布局）：
.account,
.password {
margin-top: 0.8em;
display: flex;
align-items: center;
width: 100%;
height: 5em;
line-height: 5em;
background-color: #ffffff;
} /* 应用flex布局，使icon和input的盒模型从左到右垂直居中排列 */
5. icon和分隔线的位置确定
.icon {
width: 5.8em;
height: 2.6em;
border-right: 0.1em solid #e1e5e7;
} /* 定义分隔线的尺寸和位置 */
.img {
margin: auto auto;
width: 1.6em;
height: 2.4em;
} /* 定义icon的图像的大小和中心位置 */
6. 改变输入框默认显示文本的样式：
.import {
margin-left: 1.6em;
line-height: 1.5em;
}
input::-webkit-input-placeholder {
color: #e1e5e7;
}
input:-moz-placeholder {
color: #e1e5e7;
}
input::-moz-placeholder {
color: #e1e5e7;
}
input:-ms-input-placeholder {
color: #e1e5e7;
} /* 定义输入框的输入内容的字体大小，以及其默认文本的颜色 */
7. 登录按钮的布局（方便换算）
① 去除样式后，因无添加点击状态，导致点击后无任何变化；
② 学会添加点击状态试试；
.login {
margin-top: 3.6em;
width: 100%;
height: 5em;
background-color: #5fc0cd;
} /* 定义登录按钮的包含块的大小、位置和背景颜色，因包含块的em值为10px，方便换算 */
.login input {
width: 100%;
height: 100%;
font-size: 1.8em;
font-weight: 500;
letter-spacing: 0.5em;
color: #ffffff;
} /* 定义登录按钮的字体类型，及按钮的大小，因字体大小改变，按钮大小不好换算 */
二、未解决的困难
1. 输入框的一键删除功能；
2. HTML和CSS的代码优化，和规范标准，为使其可读性更高，更精简；
3. 尝试添加CSS3的动画效果，为实现简单动效；
4. 更加深入理解以上已解决困难的更详细解释；
三、明天计划
1. 完成上述未解决困难的解决和应用；
2. 编写README.md文件，总结消化；
返回列表
评论