这个Markdown文本是一个响应式网页布局的简单示例。它使用Flexbox布局,将页面内容居中对齐。.container
类的最大宽度设置为500px,并添加了内边距、背景颜色和边框阴影等样式。
HTML代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>简单响应式网页布局</title>
<!-- 其他CSS样式 -->
</head>
<body>
<div class="container">
<h1>欢迎来到我的网站</h1>
<h2>这是一个简单的响应式网页布局示例</h2>
<a href="#">更多信息</a>
<ul>
<li>列表项1</li>
<li>列表项2</li>
</ul>
</div>
</body>
</html>
这个示例展示了如何使用HTML和CSS创建一个简单而直观的响应式网页布局,其中包含了一个标题、一个链接以及一个无序列表。通过使用Flexbox布局和CSS样式,该示例实现了在不同设备上的响应式布局。