用html和css创建一个居于网页底部的页脚
时间: 2023-06-15 20:06:07 浏览: 128
以下是一个简单的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>底部页脚</title>
<style>
/* 设置整个页面的样式 */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
/* 设置内容区域的样式 */
.content {
min-height: 100%;
margin-bottom: -50px; /* 页脚的高度 */
padding-bottom: 50px; /* 页脚的高度 */
}
/* 设置页脚的样式 */
.footer {
height: 50px;
background-color: #333;
color: #fff;
text-align: center;
position: relative;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div class="content">
<!-- 在这里放置网页的内容 -->
</div>
<div class="footer">
<p>Copyright © 2021</p>
</div>
</body>
</html>
```
在这个例子中,我们首先设置了整个页面的高度为100%(也就是占满整个浏览器窗口),并且将margin和padding都设置为0,以便更好地控制页面布局。
接下来,我们设置了内容区域的样式,将其最小高度设置为100%,并且将其底部的margin设置为负的页脚高度,同时将padding设置为页脚的高度。这样一来,就可以确保内容区域的高度至少是整个浏览器窗口的高度,并且留出了足够的空间放置页脚。
最后,我们设置了页脚的样式,将其高度设置为50px,并且将其position设置为relative,bottom设置为0,以便将其固定在页面底部。同时,我们还设置了其背景颜色、文字颜色和居中对齐等属性。
阅读全文