我创建了一个登录页面,并调用了一个静态css表单来进行样式化,但它不起作用。
<html>
<head>
<title>PWC Login</title>
<link rel="stylesheet" href="{% static 'css/style.css'%}">
</head>
<body>
<div class="loginbox">
<img src="{% static 'images/avatar.png' %}" class="avatar">
<h1 class="h1">Login Here</h1>
<form>
<p>Username</p>
<input type="text" name="" placeholder="Enter Username">
<p>Password</p>
<input type="password" name="" placeholder="Enter Password">
<input type="submit" name="" value="Login">
<a href="#">Forgot your password?</a><br>
<a href="#">Don't have an account?</a>
</form>
</div>
</body>
</html>
CSS:
body {
margin: 0;
padding: 0;
background: url('static/images/pic1.jpeg');
background-size: cover;
background-position: center;
font-family: sans-serif;
}
.loginbox{
width:320px;
height:420px;
background: #000;
color: #fff;
top:50%;
left:50%;
position: absolute;
transform: translate(-50%,-50%);
box-sizing: border-box;
padding: 70px 30px;
}
.avatar{
width: 100px;
height: 100px;
border-radius: 50%;
position: absolute;
top: -50px;
left: calc(50% - 50px);
}
我分别尝试了html和css文件,效果很好。背景是jpeg文件,登录框居中。它必须是django中的一些东西,但不确定是什么。
1条答案
按热度按时间az31mfrm1#