首页使用h2、p、hr、img，以及文本样式、文本格式化等标签，制作图文混排的网页。要求：内容自选，页面美观，有创意，独立完成。

使用h2、p、hr、img，以及文本样式、文本格式化等标签，制作图文混排的网页。要求：内容自选，页面美观，有创意，独立完成。

时间: 2024-09-13 08:06:32 浏览: 41

创建一个图文混排的网页可以采用HTML的基本结构，并结合CSS进行美化和布局。下面是一个简单的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>图文混排示例</title> <style> body { font-family: Arial, sans-serif; line-height: 1.6; margin: 0; padding: 20px; } .container { max-width: 900px; margin: auto; } h2 { color: #333; text-align: center; margin-bottom: 20px; } p { color: #555; } hr { width: 70%; border: none; height: 1px; background-color: #ccc; margin: 40px 0; } img { display: block; margin: 0 auto; max-width: 100%; height: auto; margin-bottom: 20px; } .text-formatting { background-color: #f0f0f0; padding: 10px; border-radius: 5px; } </style> </head> <body> <div class="container"> <h2>欢迎来到我的创新设计</h2> <div class="text-formatting"> <p>这是一个充满<em>创新</em>和<code>美感</code>的设计项目，我们采用了<h2>H2标题</h2>展示重要信息。</p> <img src="path_to_your_image.jpg" alt="图片描述"> <hr> <p>通过合理的<mark>图片混排</mark>和精心选择的<del>文字颜色</del>，使得整个页面既视觉上吸引人又易于理解。</p> </div> </div> </body> </html> ``` 在这个例子中，我们创建了一个包含标题、段落、水平线和图片的页面。`<h2>`用于设置大标题，`<p>`用于普通文本，`<hr>`创建了一条分隔线，`<img>`展示了图像，而`.text-formatting` CSS 类则应用于包含文本样式的部分，如斜体、粗体、下划线等。

阅读全文