html与css代码制作登录界面

白夜762

已于 2022-10-29 20:19:38 修改

阅读量427

点赞数

文章标签： html css 前端

于 2022-10-29 19:40:05 首次发布

本文链接：https://blog.csdn.net/qq_63049079/article/details/127590179

版权

学号后四位：（必填）0231
邀请人ID：（非必填）

项目名称及描述

名称：登录界面

制作登录界面。该项目会运用到html和css的相关知识。

HTML部分

登录界面的HTML部分
    <body>
		<form>
			<div class="user">
				<input type="text" name="name" placeholder="用户名" />
				<input type="password" name="password" placeholder="密码" />
			</div>
			<div class="footer">
				<div></div>
				<input type="submit" name="submit" value="登录" class="btn" />
				<input type="submit" name="submit" value="注册" class="btn" formaction="注册表.html"/>
			</div>	
		</form>
	</body>
html部分用form创建供用户输入的HTML表单，实现用户信息采集，用input创建输入框实现文本输入，密码输入框采用password文本框实现密码会显示为字符*，将type的值设置为submit，submit是按钮,它是button的一个特例,它把提交这个动作自动集成了。

CSS部分

            body{
				background: url(img/3.jpg) no-repeat center fixed;
				background-size: cover;
				padding-top:20px ;
			}
			
			form {
				width: 343px;
				height: 200px;
				margin: 0 auto;
				border: 1px solid rgba(0, 0, 0, 1);
				border-radius: 5px;
				overflow: hidden;
				text-align: center;
			}
			
			input {
				width: 300px;
				height: 30px;
				border: 1px solid rgba(255, 255, 255, 0.5);
				border-radius: 4px;
				margin-bottom: 10px;
			}
			
			.user{
				padding-top: 40px;
			}
			
			.footer input {
				width: 50px;
				height: 34px;
			}
			input[type=submit]{
				cursor: pointer;
			}
			
			input:focus{
				background-color: rgba(0, 0, 0, 0.2);
				overflow: hidden;
			}
			
			.btn{
				border-radius: 6px;
			}
			
			.btn:hover{
				border-radius: rgba(0, 0, 0, 0.2);
			}
css代码较长，但直观，比较容易理解。对HTML的各个部分进行布局设计与美化，以body部分和form部分为例：body部分用background设置背景图片，padding-top设置上边距；form部分width和height设置宽高；margin: 0 auto设置from的上下间距为0，左右主动；border设置边框属性；text-align设置文本居中。