HTML+CSS登录页面

￡神魔★判官ぃ 2024-04-03 08:24 11阅读 0赞

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

效果图如下：![ad95d576a8334afe9a03d8fc99c4f6f0.png][]

背景图和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(........)为背景图片，可选取自己喜欢的，修改一下图片路径即可。

[ad95d576a8334afe9a03d8fc99c4f6f0.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/03/8e16a5ce82754873b99cb7dd331f9bfc.png