给个响应式页面
时间: 2024-02-01 12:14:20 浏览: 23
好的,以下是一个简单的响应式页面示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>响应式页面示例</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #f2f2f2;
padding: 10px;
text-align: center;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin: 0 10px;
}
nav a {
color: #333;
text-decoration: none;
padding: 5px;
}
.content {
padding: 20px;
text-align: justify;
}
@media screen and (max-width: 768px) {
nav li {
display: block;
margin: 10px 0;
}
}
</style>
</head>
<body>
<header>
<h1>响应式页面示例</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor lobortis ante id malesuada. Morbi euismod nibh non tincidunt tincidunt. Fusce vitae massa sit amet justo hendrerit commodo. Sed tempor velit eu posuere interdum. Vivamus auctor mauris vel urna ultrices, in tempus ligula vestibulum. Nullam quis lacus ac magna malesuada accumsan in a est. Praesent quis tellus eu arcu interdum maximus ac sit amet orci. In hac habitasse platea dictumst.</p>
<p>Donec ut orci eu purus volutpat malesuada. Duis scelerisque risus vitae nibh aliquam viverra. Aenean mollis, nulla sed bibendum efficitur, ipsum est auctor turpis, et tincidunt sem felis ac metus. Suspendisse potenti. Donec eget quam eget dolor gravida faucibus. Vestibulum vel ullamcorper lectus. Sed dictum tortor et nibh malesuada, vel consequat nisl vehicula. Aliquam erat volutpat. Sed euismod vulputate risus, eget rhoncus mauris molestie vel.</p>
<p>Curabitur sed elit vitae enim congue laoreet. Sed at purus eu velit luctus rutrum vel vel lacus. Sed mollis tincidunt augue, et venenatis libero bibendum vel. Fusce nec enim faucibus, efficitur nulla in, bibendum massa. Sed vel tincidunt turpis. Nullam euismod eleifend nunc, at porta mi interdum eu. Sed pellentesque, quam in dictum faucibus, velit lorem luctus diam, sed commodo risus erat eu ipsum. Fusce in dictum ipsum. Sed id nulla vel nulla posuere bibendum nec eget metus.</p>
</div>
</body>
</html>
```
上面的示例演示了一个简单的响应式页面,其中包括一个固定的顶部导航栏和一个可自适应的内容区域。在窄屏幕下,导航栏会变成垂直排列以适应小屏幕设备。您可以尝试在不同大小的设备上查看此页面,以查看其响应式效果。