首页给我写个静态的css+html静态页面

给我写个静态的css+html静态页面

时间: 2024-04-20 21:26:21 浏览: 92

当然可以！以下是一个简单的示例，演示如何使用 HTML 和 CSS 创建一个静态页面： ```html <!DOCTYPE html> <html> <head> <title>静态页面示例</title> <style> /* CSS 样式 */ body { font-family: Arial, sans-serif; background-color: #f2f2f2; margin: 0; padding: 0; } .container { max-width: 800px; margin: 0 auto; padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h1 { color: #333; } p { color: #666; } .button { display: inline-block; padding: 10px 20px; background-color: #007bff; color: #fff; text-decoration: none; border-radius: 4px; transition: background-color 0.3s ease; } .button:hover { background-color: #0056b3; } </style> </head> <body> <div class="container"> <h1>Welcome to My Website</h1> <p>This is a static HTML page with some basic styling.</p> <a href="#" class="button">Learn More</a> </div> </body> </html> ``` 这个示例创建了一个简单的静态页面。在 `<body>` 标签中，我们有一个包含标题、段落和按钮的容器 `<div class="container">`。使用 CSS 样式对页面进行基本的布局和设计。你可以根据需要修改样式和内容来创建你自己的静态页面。请将上述代码复制到一个新建的 HTML 文件中，然后在浏览器中打开该文件，你将看到一个简单的页面，其中包含标题、段落和按钮。

阅读全文