objetivo de aprendizaje:
- Domina los conocimientos básicos de HTML5
- Empezar con CSS
Contenido de aprendizaje:
- Domina la sintaxis básica de HTML5
- Domina la sintaxis básica de CSS
- Diseño web HTML5
- Dominar etiquetas de nivel de bloque
- Dominar etiquetas en línea
- Cómo utilizar el formulario
- Atributos comunes de iput
tiempo de estudio:
- Lunes a Viernes 7:00 am - 9:00 pm
- Sábado 9am-9pm
- Domingo 3pm-6pm
Resultados de aprendizaje:
- 1 nota técnica
- Blog técnico de CSDN 1 artículo
- Diseñe una interfaz de inicio de sesión básica usando HTML
- Formateo de la interfaz de inicio de sesión con CSS
Código HTML:
- Aquí hay un diseño preliminar de los elementos de la interfaz de inicio de sesión.
<!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>
- Debido a que necesitamos enviar información al fondo cuando nos registramos o iniciamos sesión, necesitamos usar la etiqueta de formulario
- La etiqueta span es una etiqueta de texto básica
- Si necesita iniciar sesión, debe hacer clic en iniciar sesión para ir a la página, por lo que debemos usar la etiqueta a para ir a la URL.
- La etiqueta de entrada significa que el usuario debe ingresar información por sí mismo, y el tipo de cuadro de texto de entrada se puede especificar a través del atributo de tipo. Por ejemplo, cuando ingresamos una contraseña, debemos protegerla, para que podamos configurar el atributo de contraseña, y el texto específico no se puede mostrar durante la entrada de contraseña, para lograr un efecto de ocultación de privacidad
- Debe usar la etiqueta del botón para configurar el botón. De hecho, también puede usar la etiqueta de entrada y luego configurar el atributo en el botón para lograr el mismo efecto.
- También tenga en cuenta que el atributo de método en la etiqueta del formulario tiene dos valores diferentes. Al establecer el valor de la publicación, la información personal en el formulario no se mostrará en la URL al enviar, pero cuando se envíe la obtención, la URL mostrará el valor del atributo de nombre en el momento de la configuración. Por lo tanto, debemos usar la publicación para evitar que se filtre la privacidad del usuario.
Código CSS:
- Formateo de la interfaz
<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>
- Aquí tengo un archivo de estilo, que se usa para restablecer la interfaz de estilo que viene con el navegador, para no causar confusión en los resultados de diseño final de diferentes navegadores. Puede consultar ResetCSS: Herramientas CSS: Restablecer CSS Esto es un restablecimiento de estilo público Configure la plantilla, puede copiarla y almacenarla en el archivo css usted mismo, y luego escribir la ruta del archivo en el atributo href en la etiqueta de enlace para usarla normalmente
- Hay una variedad de selectores de CSS involucrados aquí, puede aprender por sí mismo y luego puede entender mi código. Por ejemplo, [ ] es un selector de atributo y . es un selector de clase, y puede escribir directamente sin agregar nada Etiquetas son selectores de etiquetas. Aquí solo hablo de los selectores de atributos que uso aquí. Puedes aprender otros métodos de uso específicos por ti mismo.
plan:
- Choque el navegador que necesita usar para mostrar el efecto al ejecutar el archivo HTML
- Aquí está la interfaz de inicio de sesión final del resultado del diseño. Este es solo el diagrama del modelo inicial, que se puede enviar, pero los datos no se almacenan. Otras funciones necesitan aprender conocimientos de seguimiento para realizar
