首页用HTML和css编写一个关于中秋节的网页

用HTML和css编写一个关于中秋节的网页

时间: 2024-06-09 11:12:13 浏览: 143

好的，以下是一个简单的关于中秋节的网页示例代码： HTML代码： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>中秋节快乐！</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <header> <h1>中秋节快乐！</h1> </header> <main> <section> <h2>中秋节简介</h2> <p>中秋节，又称“月夕”、“仲秋节”、“八月节”、“追月节”等，是中国传统的重要节日之一，时间在农历八月十五日。古时候，人们在这一天要赏月、吃月饼、猜灯谜、赏桂花等，现在也成为了亲朋好友团聚的日子。</p> </section> <section> <h2>中秋节传统食品</h2> <ul> <li>月饼</li> <li>柚子</li> <li>桂花糕</li> <li>莲蓉糕</li> </ul> </section> <section> <h2>中秋节习俗</h2> <ol> <li>赏月</li> <li>吃月饼</li> <li>猜灯谜</li> <li>赏桂花</li> </ol> </section> </main> <footer> <p>版权所有 © 2021 中秋节快乐！</p> </footer> </body> </html> ``` CSS代码： ``` body { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; } header { background-color: #f5d76e; padding: 20px; text-align: center; } header h1 { margin: 0; } main { padding: 20px; } section { margin-bottom: 20px; } h2 { margin-top: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } ul li:before { content: "•"; margin-right: 10px; } ol li:before { content: counter(item) "."; counter-increment: item; margin-right: 10px; } footer { background-color: #e67e22; padding: 10px; color: #fff; text-align: center; } ``` 你可以将这些代码保存成两个文件，一个是 HTML 文件，一个是 CSS 文件，然后用浏览器打开 HTML 文件，就可以看到中秋节的网页了。

阅读全文