您的位置：首页 > Web前端 > CSS

简单登录界面（HTML+CSS)

2020-07-15 05:48 471 查看

界面效果图：

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/iconfont.css" />
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<style>
body{
background: url(img/bg1.png);
background-size:100% 100%;
}
#container{
width: 400px;
height: 430px;
border: solid black 1px;
background-color:#0A4D42;
opacity:0.75;
padding-left: 20px;
padding-right: 20px;
margin-left: 500px;
margin-top: 100px;
}
#container_h3{
text-align: center;
color: white;
}

.btn{
height: 45px;
}

.input1{
height: 45px;
}
.container2{
margin-top:20px;
margin-bottom: 10px;
}
.container2 a{
color: white;
display: block;
text-align: right;
}
.btn1{
width: 100%;
height: 45px;
font-size: 18px;

}
</style>
</head>
<body>
<div id="container" >
<h3 id="container_h3">账户登录</h3>
<br />
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="iconfont">&#xe651;</i></button>
</span>
<input type="text" class="input1 form-control" placeholder="用户名">
</div>
<br />
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="iconfont">&#xe61b;</i></button>
</span>
<input type="text" class="input1 form-control" placeholder="密码">
</div>

<div class="container2">
<a href="#">忘记密码？</a>
</div>

<div>
<button class="btn1 btn-warning">登录</button>
</div>

<div class="container2">
<a href="#">立即注册</a>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航