运用html和css知识做了个小小的“单身狗派对”登录页面,既好看又简单。这几天才开始学习,算是我的处女座啦
成品展示:
实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单身狗派对</title>
<style>
body{
background:url("./Dog.jpg") no-repeat;
background-size:1300px ;
}
.login{
width:500px ;
height:270px ;
margin:100px auto;
background:#00000999;
text-align:center;
overflow:hidden;
color:#fff;
}
h2{
color:#fff;
font-size:40px;
margin:20px 0;
}
.login i{
font-size:30px;
color:#fff;
}
.item input{
margin-bottom:18px;
width:50%;
height:em;
font-size:15px;
}
button{
margin-top:7px;
width:150px;
height:2em;
font-size:18px;
font-weight:bold;
color:#fff;
border:0;
border-radius:40px;
background-image:linear-gradient(to right,#ff8177 0%,#ff867a 0%,#ff8c7f 21%,#f99185 52%,#cf556c,#b12a5b 100%);
}
</style>
</head>
<body>
<div class="login">
<h2>Login</h2>
<div class="item">
<i class="user"></i>
用户名:<input type="text" placeholder="username">
</div>
<div class="item">
<i class="password"></i>
密码:<input type="password" placeholder="password">
</div>
<button>Login</button>
</div>
</body>
</html>
更多推荐
前端HTML+CSS制作登录界面
发布评论