首页css简单作品源代码

css简单作品源代码

时间: 2024-10-17 11:14:53 浏览: 42

CSS（层叠样式表）是一种用于描述HTML元素外观和布局的语言，下面是一个简单的HTML页面配合CSS样式的例子： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>简单的CSS示例</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; } .container { width: 80%; margin: 0 auto; padding: 20px; border: 1px solid #ccc; box-sizing: border-box; } h1 { color: #333; text-align: center; } p { line-height: 1.6; color: #666; } button { display: block; width: 150px; height: 40px; margin: 20px auto; background-color: #007BFF; color: white; border: none; cursor: pointer; } </style> </head> <body> <div class="container"> <h1>欢迎来到我的简单网站</h1> <p>这是一个使用了基本CSS样式的页面。</p> <button onclick="alert('点击按钮！')">点击我</button> </div> </body> </html> ``` 这个例子中，CSS设置了整个文档的一些基础样式，如字体、背景色等，并且为`.container`、`h1`和`p`元素以及按钮添加了特定样式。当用户点击按钮时，会弹出一个警告框。

阅读全文