给我一个简单的响应式布局页面代码
时间: 2024-05-01 19:22:52 浏览: 13
以下是一个简单的响应式布局页面代码示例:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>响应式布局页面</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
nav {
background-color: #ccc;
padding: 10px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin: 0 10px;
}
main {
padding: 20px;
text-align: center;
}
section {
display: inline-block;
margin: 20px;
padding: 10px;
background-color: #eee;
text-align: center;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
@media (max-width: 768px) {
nav li {
display: block;
margin: 10px 0;
}
}
</style>
</head>
<body>
<header>
<h1>响应式布局页面</h1>
</header>
<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>
<section>
<h2>区域1</h2>
<p>这是一段区域1的内容。</p>
</section>
<section>
<h2>区域2</h2>
<p>这是一段区域2的内容。</p>
</section>
<section>
<h2>区域3</h2>
<p>这是一段区域3的内容。</p>
</section>
</main>
<footer>
<p>版权所有 © 2021</p>
</footer>
</body>
</html>
```
在上面的代码中,我们通过使用媒体查询来实现页面的响应式布局。在窗口宽度小于或等于 768 像素时,导航栏中的链接会变成垂直排列。这可以使页面在小屏幕设备上更加易于浏览。