learning target:
- Master the basic knowledge of HTML5
- Get started with CSS
Learning Content:
- Master the basic syntax of HTML5
- Master the basic syntax of CSS
- HTML5 web design
- Mastering Block-Level Tags
- Mastering Inline Tags
- How to use the form
- Common attributes of iput
study-time:
- Monday to Friday 7:00 am - 9:00 pm
- Saturday 9am-9pm
- Sunday 3pm-6pm
Learning Outputs:
- 1 technical note
- CSDN technical blog 1 article
- Design a basic login interface using HTML
- Formatting the login interface with CSS
HTML code:
- Here is a preliminary design of the elements of the login interface
<!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>
- Because we need to submit information to the background when we register or log in, we need to use the form tag
- The span tag is a basic text tag
- If you need to log in, you need to click login to jump to the page, so we need to use the a tag to jump to the URL
- The input tag means that the user needs to enter information by himself, and the type of the input text box can be specified through the type attribute. For example, when we enter a password, we need to shield it, so we can set the password attribute, and the specific text can not be displayed during the password input, to achieve privacy hiding effect
- You need to use the button tag to set the button. In fact, you can also use the input tag, and then set the attribute to button to achieve the same effect.
- Also note that the method attribute on the form tag has two different values. When setting the post value, the personal information in the form will not be displayed at the URL when submitting, but when the get is submitted, the URL will display the value of the name attribute at the time of setting. So we need to use post to effectively prevent user privacy from being leaked
CSS code:
- Formatting the interface
<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>
- Here I have a style file, which is used to reset the style interface that comes with the browser, so as not to cause confusion in the final design results of different browsers. You can refer to ResetCSS: CSS Tools: Reset CSS This is a public style reset Set the template, you can copy and store it in the css file by yourself, and then write the file path into the href attribute in the link tag to use it normally
- There are a variety of CSS selectors involved here. You can learn by yourself, and then you can understand my code. For example, [ ] is an attribute selector, and . is a class selector. You can write directly without adding anything Tags are tag selectors. Here I only talk about the attribute selectors I use here. You can learn other specific usage methods by yourself.
plan:
- Shock the browser you need to use to display the effect when running the HTML file
- Here is the final login interface of the design result. This is only the initial model diagram, which can be submitted, but the data is not stored. Other functions need to learn follow-up knowledge to realize
