HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>凹显风登录页面</title>
<link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="./css/凹显风登录页面.css">
</head>
<body>
<div class="container">
<h1>登录</h1>
<div class="box">
<div class="box-input">
<span class="glyphicon glyphicon-user"></span>
<input type="text" placeholder="用户名">
</div>
<div class="box-input">
<span class="glyphicon glyphicon-eye-close"></span>
<input type="password" placeholder="密码">
</div>
<button>登录</button>
<div class="sign">
还没用户?
<a href="#">立即注册</a>
</div>
</div>
</div>
</body>
</html>
css代码:
* {
margin: 0;
padding: 0;
}
body {
background: url(../image/star.jpg) no-repeat;
/* 缩放背景图片以完全覆盖背景区,可能背景图片部分看不见 */
background-size: cover;
}
.container {
width: 450px;
height: 310px;
background-color: rgba(0, 0, 0, .4);
border-radius: 5%;
margin: 10% auto;
text-align: center;
}
.container h1 {
color: aliceblue;
padding: 20px 0;
}
.box .box-input,
.box button {
margin-bottom: 15px;
}
.box .box-input span {
width: 5px;
margin-right: -15px;
}
.box .box-input input {
width: 180px;
padding-left: 35px;
outline: none
}
.box .box-input input:hover {
background-color: rgb(209, 211, 213);
box-shadow: 5px 2px rgba(0, 0, 0, .1);
}
.box button {
width: 150px;
height: 25px;
border: 0;
border-radius: 10px;
background: -webkit-linear-gradient(left top, rgb(44, 163, 190), rgb(215, 160, 166));
color: aliceblue;
font-weight: 600;
/* 中间间隔 */
letter-spacing: 5px;
}
.box .sign {
color: #ccc;
font-size: 12px;
}
登录页面:
背景图片:
Bootstrap 前端开发框架 使用步骤:
&0.先到官网下载
&1.创建bootstrap文件夹结构(复制bootstrap相关文件夹)
&2.创建html骨架结构
&3.引入相关样式文件
&4.书写内容