HTML写一个登录框样式

最新推荐文章于 2024-05-21 19:31:47 发布
最新推荐文章于 2024-05-21 19:31:47 发布
阅读量1.3w 收藏 49
点赞数 12
分类专栏： html 文章标签： 登陆小框框
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TISRNW/article/details/101032288
版权

以QQ空间的登陆框为例，原先的代码很复杂，还涉及了其他的知识，对于刚刚接触的人来说想写一点点样式来练练手的话可以看一下。
写好之后是这个样子
样式一样，但写法很多，只是一种而已
下面是代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body{
				background-color: gray;
			}
			.wrap{
				width: 414px;
				height: 312px;
				border: solid rgb(238,238,238) 2px;
				background-color: white;
				/*margin: 0px auto;*/
			}
			.wrap .title{
				margin-top: 6px;
				margin-bottom: 16px;
				font-size: 20px;
				color: rgb(51,51,51);
				text-align: center;/*居中*/
				
			}
			.wrap .infor{
				text-align: center;
				color: #666;
				font-size: 16px;
				margin-bottom: 36px;
				
			}
			.wrap .infor a{
				text-decoration: none;
				color:#3481cf;
			}
			.wrap #form{
				text-align: center;
				height:150px ;
				width: 272px;
				margin: 0px auto;
				
			}
			.wrap #form .input{
				height: 38px;
				width: 268px;
				box-sizing: border-box;
				padding: 10px;
				padding-right: 0px;
				margin-bottom: 17px;
				border-radius: 3px;
				border: solid rgb(214,214,21)  1px;
			}
			.wrap #form #btn{
				border-radius: 3px;
				height: 37px;
				width: 258px;
				padding: 1px 7px 2px 7px;
				box-sizing: content-box;
				border: none;
				background-color:rgb(136,210,48) ;
				color: white;
				font-size: 17px;
			}
		</style>
	</head>
	<body>
		<div class="wrap"><!--登录框的最外部的框框-->
			<div class="title"><!--账号密码字体存放的div-->
				账号密码登录
			</div>
			<div class="infor"> <!--第二行字存放的div-->
				推荐使用<a href="">快速安全登录</a>,防止盗号。
			</div>
			<form action="" method="post" id="form"> <!--账号密码登录的一个from表单-->
				<input type="text" class="input" placeholder="支持QQ号/邮箱/手机号登录"/>
				<input type="text"class="input" placeholder="密码"/>
				<button type="button" id="btn">登 录</button>
				<!--简单来讲就是一个大的方块（wrap）包含了title，infor，from三大块的信息，from中又包含了账号，密码，登录三个块块-->
				
			</form>
		</div>
		
	</body>
</html>
雕琢时光纸戆
关注
  • 12
    点赞
  • 踩
  • 49
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html写了外部样式表,外部样式表怎么写
weixin_36121354的博客
06-03 6038
1.css内部样式表怎么写1、创建使用css样式表有三种，分别是外部样式表，内部样式表和内联样式。下面通过一个小demo演示它们的用法。首先新建一个html文件，放入3个button按钮，给前两个按钮分百别设置class属性为btn1和btn2，如下图。2.然后准备一个名为demo的CSS文件。在css文件中写入buttonA的样式，并保存css文件：3,HTML文件，使用链接在你的样式标签标签的...
html日期框样式设置
weixin_52188375的博客
12-02 2530
方法1：通过js来设置文本框input的placeholder值 document.getElementById(“input”).setAttribute(“placeholder”,“新文本内容”); 方法2：通过jquery设置文本框input的placeholder值 $(’#input’).attr(‘placeholder’,‘新文本内容’)； <!DOCTYPE html> <html> <head> <meta charset="utf.
【网页设计作业】设计一个登录框密码框简单样式
04-05
以下是设计一个登录框和密码框的简单步骤： 创建一个HTML文件，并在其顶部添加<head>和<title>标记。 在<body>标记中创建一个<form>元素，用于包含登录表单中的各种输入字段和按钮。 在<form>元素内创建用户名和密码输入框。可以使用<label>标记为两个输入框添加文本标签，并使用<input>元素来创建输入框。 添加提交按钮，使用户可以点击以提交他们的登录信息。这也可以使用<input>元素来创建提交按钮。 使用CSS样式表定义登录框和密码框的样式。可以使用内联或外部样式表来定义它们的大小、背景颜色、边框样式等等。 可以添加JavaScript来增强表单的交互性和验证。 这些步骤提供了一般性指导，您可以根据自己的喜好和需求进行具体实现。除此之外，还可以使用现有的CSS样式库来更快地创建漂亮的登录表单样式，例如Bootstrap、Materialize等等。
HTML登录框设计
最新发布
weixin_67722398的博客
05-21 277
使用webstorm创建一个html文件。使用style标签进行编写。这里使用的是div标签。
html 勾选框样式,input勾选框样式
weixin_35696075的博客
06-04 2629
html代码：css代码：.agreement-border {border: 1px solid #32425b;float: left;height: 12px;margin-right: 26px;position: relative;width: 12px;}.agreement-border div {background: url("globals/gou.png") no-repea...
html 勾选框样式,CSS自定义checkBox复选框- 对勾样式
weixin_42593701的博客
06-04 1902
有checkBox复选框需求时，我们所用的框架样式不符合，所以需要自己写 对勾样式，当然用图片也OK。效果图： html:推送岗位*全部{{item.positionName}}CSS：//对号样式.icon-span{display: inline-block;background-color: #fff;border-radius: 4px;border: 2px solid #7f7f7f;...
弄一个html的登录页面,如何制作一个简单的HTML登录页面（附代码）
weixin_42427882的博客
06-03 1万+
几乎每个网站都会有登录页面，那你知道如何写HTML登录页面吗？这篇文章就和大家分享一个HTML简单登录界面的代码，有一定的参考价值，感兴趣的朋友可以看看。**实例：**制作一个HTML登录页面，包含邮箱，登录密码，立即注册，忘记密码等，代码如下：HTML部分：>>>>>>>>>>>>>>>>>登 ...
HTML部件之—如何实现搜索框(样式+功能实现)
热门推荐
Xmumu_的博客
08-19 2万+
大家好，这里是最可爱的大魔王????????????，今天是搜索框分享，搜素框可以说是非常非常重要的一个点啦，关于搜素框到底怎么设计、功能怎么实现的？发光搜素框怎么实现等问题做一个解释，信息量很大，别忘了收藏噢???????????? 搜素框展示 ???????????????? ????????????????(超级简约) 这款搜索框是来自：亚索老师的浏览器制作???????? 搜索框的制作多种多样，各不相同，可以按照自己的想法任意发挥，那么就以我上面发的第一个图为例子，教一下这个搜索框是如何实
html5 漂亮单选按钮样式,10个HTML5美化版复选框和单选框
weixin_36211428的博客
06-19 4253
单选框html一、CSS3漂亮的自定义Checkbox复选框 9款迷人样式以前咱们分享过一款很是不错的CSS3自定义checkbox复选框纯CSS3美化Checkbox和Radiobox按钮，外观很是时尚。今天咱们来分享一款9款样式迷人的CSS3漂亮的自定义checkbox复选框。这几款复选框样式很丰富，使用起来也比较方便。html5 二、CSS3自定义发光以前咱们分享过一些CSS3和HTML5实...
html中复选框怎么设置选中一个,html中关于checkBox选中样式设置
weixin_29498577的博客
06-03 2271
例如外卖服务区域，选择时为多选，且一般隐藏checkbox样式框。只留下label字体和设置的外边框来进行选中样式控制，以此来提高用户体验。这时要对checkbox进行处理我总结的一个方法就是根据checked去进行设置例子：桥西区这里我把checkbox和label写在p标签里，这样既可以实现点击文字选中。选中后样式控制：/*选矿*/.select-ul li p label,.type-lis...
CSS3用户登录框样式代码
06-24
【CSS3用户登录框样式...总结来说，CSS3用户登录框样式代码是利用CSS3的众多新特性来创建一个既美观又实用的登录界面的过程。通过合理运用这些技术，开发者可以创建出符合现代审美、交互性强且用户体验优良的登录框。
后台login登录框html模板
12-04
这个模板集合包含了一系列HTML文件，旨在为开发者提供一个简洁且专业的登录界面设计基础，以提升用户体验并保持后台系统的整体风格一致性。 1. **HTML模板结构**： HTML模板通常包括头部（header）、主体（body）...
CSS3用户登录框样式代码.zip
11-17
这个名为"CSS3用户登录框样式代码.zip"的压缩包文件，显然是为了提供一个使用CSS3实现的登录框样例，帮助开发者学习或快速应用到自己的项目中。让我们深入探讨一下相关知识点。 首先，CSS3引入了许多新特性，使得...
点击登录按钮，弹出一个登录框
weixin_44000439的博客
03-03 1万+
点击登录按钮，弹出一个登录框 首先将登录框写在一个div块里，里面放上登录框所需的各种信息，比如用户名、密码等，并将CSS样式里的display设置成none。然后在你的前端页面，比如index.html或者index.jsp中，有一个登录按钮，在这个按钮上onclick一个函数，这个函数写在.js文件中，其作用是设置登录框所在div的显示与隐藏，默认状态下，是隐藏的。当点击登录按钮时，这...
用js做一个简单的计算器
TISRNW的博客
10-29 1757
实现并不困难 1，我们首先把样式写出来 2，写出来之后我们用js获取我们每次点击的数值，将其运算等等并将其填充到我们写的显示屏上。 3，对于清零，取反，取百分数代码中有详细说明。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title&g...
轮播图（点击小点点让他跳转到具体某一张）
TISRNW的博客
10-25 1623
轮播图的原理前几篇说过一些 现在加上一些点点击让他轮播 具体就是自己添加一个标签，获取之后知道他是哪一张进行显示就可以了。 下面是代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="t...
js入门 （用wasd来移动一个小色块）
TISRNW的博客
10-23 808
获取你的事件按钮之后，就可以根据键位来改变小色块的位置。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { padding: 0px; ...
js手写一个视频播放h5
TISRNW的博客
11-24 724
css代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-...
写一个登录页面带样式
09-08
的html代码 <!DOCTYPE html> <html> <head> <title>登录页面</title> <style> body { font-family: Arial, Helvetica, sans-serif; font-size: 12px; background-color: #f2f2f2; } #loginForm { background-color: #fff; padding: 15px; width: 300px; margin: 0 auto; border: 1px solid #e3e3e3; } #loginForm input { font-size: 12px; padding: 5px; width: 280px; margin-bottom: 10px; } #loginForm input[type="submit"] { font-size: 14px; padding: 5px; width: 280px; margin-bottom: 10px; } </style> </head> <body> <div id="loginForm"> <form action=""> <label for="username">用户名：</label> <input type="text" name="username" id="username"> <br> <label for="password">密码：</label> <input type="password" name="password" id="password"> <br> <input type="submit" value="登录"> </form> </div> </body> </html>
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值