【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表单定义和用法

<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


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

好的,我可以为你提供一个简易版的当当网首页的HTML代码,你可以根据需要进行修改和美化。代码如下: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>当当网</title> <style> body { margin: 0; padding: 0; font-family: Arial, sans-serif; } header { background-color: #FF6600; color: white; padding: 10px; } nav { background-color: #F5F5F5; padding: 10px; text-align: center; } nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; margin-right: 20px; } nav a { color: #333; text-decoration: none; font-size: 18px; padding: 10px; } nav a:hover { background-color: #FF6600; color: white; } section { padding: 20px; } #banner { height: 200px; background-image: url("banner.jpg"); background-size: cover; background-position: center; text-align: center; padding-top: 50px; } #banner h1 { font-size: 50px; color: white; text-shadow: 2px 2px #333; } #hot { margin-top: 20px; text-align: center; } #hot h2 { font-size: 24px; margin-bottom: 20px; } #hot ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; } #hot li { margin: 10px; width: 200px; } #hot img { width: 100%; height: auto; } #hot a { color: #333; text-decoration: none; font-size: 18px; display: block; margin-top: 10px; } #hot a:hover { color: #FF6600; } footer { background-color: #F5F5F5; padding: 10px; text-align: center; } </style> </head> <body> <header> <h1>当当网</h1> <p>全球最大中文网上书店</p> </header> <nav> <ul> <li><a href="#">图书</a></li> <li><a href="#">电子书</a></li> <li><a href="#">音像</a></li> <li><a href="#">文艺</a></li> <li><a href="#">童书</a></li> <li><a href="#">教材教辅</a></li> <li><a href="#">社科</a></li> <li><a href="#">经管</a></li> <li><a href="#">科技</a></li> <li><a href="#">生活</a></li> <li><a href="#">少儿</a></li> </ul> </nav> <section id="banner"> <h1>畅销图书</h1> </section> <section id="hot"> <h2>热门推荐</h2> <ul> <li> <img src="book1.jpg" alt="图书1"> <a href="#">图书名称1</a> </li> <li> <img src="book2.jpg" alt="图书2"> <a href="#">图书名称2</a> </li> <li> <img src="book3.jpg" alt="图书3"> <a href="#">图书名称3</a> </li> <li> <img src="book4.jpg" alt="图书4"> <a href="#">图书名称4</a> </li> </ul> </section> <footer> <p>版权所有©2019-2021当当网</p> </footer> </body> </html> ``` 这个页面包含了顶部导航栏、轮播图和热门推荐等元素,你可以根据需要进行修改和美化。需要注意的是,这个页面只是一个简易版的当当网首页,实际上当当网的首页比这个复杂得多。
评论 30
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一只爱打拳的程序猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值