div布局

admin 2023年12月30日 07:41 36 0

以下是一个简单的HTML和CSS代码，用于创建一个包含标题和长内容的div布局：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      width: 80%;
      margin: 0 auto;
      padding: 20px;
      border: 1px solid #ccc;
    }
    
    .title {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 20px;
    }
    
    .content {
      margin-bottom: 40px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="title">标题</h1>
    <p class="content">这里是长内容的示例，你可以在这里写任何你想要的内容。这里是一个示例段落，它包含了一些文本和格式。你可以在这里添加更多的段落和格式，以满足你的需求。如果你需要添加更多的内容，请继续编写。</p>
  </div>
</body>
</html>

在上面的代码中，我们创建了一个名为`.container`的div，它包含了一个标题和一个长内容段落，我们使用CSS样式来设置div的宽度、边距、内边距和边框，我们还使用CSS样式来设置标题和内容的字体大小、字体粗细和边距，你可以根据需要修改这些样式。