HTML+CSS登录页面

最新推荐文章于 2023-11-26 22:17:29 发布

Vous oublie@

最新推荐文章于 2023-11-26 22:17:29 发布

阅读量456

点赞数

分类专栏：网页文章标签： html css

本文链接：https://blog.csdn.net/qq_54000767/article/details/127141647

版权

网页专栏收录该内容

4 篇文章 0 订阅

订阅专栏

初步学习网页制作，今天制作了一个简单登录页面。

效果图如下：

背景图和logo可以自己选择喜欢的就可以

下面是实验代码

login.html

<!doctype html>
<html lang="en">
<link href="css/login.css" rel="stylesheet" type="text/css" />
<head>
	<meta charset="UTF-8">
	<title>登录</title>
</head> 
 
<body>
	<div class="logo_box"><img class="logo_img" src="images/pic1.jpg"></div>
	<div class="login_box">
		<h1 class="title">欢迎登录</h1>
		<input class="input_box" type="text" placeholder="用户名">
		<input class="input_box" type="password" placeholder="密码">
		<a href="default.html">
		<input class="button_box" type="button"  value="登录">
		</a>
	</div>
	
		<div class="weibu" style="text-align:center"  >
	<h1 class="sidebar_01" > 地址：山东省西南部梁山县城东南处梁山李逵家 联系方式：qq_54000767</h1>
	<h1 class="sidebar_01">梁山好汉李逵版权所有</h1>
	</div>
	
</body>
</html>

login.css

@charset "UTF-8";
 
	body {
		background-color: #8ea4f8;
		background-image: url(https://desk-fd.zol-img.com.cn/t_s960x600c5/g2/M00/0B/00/ChMlWV5cfnGIRZowABrsm_3XvNcAANhjQBayi4AGuyz757.jpg);
		background-repeat: no-repeat;
		background-size: cover; 
 
	}
	.login_box {
		width: 400px;
		height: 400px;
		background-color: #fff;
		margin: auto;
		margin-top: 150px;
		border-radius: 5px;
		overflow: hidden;  /*title设置margin-top无效，给父元素设置overflow:hidden;*/
	}
	.title {
		text-align: center;
		font-size: 28px;
		color: #000;
		margin-top: 80px;
		margin-bottom: 10px;
		letter-spacing: 3px;
		font-family: sans-serif;
	}
	.input_box {
		width: 300px;
		height: 30px;
		width: 300px;
		height: 40px;
		padding-left: 10px;
		margin-top: 20px;
		margin-left: 50px;
	}
	.button_box {
		width: 300px;
		height: 35px;
		width: 300px;
		height: 40px;
		margin-top: 20px;
		margin-left: 50px;
		border-radius: 5px;
		background-color: #64a9d9;
		cursor: pointer;
		color: #fff;
		
	}
	.logo_box {
		position: absolute;
		background-color: #fff;
		width: 100px;
		height: 100px;
		border-radius: 100px;
		top: 100px;
		left: 46%;
		border: solid 5px #A68364;
		text-align: center;
	}
	.logo_img {
		margin-top: 20px;
	}
	/*尾部版权  */
	.sidebar_01{
	font-size:20px;
}
.weibu{
	margin-top:300px;
	font-style: normal;
	 border-style: groove;
	 background-color:FFCC33;
  	color:white;
}

背景图片是直接用的网页上面的图片，background-image:url(........)为背景图片，可选取自己喜欢的，修改一下图片路径即可。