我真的不知道如何在页面底部设置div。
我的代码是这样的:
<footer>
<div>
<a href="https://stackoverflow.com/users/14248176/achyuta-pataki"><img src="https://via.placeholder.com/140x100" height="40px" width="40px"></a>
<a href="https://github.com/achyutap"><img src="https://via.placeholder.com/140x100" height="40px" width="40px"></a>
<a href="mailto:amp@gmail.com"><img src="https://via.placeholder.com/140x100" height="40px" width="40px"></a>
</div>
</footer>
我试过<footer>
。
使用固定页脚
footer{
position: fixed;
bottom: 0;
width: 100%;
text-align:center;
margin:0 auto;
}
<footer>
<div>
<a href="https://stackoverflow.com/users/14248176/achyuta-pataki"><img src="https://image.flaticon.com/icons/png/128/2111/2111628.png" height="40px" width="40px"></a>
<a href="https://github.com/achyutap"><img src="https://image.flaticon.com/icons/png/128/2111/2111432.png" height="40px" width="40px"></a>
<a href="mailto:amp@gmail.com"><img src="https://image.flaticon.com/icons/png/128/732/732200.png" height="40px" width="40px"></a>
</div>
</footer>
在div或页脚中添加以下CSS:
position: absolute;
bottom: 0;
简单地使用HTML元素";页脚";这并不意味着div会在页面的末尾。它只是一个用于语义的HTML标记,与元素的可见方式无关,也就是说,它不应用任何特定的CSS。
您需要一些css来实现这一点:
<!--this will do-->
<body style="display: grid;
align-content: end;
height: 100vh;
margin: 0;">
<footer>
<div>
<a href="https://stackoverflow.com/users/14248176/achyuta-pataki">
<img src="stack.png" height="40px" width="40px">
</a>
<a href="https://github.com/achyutap"><img src="github.png"
height="40px"
width="40px"></a>
<a href="mailto:achyutapataki@gmail.com"><img src="email.png"
height="40px" width="40px"></a>
</div>
</footer>
</body>
您还没有添加任何CSS。您可以通过添加位置将元素设置到页脚
footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
color: white;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<body>
<footer >
<div>
<a href="https://stackoverflow.com/users/14248176/achyuta-pataki"><img src="https://via.placeholder.com/140x100" height="40px"
width="40px"></a>
<a href="https://github.com/achyutap"><img src="https://via.placeholder.com/140x100" height="40px" width="40px"></a>
<a href="mailto:amp@gmail.com"><img src="https://via.placeholder.com/140x100" height="40px" width="40px"></a>
</div>
</footer>
</body>
</html>