写一个简单的登录页面!!!(html)_用html制作一个登录页面-CSDN博客

本文链接：https://blog.csdn.net/m0_51510789/article/details/110441020

写一个简单的登录页面!!!

大家好,我是伍柒.
今天我又双叒叕发现了一个好东西.
那就是用html做一个登录页面
那,该如何做呢?
在这里插入图片描述

首先
现在html里的body里写
一个头部header标签(双标签)
然后在header标签里写登录就像这样
< header>用户登录< /header>
然后再写一个div标签
< div>
< input type=“text” name=“username” placeholder=“请输入账号…” /><(这是账号部分,input标签是单标签)
< input type=“password” name=“password” placeholder=“请输入密码…” />(这是密码部分)
然后再添加登录按钮.如下:
< input type=“button” value=“登录” />
整理一下,总效果如下:

<body>
<header>用户登录</header>
<div>
<input type="text" name="username" placeholder="请输入账号..." />
<input type="password" name="password" placeholder="请输入密码...">
</div>
<div>
<input type="button" value="登录"/>
</div>
</body>

接下来我放置一下效果图
在这里插入图片描述
看起看起来不太美观…
那
不如
加点样式吧

<style type="text/css">
  header{
		width: 100%;/*这是设置宽,100%的意思是撑满屏幕*/
		height: 35px;/*这是设置高*/
		background-color: black;/*这是header标签的背景颜色*/
		color: white;/*这是字体颜色*/
		text-align:center;/*这是文字居中*/
		line-height: 35px;
		}
	 input[type="text"],input[type="password"]{
		line-height: 48px;
		margin-top: 10px;
		width: 100%;
		}/*这是设置账号框和密码框的样式,具体的需要说的太多,
		嗯....,
		那就请你们动动你们的小手去百度搜一下叭*/
		input[type="button"]{
		width: 100%;
		margin-top: 10px;
	}
</style>
/*样式最好写在head标签后面body标签前面*/