html和css写登录框

最新推荐文章于 2024-04-28 15:36:04 发布
最新推荐文章于 2024-04-28 15:36:04 发布
阅读量372 收藏 1
点赞数
分类专栏： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45624685/article/details/118371752
版权
html 同时被 2 个专栏收录
4 篇文章 0 订阅
订阅专栏
css
3 篇文章 0 订阅
订阅专栏

html和css写登录框

页面如下:
在这里插入图片描述
代码如下:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录框</title>
		<link rel="stylesheet" href="./font_2640846_nirlsbslt9/iconfont.css">
		<style type="text/css">
			body {
				background-image: url(img/1.jpg);
				background-repeat: no-repeat;
				background-size: 100% auto;
			}

			.div-sign {
				width: 450px;
				height: 260px;

				margin: 0 auto;
				margin-top: 15%;
				text-align: center;
				background-color: #00000080;
			}

			.div-sign>h2 {
				color: #fff;
				font-size: 30px;
			}

			.div-sign span {
				font-size: 41px;
				vertical-align: middle;

			}

			#username,
			#password {
				width: 103px;
				height: 34px;
				/*设置下边框*/
				border: 0px;
				border-bottom: 2px solid #fff;
				/*设置内边距*/
				padding: 5px 17px;
				background-color: #ffffff00;
				/*字体颜色*/
				color: #fff;
				/*字体大小*/
				font-size: 22px;
			}

			[type="button"] {
				border: 1px solid red;
				width: 120px;
				margin-top: 17px;
				font-size: 22px;
				background-image: linear-gradient(to right, #ad3125 0%, #578bc3 100%);
				border-radius: 15px;
			}
		</style>
	</head>
	<body>
		<div class="div-sign">
			<h2>登录</h2>
			<form action="#" method="post">
				<label for="username">
					<span class="iconfont icon-icon"></span>
				</label>
				<input type="text" id="username" name="username" placeholder="username">
				<br />
				<label for="password">
					<span class="iconfont icon-yuechi"></span>
				</label>
				<input type="password" id="password" name="password" placeholder="password">
				<br />
				<input type="button" value="登录">
			</form>
		</div>
	</body>
</html>
我的征途是星辰大海。
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
好看实用的六个html登录页面
ss810540895的博客
07-15 12万+
原文1.效果图： 代码： 2.效果图： 源码： 3.效果图：源码： 4.效果图：源码： 5.效果图： 源码： 6.效果图：源码：
html简单的登录界面结构，以及详细分析
subsdom的博客
11-20 919
设置指定方向的外边距：可以使用单独的 margin-top、margin-right、margin-bottom、margin-left 属性来分别设置元素的上、右、下、左方向的外边距。设置不同的外边距：可以使用多个值来设置元素的上、右、下、左四个方向的外边距为不同的值。将设置元素的上外边距为 10 像素，右外边距为 20 像素，下外边距为 15 像素，左外边距为 5 像素。例如，margin-top: -10px;设置相同的外边距：可以使用一个值来设置元素的上、右、下、左四个方向的外边距为相同值。
html好看的登录界面2（十四种风格登录源码）_html登录页面
最新发布
2301_82243626的博客
04-28 1498
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
计算机毕业设计：基于HTML学校后台用户登录界面模板源码
wx___BJ050106的博客
12-24 677
🏫 校园网页设计 、学校班级网页制作、学校官网、小说书籍、等网站的设计与制作。🏷️HTML静态网页设计作业使用dreamweaver制作，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力。顶部导航及底部区域背景色为100%宽度，主体内容区域宽度🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语...
html实现登录界面
qq_46578318的博客
06-10 2万+
一、代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>login</title> <style> * { margin: 0; padding: 0; } html {
【html+css】html登录注册页面
陈俊卓的博客
07-08 1万+
html页面登录注册代码，包含css样式
html+css实现登录界面附效果图
01-19
style type=”text/css”> body{ background-color: #555555; } #titel_img{ width:417px; } #log_image { z-index: 0; position: absolute; left: 50%;top:50%; height: 151px;width:400; margin-left: -200px;...
星空登陆界面html+CSS框架
11-13
星空登陆界面html+CSS框架
html+css实现动态边框滑动登陆页
01-25
使用html+css实现的动态效果登陆页，简洁美观，适合新手练习html与css的使用，锻炼实现逻辑，也可用于实际项目使用。
登录页面HTML CSS JS代码.doc
12-01
本文将对登录页面HTML CSS JS代码进行详细的知识点解析，从标题、描述、标签和部分内容四个方面入手，深入探讨HTML、CSS和JS技术在登录页面开发中的应用。 HTML技术 1. 文档类型声明：`<!DOCTYPE html>`声明了文档...
卡片模块小米登录框爱宠知识html+css
06-04
卡片模块小米登录框爱宠知识html+css
非常好好看的几个登录页面（html，css）
12-09
非常好好看的几个登录页面（html，css）
html好看的登录界面2（十四种风格登录源码）
xcLeigh
06-15 2万+
html好看的登录页面2（十四种风格登录源码），登录页面源码，大气好看的网站登录页面html源码模板，页面源码，适用于各种项目，也可以用作学习，各种登录风格都有，高端大气上档次，直接嵌入使用，代码易懂，复用性高，你值得拥有。
网站登录页面制作实战
算法与编程之美
12-01 1889
欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。1 问题描述在新手学习HTML时总想能够更快的掌握一些新...
HTML的学习以及登录框的编写
qq_45970607的博客
01-19 747
HTML简介 HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中...
使用flex布局编写登录框
zhouzying的博客
04-05 1498
登录框编写
(Html)实现一个账号密码登录的弹窗界面（代码）
小劉同学成长日记~~
09-08 2万+
【代码】(Html)实现一个账号密码登录的弹窗界面，闲杂日记~~
html+css+js实现星空特效
热门推荐
weixin_44691513的博客
09-04 5万+
html+css+js实现星空特效 废话不多说直接上代码，效果是一个星空旋转和文字逐渐出现的效果，文字是逐渐出现的，星空中的小球是旋转的 效果： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
用HTML和css写一段登录注册表单
09-21
### 回答1： 答：我可以为您提供一些示例代码，用来帮助您实现一个登录注册表单：<form> <label>Username:</label> <input type="text" name="username" /> <br /> <label>Password:</label> <input type="password" name="password" /> <br /> <input type="submit" value="Login" /> </form> <form> <label>First Name:</label> <input type="text" name="firstname" /> <br /> <label>Last Name:</label> <input type="text" name="lastname" /> <br /> <label>Email:</label> <input type="email" name="email" /> <br /> <input type="submit" value="Register" /> </form> 使用CSS样式，可以把上面的表单进一步完善：<style> form { padding: 10px; width: 300px; } label { float: left; width: 50px; } input { float: left; width: 200px; } </style> ### 回答2： HTML和CSS是前端开发中常用的技术，可以用来创建漂亮且响应式的登录和注册表单。 首先，我们可以创建一个HTML文件并用`<form>`元素包裹登录和注册表单。在表单内部，我们可以使用`<input>`元素来添加输入框和按钮。 在CSS中，我们可以使用选择器来选择不同的元素并应用样式。通过设置元素的属性，如宽度、高度、颜色、边框等，我们可以为表单添加视觉效果。同时，我们还可以使用CSS布局技术来调整表单的位置和排列。 以下是一个简单的登录注册表单的示例： HTML代码： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>登录注册表单</title> <link rel="stylesheet" href="style.css"> </head> <body> <form class="form-container"> <h2>登录</h2> <input type="text" placeholder="用户名"> <input type="password" placeholder="密码"> <button type="submit">登录</button> <p>还没有账号？<a href="#">点击注册</a></p> </form> </body> </html> ``` CSS代码（style.css）： ```css .form-container { width: 300px; margin: 0 auto; padding: 20px; background-color: #f2f2f2; border: 1px solid #ccc; } h2 { text-align: center; } input[type="text"], input[type="password"] { width: 100%; padding: 10px; margin-bottom: 10px; border: 1px solid #ccc; } button[type="submit"] { width: 100%; padding: 10px; background-color: #4caf50; color: #fff; border: none; cursor: pointer; } p { text-align: center; } a { text-decoration: none; } ``` 在这个例子中，我们设置表单容器的宽度为300px，并使用`margin: 0 auto;`将其居中显示。输入框和按钮的样式通过设置`padding`、`border`和`background-color`属性来美化。 对于注册表单，你可以根据需要添加更多的输入字段来收集用户信息。 希望这个例子能帮助你理解如何使用HTML和CSS创建登录和注册表单。当然，根据实际需求，你还可以进行更多的样式调整和功能添加。 ### 回答3： HTML和CSS都是前端开发中常用的技术，可以用来创建登录注册表单。 首先，我们可以使用HTML的form元素来创建一个表单，设置其action属性为登录或注册的后端接口地址。表单中需要包含输入框和提交按钮。 在HTML中，可以使用input元素来创建输入框，设置type属性为"text"或"password"来分别创建普通文本输入框和密码输入框。可以使用label元素来标识输入框的名称。可以使用button元素来创建提交按钮。 例如： ``` <form action="login.php" method="post"> <div> <label for="username">用户名：</label> <input type="text" id="username" name="username"> </div> <div> <label for="password">密码：</label> <input type="password" id="password" name="password"> </div> <button type="submit">登录</button> </form> ``` 然后，我们可以使用CSS来美化表单的样式。 例如： ``` form { width: 300px; margin: 0 auto; } div { margin-bottom: 10px; } label { display: inline-block; width: 80px; font-weight: bold; } input { width: 200px; padding: 5px; } button { padding: 5px 10px; background-color: #008080; color: #fff; border: none; cursor: pointer; } ``` 以上是一个简单的登录表单的例子，你可以根据需要进行扩展和调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值