html - 网站的左侧和顶部有边距
问题描述
所以我正在为我的网站制作一个登录页面,由于某种原因,网站只是浮动到右下角,所以每次我进入网站时,我都必须手动滚动,使其居中。我已经尝试搜索问题,但我似乎无法 在此处找到问题的屏幕
这是 HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="site.css">
<title>Login</title>
</head>
<body>
<div class="hero">
<div class="form-box">
<div class="button-box">
<div id="knop"></div>
<button type="button" class="toggle-btn">log In</button>
<button type="button" class="toggle-btn">register</button>
</div>
<div class="social-icons">
<img src="../site/fotos/duimpje.jpg">
<img src="../site/fotos/duimpje.jpg">
<img src="../site/fotos/duimpje.jpg">
</div>
<form class="input-group">
<input type="text" class="input-field" placeholder="user id" required>
<input type="text" class="input-field" placeholder="enterpassword" required>
<input type="checkbox" class="check-box"><span>remember password</span>
<button type="submit" class="submit-btn">log in</button>
</form>
</div>
</div>
</body>
</html>
这是CSS
.hero{
height: 100%;
width: 100%;
background-image: url(../site/fotos/duimpje.jpg);
background-position: center;
background-size: cover;
position: absolute;
}
.form-box{
width: 380px;
height: 480px;
position: relative;
margin: 6% auto;
background: white;
padding: 5px;
}
.button-box{
width: 220px;
margin: 35px auto;
position: relative;
box-shadow:0 0 20px 9px grey;
border-radius: 30px;
}
.toggle-btn{
padding: 10px 30px;
cursor: pointer;
background: transparent;
border: 0;
outline: none;
position: relative;
}
#knop{
top: 0;
left: 0;
position: absolute;
width: 110px;
height: 100%;
background:linear-gradient(to right, #ff105f,#ffad06);
border-radius: 30px;
transition: .5s;
}
.social-icons{
margin: 30px auto;
text-align: center;
}
.social-icons img{
width: 30px;
margin: 0 12px;
box-shadow: 0 0 20px 0 #7f7f7f3d;
cursor: pointer;
border-radius: 50%;
}
.input-group {
top: 180px;
position: absolute;
width: 280px;
transition: .5s;
}
.input-field{
width: 100%;
padding: 10px 0;
margin: 5px 0;
border-left: 0;
border-top: 0;
border-right: 0;
border-bottom: px solid #999;
outline: none;
background: transparent;
}
.submit-btn{
width: 85%;
padding: 10px 30px;
cursor: pointer;
display: block;
margin: auto;
background: linear-gradient(to right, #ff105f,#ffad06);
border: 0;
outline: none;
border-radius: 30px;
}
解决方案
大多数网络浏览器都会为<body>
元素添加边距。
如果您不想要该边距,则需要在 CSS 文件中指定以下代码:
body {
margin: 0;
}
推荐阅读
- python - 来自 pytest 的 status_code 不等于真实的
- javascript - HighCharts - “arearange”和“spline”中的不同工具提示?
- c# - 使用 .Value 时,我不确定为什么会收到“是一种方法,在给定的上下文中无效”
- node.js - 如何修复 ReferenceError: primordials 未在节点 v13.12.0 中定义
- python - Python:Selenium 没有这样的元素:无法找到元素:{"method":"xpath","selector":"//button[@data-id=1]"}
- flutter - 如何将图标设置为topRight
- javascript - 如果对多个 setState 调用进行批处理,prevState 如何保持更新的值而 state 不是
- typescript - React-TypeScript-DatePicker 突出显示来自 REST API 的日期
- javascript - youtube.playlistItems.insert(..) 花费大量配额
- python - 网页抓取 python beautifulsoup:我如何提取网页的百分比