写一个利用div+css布局的页面完整代码
时间: 2023-08-25 12:17:49 浏览: 160
网页布局div+css
很抱歉,我是一个自然语言生成模型,无法提供代码生成服务。但是,我可以提供一个简单的HTML页面的布局示例,您可以根据自己的需要进行修改和优化。
```html
<!DOCTYPE html>
<html>
<head>
<title>简单的HTML页面布局示例</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
.nav {
background-color: #eee;
padding: 10px;
text-align: center;
}
.main {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
margin: 10px;
padding: 20px;
width: 400px;
}
.footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header class="header">
<h1>网页标题</h1>
</header>
<nav class="nav">
<ul>
<li><a href="#">链接1</a></li>
<li><a href="#">链接2</a></li>
<li><a href="#">链接3</a></li>
<li><a href="#">链接4</a></li>
</ul>
</nav>
<main class="main">
<div class="card">
<h2>卡片标题1</h2>
<p>卡片内容1</p>
</div>
<div class="card">
<h2>卡片标题2</h2>
<p>卡片内容2</p>
</div>
<div class="card">
<h2>卡片标题3</h2>
<p>卡片内容3</p>
</div>
<div class="card">
<h2>卡片标题4</h2>
<p>卡片内容4</p>
</div>
</main>
<footer class="footer">
<p>版权信息</p>
</footer>
</body>
</html>
```
这是一个简单的三栏布局,包含了页头、导航、内容区和页脚。利用CSS的flex布局,可以实现响应式布局,适应不同尺寸的屏幕。您可以根据需要添加、删除或修改样式,实现您自己的页面布局。
阅读全文