学习目标：
学习内容：
- 掌握 HTML5基本语法
- 掌握CSS基本语法
- HTML5网页设计
- 掌握块级标签
- 掌握行内标签
- 表单的使用方法
- iput常用属性
学习时间：
- 周一至周五早上 7 点—晚上9点
- 周六上午 9 点-晚上9点
- 周日下午 3 点-下午 6 点
学习产出：
- 技术笔记1 篇
- CSDN 技术博客 1 篇
- 使用HTML设计一个基本登录界面
- 使用CSS对登录界面进行格式设计
HTML代码：
- 这里是对登录界面的元素进行初步的设计
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>注册</title>
</head>
<body>
<div>
<form action="#" method="post">
<h2>请注册</h2>
<span name="yes">已有账号？</span>
<a href="#">登录</a>
<br>
<br>
用户名：<input type="text" placeholder="请输入用户名" name="user">
<br>
<br>
手机号：
<select style="width: 50px;height: 40px">
<option value="+86">+86</option>
<option value="+12">+12</option>
<option value="+港澳台">+港澳台</option>
</select>
<input type="tel" placeholder="请输入手机号" name="tele">
<br>
<br>
密 码：<input type="password" placeholder="请设置登录密码" name="pwd">
<br>
<br>
验证码：<input type="text" placeholder="请输入验证码" class="yz">
<button class="ipt"></button>
<br>
<br>
<input type="checkbox" style="vertical-align: middle">
<span>阅读并接受协议</span>
<br>
<br>
<center><button type="submit">注册</button></center>
</form>
</div>
</body>
</html>
- 因为我们注册或者登录时是需要提交信息给后台的，所以需要用到表单form标签
- span标签是一个基本的文本标签
- 如果需要登录是要点登录进行页面跳转的，所以我们需要使用a标签进行网址跳转
- input标签也就是需要用户进行自行输入信息，并且可以通过type属性进行指定输入文本框的类型，比如我们输入密码时需要进行屏蔽，因而可以设置password属性，在输入密码期间可以不显示具体文本，达到隐私隐藏效果
- 设置按钮需要用到button标签，其实也可以用input标签，然后设置属性为button，也可以达到同样的效果
- 还需要注意的是form标签处的method属性，它有两个不同值。设置post值时提交时网址处不会显示表单内个人信息，而get提交，提交时网址处会显示在设置时有name属性的值。所以我们需要使用post才可以有效防止用户隐私被泄露
CSS代码：
- 对界面进行格式的设置
<link rel="stylesheet" href="../CSS/样式文件/样式1.css">
<style>
div{
/*居中*/
margin: auto;
/*可以通过内边距设置*/
width: 460px;
height: 520px;
border: grey solid 2px;
border-radius: 5px;
/*将用户选择时的格式取消*/
user-select: none;
}
form{
width: 420px;
height: 520px;
position: relative;
left: 20px;
}
span{
color: grey;
}
input{
border-radius: 5px;
border: lightgrey 1px solid;
font-size: 7px;
height: 40px;
width: 348px;
/*先设定一个值，在通过页面检查按住width一直加减：上下箭头直到边框突然回缩*/
}
input[name="tele"]{
border-radius: 5px;
border: lightgrey 1px solid;
font-size: 7px;
height: 40px;
width: 288px;
}
input[type="checkbox"]{
border-radius: 5px;
border: lightgrey 1px solid;
height: 15px;
width: 15px;
}
button[type="submit"]{
border: lightgrey 1px solid;
border-radius: 5px;
height: 50px;
width: 350px;
background-color: #65bdff;
text-align: center;
/*设置字距*/
letter-spacing: 2px;
/*移入按钮后变成小手形式*/
cursor: pointer;
}
.yz{
border: lightgrey 1px solid;
/*百分比是以宽度为基础计算的，用px可以使框圆的匀称*/
border-radius: 5px;
font-size: 7px;
height: 40px;
width: 241px;
}
a{
text-decoration: none;
}
a:hover{
/*设置下划线*/
text-decoration: underline;
}
.ipt{
width: 104px;
height: 44px;
background: url("images/验证码.jpg") no-repeat center/104px 44px;
/*设置按钮与前面验证码框居中对齐，否则没有文字的按钮会与前面的文本对齐*/
vertical-align: middle;
}
</style>
- 这里我自己有一个样式文件，是用来重置浏览器自带的样式界面的，以免造成不同浏览器最终设计结果出现混乱，大家可以参考ResetCSS：CSS Tools: Reset CSS这是一个公共的样式重置模板，大家自行复制存储到css文件中，然后将文件路径写入link标签中的href属性内就可以正常使用
- 这里涉及到多种CSS选择器，大家可以自行学习，然后对我的这段代码才能有理解，比如有 [ ] 是属性选择器，前面加上了 . 是类选择器，什么都不加直接写标签是标签选择器，这里只说到我这里面使用的属性选择器，具体其他使用方法大家自行学习
展示图：
- 在运行HTML文件时电击自己需要使用的浏览器进行效果展示
- 这里是设计结果的最终登录界面，这只是最初始的模型图，可以实现提交，但是数据并未有存储，其他功能还需要学习后续知识才能实现
