草庐IT

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

程序猿爱打拳 2023-07-11 原文

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


目录

1、form表单定义和用法

1.1input标签定义和用法

1.2label标签for属性

1.3实例

2、HTML5class属性

3、设计登录页面

3.1html源码

3.2css源码

3.3登录页面图


前言:

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


1、form表单定义和用法

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

1.1input标签定义和用法

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

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

1.2label标签for属性

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

1.3实例

制作一个账号密码的显示,我们用到text(文本)和password(密码)属性

<form>
  <div>
	<label for="username">账号</label>
	<input type="text" name="username"/>
  </div>
  <div>
	<label for="pass">密码</label>
	<input type="password" name="pass"/>
  </div>		
</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中通过.号来引用类名。前提得用<link>标签定义文档与外部资源的关系。比如<link href="css/test.css" rel="stylesheet"/>

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

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

 页面显示效果

3、设计登录页面

3.1html源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录页面</title>
		<link type="text/css" href="../css/task_twenty.css" rel="stylesheet">
	</head>
	<body>
		<form action="#" method="post">
			<div class="form-control">
				<label for="username">账号</label>
				<input type="text" id="username" name="username" class="number" pattern="^[a-zA-Z][a-zA-Z0-9][]$" required />
			</div>
			<div class="form-control">
				<label for="password">密码</label>
				<input type="password" id="password" name="pas" class="pas" pattern="^[a-zA-Z]\w{5,17}$" required/>
			<button class="loginbtn" >登录</button>
		</form>
	</body>
</html>

3.2css源码

* {
	padding: 0;
	margin: 0;
	border: 0;
}

body {
	font-size: 18px;
	font-family: "黑体";
	background: url(../img/timg.jpg) no-repeat top center;
	color: #FFF;
}

form {
	width: 420px;
	height: 200px;
	padding-top: 60px;
	margin: 250px auto;
	background: rgb(255,255,255,0.1);
	border-radius: 20px;
	border: 1px solid rgba(255,255,255,0.3);
}
.form-control {
	margin-top: 15px;
	text-align: center;
}

.number,.pas {
	width: 165px;
	height: 18px;
	border: 1px solid rgba(255,255,255,0.3);
	padding: 2px 2px 2px 22px;
	border-radius: 5px;
	color: #FFF;
}
.number {
	background:url(../img/33.png) no-repeat 5px center rgb(255,255,255,0.1) ;
}
.pas {
	background: url(../img/44.png) no-repeat 5px center rgba(255,255,255,0.3);
}
.loginbtn {
	width: 193px;
	height: 28px;
	border-radius: 6px;
	border: 10px solid #000;
	margin-left: 45px;
	background: #2d77bd;
	color: #FFF;
	border: none;
	margin-top:10px;
}

3.3登录页面图


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

 Never Give Up


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

有关【HTML5】登录页面制作简易版的更多相关文章

  1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

    我想将html转换为纯文本。不过,我不想只删除标签,我想智能地保留尽可能多的格式。为插入换行符标签,检测段落并格式化它们等。输入非常简单,通常是格式良好的html(不是整个文档,只是一堆内容,通常没有anchor或图像)。我可以将几个正则表达式放在一起,让我达到80%,但我认为可能有一些现有的解决方案更智能。 最佳答案 首先,不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案,它会随着HTML的变化而崩溃,或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

  2. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中,我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时,它会自然地以HTML呈现。但是,当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法),我仍然将HTML作为响应。如何获取JSON作为响应?我还需要说明什么? 最佳答案 您应该将.json附加到请求的url,提供的格式在routes.rb的路径中定义。这

  3. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB? - 2

    所以我在关注Railscast,我注意到在html.erb文件中,ruby代码有一个微弱的背景高亮效果,以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果?谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*,只需点击cmd+shift+P即可获得命令菜单,然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中,键入ERB并在看到包时选择

  4. ruby-on-rails - Ruby url 到 html 链接转换 - 2

    我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时,我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有,我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

  5. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

    我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

  6. Unity 3D 制作开关门动画,旋转门制作,推拉门制作,门把手动画制作 - 2

    Unity自动旋转动画1.开门需要门把手先动,门再动2.关门需要门先动,门把手再动3.中途播放过程中不可以再次进行操作觉得太复杂?查看我的文章开关门简易进阶版效果:如果这个门可以直接打开的话,就不需要放置"门把手"如果门把手还有钥匙需要旋转,那就可以把钥匙放在门把手的"门把手",理论上是可以无限套娃的可调整参数有:角度,反向,轴向,速度运行时点击Test进行测试自己写的代码比较垃圾,命名与结构比较拉,高手轻点喷,新手有类似的需求可以拿去做参考上代码usingSystem.Collections;usingSystem.Collections.Generic;usingUnityEngine;u

  7. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  8. 动漫制作技巧如何制作动漫视频 - 2

    动漫制作技巧是很多新人想了解的问题,今天小编就来解答与大家分享一下动漫制作流程,为了帮助有兴趣的同学理解,大多数人会选择动漫培训机构,那么今天小编就带大家来看看动漫制作要掌握哪些技巧?一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性,以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料,可以是手绘也可以是3d软件创建。在此步骤中,要注意的问题是色彩和平面布局。三、动漫制作制作完成后,加工成型。完成不同的表现形式后,就要对设计稿进行加工处理,使加工的难易度降低,并得到一些基本准确的概念,以便于后续的大样、准确的尺寸制定。四、

  9. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格? - 2

    我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示,但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题,而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

  10. ruby - 在 ASP 页面上 Mechanize 中断 - 2

    require'mechanize'agent=Mechanize.newlogin=agent.get('http://www.schoolnet.ch/DE/HomeDE.htm')agent.clicklogin.link_withtext:/Login/然后我得到Mechanize::UnsupportedSchemeError。 最佳答案 Mechanize不支持javascript但您可以将搜索字段添加到表单并为其分配搜索词并使用mechanize提交表单form=page.forms.firstform.add_fie

随机推荐