编写一个经典的静态页面包括实现一个圣杯/双飞翼页面布局,包括header、footer、container、left、right五个部分。 页面使用独立CSS定义样式。 页面内容可以自由安排,但至少需包括一张图片、两段字体/颜色不一样的文字介绍、有序/无序列表。
时间: 2023-06-20 10:04:42 浏览: 157
双飞翼布局和圣杯布局
5星 · 资源好评率100%
以下是一个简单的圣杯布局的静态页面示例,其中包括 header、footer、container、left、right 五个部分。
```
<!DOCTYPE html>
<html>
<head>
<title>圣杯布局示例</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
background-color: #f5f5f5;
}
/* 容器 */
.container {
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
/* 头部 */
.header {
background-color: #333;
color: #fff;
padding: 20px;
flex-basis: 100%;
}
/* 左侧边栏 */
.left {
background-color: #ccc;
padding: 20px;
flex-basis: 200px;
order: -1;
}
/* 右侧边栏 */
.right {
background-color: #ccc;
padding: 20px;
flex-basis: 200px;
}
/* 中间内容区域 */
.content {
background-color: #fff;
padding: 20px;
flex-grow: 1;
flex-basis: 100%;
}
/* 底部 */
.footer {
background-color: #333;
color: #fff;
padding: 20px;
flex-basis: 100%;
}
/* 清除浮动 */
.clearfix::after {
content: "";
display: table;
clear: both;
}
/* 列表样式 */
ul, ol {
margin: 0;
padding: 0 0 0 20px;
list-style: none;
}
/* 图片样式 */
img {
max-width: 100%;
height: auto;
}
/* 标题样式 */
h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
font-weight: bold;
}
h1 {
font-size: 36px;
line-height: 1.2;
}
h2 {
font-size: 28px;
line-height: 1.2;
}
h3 {
font-size: 22px;
line-height: 1.2;
}
h4 {
font-size: 18px;
line-height: 1.2;
}
h5 {
font-size: 16px;
line-height: 1.2;
}
h6 {
font-size: 14px;
line-height: 1.2;
}
/* 文字样式 */
p {
margin: 0 0 20px 0;
padding: 0;
}
/* 链接样式 */
a {
color: #333;
text-decoration: none;
}
a:hover {
color: #666;
text-decoration: underline;
}
</style>
</head>
<body>
<header class="header">
<h1>圣杯布局示例</h1>
</header>
<div class="container clearfix">
<div class="left">
<h2>左侧边栏</h2>
<p>这里是左侧边栏的内容。</p>
</div>
<main class="content">
<h2>中间内容区域</h2>
<p>这里是中间内容区域的内容。</p>
<ul>
<li>有序列表项 1</li>
<li>有序列表项 2</li>
<li>有序列表项 3</li>
</ul>
<ol>
<li>无序列表项 1</li>
<li>无序列表项 2</li>
<li>无序列表项 3</li>
</ol>
<img src="https://via.placeholder.com/500x300" alt="示例图片">
</main>
<div class="right">
<h2>右侧边栏</h2>
<p>这里是右侧边栏的内容。</p>
</div>
</div>
<footer class="footer">
<p>这里是页脚的内容。</p>
</footer>
</body>
</html>
```
这个页面使用了 flexbox 布局,其中 header、left、right 和 footer 都是固定宽度,而中间的 content 区域则是自适应宽度。我们还定义了一些基本的样式,包括标题、文本、链接、图片以及有序/无序列表。这些样式可以根据具体需求进行修改和调整。
阅读全文