首页html里的<div>是干嘛的写个代码举个例子

html里的<div>是干嘛的写个代码举个例子

时间: 2024-03-04 21:48:59 浏览: 14

好的，以下是一个使用<div>标签的HTML代码示例： ```html <!DOCTYPE html> <html> <head> <title>使用div标签的示例</title> <style> .container { width: 80%; margin: 0 auto; background-color: #f2f2f2; padding: 20px; border: 1px solid #ddd; box-shadow: 0px 0px 5px #888; border-radius: 5px; } .title { font-size: 24px; font-weight: bold; margin-bottom: 10px; } .content { font-size: 16px; line-height: 1.5; margin-bottom: 20px; } .button { background-color: #4CAF50; color: #fff; padding: 10px 20px; border: none; border-radius: 3px; cursor: pointer; } </style> </head> <body> <div class="container"> <div class="title">这是一个示例标题</div> <div class="content"> <p>这是一个示例内容，使用了<div>标签来进行分组和格式化。</p> <p>通过在<div>标签中添加类名，可以对其中包含的元素进行整体样式控制。</p> <p>例如，这里的标题和内容都使用了不同的类名，并分别设置了不同的样式。</p> </div> <button class="button">这是一个示例按钮</button> </div> </body> </html> ``` 在这个示例中，我们使用了<div>标签来创建一个名为"container"的容器，并在其中包含了一个标题、一些内容和一个按钮。在<style>标签中，我们定义了不同的类名（例如"title"、"content"和"button"），并为它们设置了不同的样式。通过在<div>标签中添加这些类名，我们可以对其中包含的元素进行整体样式控制，从而使页面更加美观和易于阅读。