HTML+CSS仿写的登录页面
仿写的登录页面
使用HTML+CSS，感觉很简单，记录下
话不多说，直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>用户登录界面</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
/* 背景颜色 */
background-color: rgb(144,127,142);
}
section {
width: 600px;
height: 500px;
margin: 50px auto;
/* 溢出隐藏 */
overflow: hidden;
border-radius: 15px;
}
.box {
width: 530px;
height: 380px;
background-color: rgb(250,245,250);
margin: 50px auto;
/* 溢出隐藏 */
overflow: hidden;
/* 圆角 */
border-radius: 10px;
}
.box1 {
width: 530px;
height: 88px;
background-color: rgb(246, 246, 246);
margin: 2px auto;
/* 背景图片路径 */
background-image: url(海阳.jpg);
/* 背景图片不平铺 */
background-repeat: no-repeat;
/* 背景图片定位 */
background-position: 95% 20px;
}
.box2 {
width: 520px;
height: 85px;
margin: 5px auto;
}
.box3 {
width: 520px;
height: 85px;
margin: 5px auto;
}
.box4 {
width: 520px;
height: 85px;
margin: 5px auto;
overflow: hidden;
}
.box12,
.box13 {
font-style: italic;
color: rgb(119,121,121);
}
.box11,
.box12 {
line-height: 85px;
}
.box11 {
font-size: 25px;
font-family: "华为琥珀";
margin-left: 30px;
}
.box21 {
width: 460px;
height: 60px;
margin: 13px 22px;
/* 背景图片路径 */
background-image: url(海阳.jpg);
/* 背景图片不平铺 */
background-repeat: no-repeat;
/* 背景图片定位 */
background-position: 100% 10px;
/* 背景图片大小 */
background-size: 40px 40px;
padding: 0 0px 0px 20px;
/* 边框 */
border: 1px solid #d3d3d3;
/* 圆角 */
border-radius: 5px;
/* 轮廓线设置为无 */
outline: none;
/* 阴影 */
box-shadow: 0px 0px 10px #979393;
}
.box21,
.box31::-webkit-input-placeholder {
font-size: 20px;
color: rgb(119,121,121);
/* 斜体 */
font-style: italic;
}
.box31 {
width: 460px;
height: 60px;
margin: 13px 22px;
/* 背景图片路径 */
background-image: url(海阳.jpg);
/* 背景图片不平铺 */
background-repeat: no-repeat;
/* 背景图片定位 */
background-position: 100% 10px;
/* 背景图片大小 */
background-size: 40px 40px;
padding: 0 0px 0px 20px;
/* 边框 */
border: 1px solid #d3d3d3;
/* 圆角设置 */
border-radius: 5px;
/* 轮廓线设置为无 */
outline: none;
/* 阴影 */
box-shadow: 0px 0px 10px #979393;
}
.box31::-ms-reveal {
/* 密码输入框眼睛隐藏 */
display: none;
}
.box41 {
width: 484px;
height: 60px;
margin: 13px 20px;
/*
border: 1px solid #d3d3d3;
border-radius: 5px;
box-shadow: 0px 0px 10px #979393; */
}
.box42 {
margin-top: 15px;
margin-left: 20px;
font-size: 18px;
color: rgb(119,121,121);
/* 斜体 */
font-style: italic;
}
.box43 {
/* 基线顶部对齐 */
vertical-align: top;
width: 124px;
height: 44px;
margin-left: 352px;
margin-top: -45px;
/* 边框 */
border: 1px solid #c2b7b7;
/* 圆角 */
border-radius: 5px;
/* 阴影 */
box-shadow: 0px 0px 10px #b1adad;
font-size: 20px;
/* font-family: "楷体"; */
}
.box44 {
/* 斜体 */
font-style: italic;
color: rgb(119, 121, 121);
}
</style>
</head>
<body>
<section>
<div class="box">
<div class="box1">
<span class="box11">Secure login</span>
<span class="box12">or get</span>
<a href="#" class="box13">a free account</a>
</div>
<!-- 文本输入框 -->
<div class="box2">
<input type="text" class="box21" placeholder="username">
</div>
<!-- 密码输入框 -->
<div class="box3">
<input type="password" class="box31" placeholder="password">
</div>
<div class="box4">
<div class="box41">
<a href="#" class="box42">Forgot your password</a><br>
<input type="checkbox" class="box42" id="ched">
<!-- 绑定input元素的标签 -->
<label for="ched" class="box44">Remember me</label>
<input type="submit" value=" let me in" class="box43">
</div>
</div>
</div>
</section>
</body>
</html>
整个页面的代码如上所示，除了需要在本地文件夹中添加url为海阳.jpg的图片资源之外，其他都可以直接复制粘贴查看效果，运行之后的效果如下：
完毕。
