一个段落和一个带有两个按钮的表单。
<!DOCTYPE html> <html> <head> <title>我的网页</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #f2f2f2; padding: 10px; text-align: center; } main { margin: 15px; } form { display: flex; flex-direction: column; align-items: center; } button { margin-top: 10px; padding: 10px 20px; font-size: 16px; background-color: #4CAF50; color: white; border: none; cursor: pointer; } </style> </head> <body> <header> <h1>欢迎来到我的网页</h1> </header> <main> <p>这是一个简单的段落。</p> <form> <button type="button">按钮1</button> <button type="button">按钮2</button> </form> </main> </body> </html>
这个案例中,我们使用了 HTML 来创建网页的结构,并使用 CSS 来添加样式,在 CSS 中,我们定义了以下样式:
* `body`:设置页面中使用的字体和边距。
* `header`:设置标题的背景颜色、内边距和对齐方式。
* `main`:设置主要内容的边距。
* `form`:设置表单的显示方式和对齐方式。
* `button`:设置按钮的边距、内边距、字体大小、背景颜色、文字颜色和鼠标悬停效果。