一些好看的登录页面

最新推荐文章于 2024-08-14 10:44:37 发布

Klix

最新推荐文章于 2024-08-14 10:44:37 发布

阅读量1.4k

点赞数 2

分类专栏： web 文章标签： css html

本文链接：https://blog.csdn.net/a16696747377/article/details/121683739

版权

HTML CSS 登录页面背景图片前端开发

关键词由CSDN通过智能技术生成

web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

谁能拒绝可爱的小猪佩奇呢

具体效果如图

背景图

代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>login</title>
  <style>
    body{
      /*背景图片，path可以自行更换*/
      background-image: url("img_1.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
    * {
      margin: 0;
      padding: 0;
    }

    html {
      height: 100%;
      width: 100%;
      overflow: hidden;
      margin: 0;
      padding: 0;
    }


    #loginDiv {
      width: 33%;
      display: flex;
      justify-content: center;
      align-items: center;
      /*设置阴影*/
      height: 270px;
      box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5);
      border-radius: 5px;
    }

    #name_trip {
      margin-left: 50px;
      color: red;
    }

    p {
      margin-top: 30px;
      margin-left: 20px;
      color: azure;
    }

    input {
      margin-left: 15px;
      border-radius: 5px;
      border-style: hidden;
      height: 30px;
      width: 140px;
      outline: none;
      color: black;
      padding-left: 10px;
    }

    .button {
      border-color: cornsilk;
      color: white;
      border-style: hidden;
      border-radius: 5px;
      width: 100px;
      height: 31px;
      font-size: 16px;
      background-color: black;
    }
  </style>
</head>

<body>
<div id="loginDiv">
  <form action="login.action" id="form" method="post">
    <h1 style="text-align: center;color: cadetblue;">LOGIN  IN</h1>
    <p>User Name:<input id="userName" name="user" type="text"><label id="name_trip"></label></p>

    <p>&nbsp;Password:&nbsp;&nbsp;<input id="password" name="pass" type="password"><label id="password_trip"></label></p>

    <div style="text-align: center;margin-top: 30px;">
      <input type="submit" class="button"  value="login up">
    </div>
  </form>
</div>

</body>
</html>

另一个简单的页面，具体效果如图所示

用到的图片

代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>登陆页面</title>
	<style>
		body {
          /*背景图片，path可以自行更换*/
			background-image: url("img.png");
			background-repeat: no-repeat;
			background-size: cover;
		}
		.form_main{
			list-style: none;
			border-radius: 10px;
			background-color: lightgray;
			text-align: center;
			width: 300px;
			padding: 0px;
			margin: 70px auto;
			overflow: hidden;
		}
		.form_main li{
			height: 40px;
			line-height: 40px;
			font-size: 14px;
		}
		.form_main .one{
			background-color: antiquewhite;
			font-size: 18px;
		}
	</style>

</head>
<body>
<form action="login.action" method="post">

	<ul class="form_main">
		<li class="one">登录</li>
		<li>用户名:<input type="text" name="user"/></li>
		<li>密&nbsp;&nbsp;码:<input type="password" name="pass"/></li>
		<li><input type="submit"/></li>
	</ul>
</form>

</body>
</html>

部分图片和代码来源于网上，经修改后使用，如有侵权请告知。