完成下面页脚制作,要求如下: (1) 黑色背景盒子的宽度为100%,高度为300px; (2) 导航文字要加连接(颜色#e4a700),间隔使用左右内外边距来实现 , 字号为18px; (3) 白色文本均在段落里 , 字号为14px。
时间: 2024-10-09 17:05:14 浏览: 45
CSS的综合练习2,完成壹心理网页
为了完成这个页脚设计,你需要在HTML中创建一个基本的结构,然后在CSS中为其添加样式。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<style>
/* CSS样式 */
.footer-container {
background-color: #000; /* 黑色背景 */
width: 100%;
height: 300px;
}
.footer-navigation {
display: flex;
justify-content: space-between;
padding: 0 20px; /* 左右内外边距 */
}
.footer-navigation a {
color: #e4a700; /* 导航文字颜色 */
text-decoration: none;
font-size: 18px;
}
.footer-text {
color: white; /* 白色文本 */
font-size: 14px;
}
</style>
</head>
<body>
<div class="footer-container">
<div class="footer-navigation">
<a href="#">导航项1</a>
<a href="#">导航项2</a>
<!-- 添加其他导航链接 -->
</div>
<div class="footer-text">
这是一些页脚内容...
</div>
</div>
</body>
</html>
```
在这个示例中,我们创建了一个`.footer-container`容器,设置了黑色背景、100%宽度和300px的高度。`.footer-navigation`使用了flex布局,链接之间有间距。导航文字的颜色、字体大小和链接样式也已设置。
`.footer-text`区域用于放置白色文本,字号为14px。
只需替换`<a>`标签内的链接地址和`<div class="footer-text">`内的内容即可。记得根据实际需求添加更多的导航链接。
阅读全文