实现一个圣杯/双飞翼页面布局,包括header、footer、container、left、right五个部分。 页面使用独立CSS定义样式。 页面内容可以自由安排,但至少需包括一张图片、两段字体/颜色不一样的文字介绍、有序/无序列表。
时间: 2024-06-09 21:09:13 浏览: 10
以下是一个简单的圣杯/双飞翼页面布局示例,你可以根据需要进行修改和扩展:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>圣杯/双飞翼页面布局示例</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>这是头部</h1>
</header>
<div class="container">
<div class="left">
<h2>左侧栏</h2>
<ul>
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
<li><a href="#">链接3</a></li>
</ul>
</div>
<div class="right">
<h2>右侧栏</h2>
<p>这里是一张图片:</p>
<img src="image.jpg">
<p>这是一段文字介绍:</p>
<p class="intro1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, dolor eget lobortis finibus, mauris elit viverra orci, sit amet dictum ante tellus at odio. Fusce vel porta quam. Sed sit amet risus at dolor lobortis pharetra. Ut tincidunt urna vel turpis vestibulum, vel cursus turpis blandit. Duis nec justo in velit hendrerit bibendum a eget justo. Donec id facilisis magna. Sed blandit lorem eget nunc sagittis, id imperdiet nibh bibendum. Mauris id lorem ac eros viverra iaculis. Vestibulum auctor lorem quis felis aliquam, sit amet fringilla velit pulvinar.</p>
<p>这是另一段文字介绍:</p>
<p class="intro2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, dolor eget lobortis finibus, mauris elit viverra orci, sit amet dictum ante tellus at odio. Fusce vel porta quam. Sed sit amet risus at dolor lobortis pharetra. Ut tincidunt urna vel turpis vestibulum, vel cursus turpis blandit. Duis nec justo in velit hendrerit bibendum a eget justo. Donec id facilisis magna. Sed blandit lorem eget nunc sagittis, id imperdiet nibh bibendum. Mauris id lorem ac eros viverra iaculis. Vestibulum auctor lorem quis felis aliquam, sit amet fringilla velit pulvinar.</p>
<p>这是一个有序列表:</p>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
<p>这是一个无序列表:</p>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ul>
</div>
<div class="center">
<h2>中心内容</h2>
<p>这里是主要内容区域,可以放置各种内容。</p>
</div>
</div>
<footer>
<p>版权所有 © 2021</p>
</footer>
</body>
</html>
```
CSS代码:
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
.container {
display: flex;
flex-wrap: wrap;
margin: 0 auto;
max-width: 960px;
}
.left, .right, .center {
flex-basis: 200px;
padding: 10px;
}
.left, .right {
background-color: #f1f1f1;
}
.center {
flex-grow: 1;
background-color: #fff;
}
.intro1 {
color: #ff0000;
}
.intro2 {
color: #0000ff;
}
ul, ol {
margin: 0;
padding: 0;
list-style: none;
}
ul li, ol li {
margin-bottom: 10px;
}
a {
color: #333;
text-decoration: none;
}
a:hover {
color: #ff0000;
}
```
效果预览:
![圣杯/双飞翼页面布局示例](https://i.loli.net/2021/04/04/7VvJZ6Sjcz31tXp.png)
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)