css练习：用户登录界面
程序员文章站
2022-07-14 19:50:49
...
目标：
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/style12.css">
<link rel="stylesheet" href="./font/iconfont/iconfont.css">
</head>
<body>
<div class="login">
<h2>Login</h2>
<form action="">
<div class="item">
<i class="iconfont icon-user"></i>
<input type="text" placeholder="username">
</div>
<div class="item">
<i class="iconfont icon-hkpassword"></i>
<input type="password" placeholder="password">
</div>
<button>Login</button>
</form>
</div>
</body>
</html>
css代码:
*{
margin: 0;
padding: 0;
}
body{
background-image: url('../source/bg.jpg');
}
.login{
width: 500px;
height: 300px;
margin: 300px auto;
background: #00000050;
text-align: center;
overflow: hidden;
}
h2{
color: #FFF;
font-size: 30px;
margin: 20px 0;
}
.login i{
font-size: 20px;
color: #fff;
margin-right: 10px;
}
.item input{
margin-bottom: 30px;
background: #00000000;
border:0;
border-bottom: solid 2px #FFF;
width: 50%;
height: 2em;
padding: 0 10px;
font-size: 18px;
color: #fff !important;
}
/*
改变input元素中placeholder属性的颜色
*/
input::-webkit-input-placeholder {
/* WebKit browsers */
color: #ccc;
}
input:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #ccc;
}
input::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #ccc;
}
input:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #ccc;
}
button{
margin-top:20px;
width: 40%;
height: 50px;
border-radius: 40px;
border: 0;
font-size: 18px;
font-weight: bold;
color: #fff;
background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
}
成品：