• 【HTML5】登录页面制作简易版

    刚开始学习Java。文件的命名，讲道理应该以英文为主，但是英语又不好，所以只好用拼音，最痛苦的应该算是那些英语又不好，又想秀一下的程序员，一半英语一半拼音，如mainFangFa~~~你说看了糟心不糟心。

    目录

    1、form表单定义和用法

    1.1input标签定义和用法

    1.2label标签for属性

    1.3实例

    2、HTML5class属性

    3、设计登录页面

    3.1html源码

    3.2css源码

    3.3登录页面图

    前言：

    大家好，我是拳击哥。今天给大家带来的是采用外部样式表制作一个简单的登录页面制作，主要讲解form表单的用法以及class属性用法。

    1、form表单定义和用法

    标签用于为用户输入创建HTML表单。表单能够包含标签，表单还可以包含menus、textarea、fieldset、legend和label元素，本期主要讲解label的用法。

    1.1input标签定义和用法

    标签规定用户可输入数据的输入字段。根据不同的 type 属性，输入字段有多种形态。输入字段可以是text（文本）、password（密码）、radio（单选按钮）、checkbox（多选框）、button（按钮）等等。

    标签中type里面设置的就是属性，你想要输入的是文本就设置text属性，想要输入的是密码就设置password属性。

    1.2label标签for属性

    for属性可把label绑定到另外一个元素。for 属性的值设置为相关元素的 id 属性的值，就能与相关属性同步，所以for 属性规定label绑定到哪个表单元素。

    1.3实例

    制作一个账号密码的显示，我们用到text（文本）和password（密码）属性

    1. <form>
    2.   <div>
    3. 	<label for="username">账号label>
    4. 	<input type="text" name="username"/>
    5.   div>
    6.   <div>
    7. 	<label for="pass">密码label>
    8. 	<input type="password" name="pass"/>
    9.   div>		
    10. form>

    页面显示效果：

    我们可以认为是拥有两个for分别带有两个input中相同标签的text、password的表单。

    第一个div中账号for的""内容与第一个input中name相同，因此for属性规定了label绑定了text表单元素。

    第二个div中密码for""内容与第二个input中name相同，因此for属性规定了label绑定了password表单元素。

    2、HTML5class属性

    在HTML5中，class属性可以定义元素的类名，常用于指向样式表的类（class选择器）。我们在css中通过.号来引用类名。前提得用标签定义文档与外部资源的关系。比如。

    实例：我要通过css设置html里面一个段落

    1. <p class="test"> 人活一生，值得爱的东西很多，不要因为一个不满意就灰心。<br />
    2. 出门在外不论别人给你热脸还是冷脸都别往心里去，外面的世界
    3. 尊重的是人的背景而非人本身。
    4. p>
    1. .test {
    2. 	font-size: 15px;
    3. 	color: orange;
    4. 	background: chocolate;
    5. }

     页面显示效果：

    3、设计登录页面

    3.1html源码

    1. html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="utf-8">
    5. 		<title>登录页面title>
    6. 		<link type="text/css" href="../css/task_twenty.css" rel="stylesheet">
    7. 	head>
    8. 	<body>
    9. 		<form action="#" method="post">
    10. 			<div class="form-control">
    11. 				<label for="username">账号label>
    12. 				<input type="text" id="username" name="username" class="number" pattern="^[a-zA-Z][a-zA-Z0-9][]$" required />
    13. 			div>
    14. 			<div class="form-control">
    15. 				<label for="password">密码label>
    16. 				<input type="password" id="password" name="pas" class="pas" pattern="^[a-zA-Z]\w{5,17}$" required/>
    17. 			<button class="loginbtn" >登录button>
    18. 		form>
    19. 	body>
    20. html>

    3.2css源码

    1. * {
    2. 	padding: 0;
    3. 	margin: 0;
    4. 	border: 0;
    5. }
    6.  
    7. body {
    8. 	font-size: 18px;
    9. 	font-family: "黑体";
    10. 	background: url(../img/timg.jpg) no-repeat top center;
    11. 	color: #FFF;
    12. }
    13.  
    14. form {
    15. 	width: 420px;
    16. 	height: 200px;
    17. 	padding-top: 60px;
    18. 	margin: 250px auto;
    19. 	background: rgb(255,255,255,0.1);
    20. 	border-radius: 20px;
    21. 	border: 1px solid rgba(255,255,255,0.3);
    22. }
    23. .form-control {
    24. 	margin-top: 15px;
    25. 	text-align: center;
    26. }
    27.  
    28. .number,.pas {
    29. 	width: 165px;
    30. 	height: 18px;
    31. 	border: 1px solid rgba(255,255,255,0.3);
    32. 	padding: 2px 2px 2px 22px;
    33. 	border-radius: 5px;
    34. 	color: #FFF;
    35. }
    36. .number {
    37. 	background:url(../img/33.png) no-repeat 5px center rgb(255,255,255,0.1) ;
    38. }
    39. .pas {
    40. 	background: url(../img/44.png) no-repeat 5px center rgba(255,255,255,0.3);
    41. }
    42. .loginbtn {
    43. 	width: 193px;
    44. 	height: 28px;
    45. 	border-radius: 6px;
    46. 	border: 10px solid #000;
    47. 	margin-left: 45px;
    48. 	background: #2d77bd;
    49. 	color: #FFF;
    50. 	border: none;
    51. 	margin-top:10px;
    52. }

    3.3登录页面图

    ​想要背景图片和账号密码图片可以私信我

     Never Give Up

    开头段子，网上找到，如有冒犯还请谅解

  • 相关阅读:
    怎么实现软件测试的游戏化，如何制定游戏化策略
    前端vue项目生成带logo的二维码
    C#：变量的更多内容
    景联文科技：驾驭数据浪潮，赋能AI产业——全球领先的数据标注解决方案供应商
    leetcode 44. 通配符匹配(困难，dp)
    关于 分布式事务 你知道多少
    第四章 Web服务器(1)
    广度优先搜索(Breadth First Search, BFS)算法
    【动态规划】输出所有的最长递增子序列和字典序最小的
    【java学习—十五】创建多线程的两种方式（2）
  • 原文地址：https://blog.csdn.net/weixin_64916311/article/details/127947946