首页写关于遂宁的网页html css

写关于遂宁的网页html css

时间: 2024-12-14 14:21:46 浏览: 10

在创建关于遂宁的网页时，HTML、CSS和可能的JavaScript是关键的技术。HTML（Hypertext Markup Language）用于定义网页的内容结构，CSS（Cascading Style Sheets）则负责美化和布局。以下是一个简单的示例，展示了如何用HTML和CSS来介绍遂宁： ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>遂宁之窗</title> <link rel="stylesheet" href="styles.css">  </head> <body> <header> <h1>欢迎来到遂宁市</h1> <nav> <ul> <li><a href="#about">关于遂宁</a></li> <li><a href="#culture">文化特色</a></li> <li><a href="#tourism">旅游景点</a></li> </ul> </nav> </header> <main> <section id="about"> <h2>关于遂宁</h2> <p>遂宁位于四川省中部，以其佛教名胜灵山宝光寺和中国死海著名...</p> </section> <section id="culture"> <h2>文化底蕴</h2> <p>遂宁是中国三国文化的重要地，还有丰富的民间艺术...</p> </section> <section id="tourism"> <h2>旅游推荐</h2> <ul> <li>圣莲岛</li> <li>龙凤古镇</li> <li>三苏祠</li> </ul> </section> </main> <footer> <p>版权所有 © 遂宁市旅游局 | 访问：www.shenningshi.gov.cn</p> </footer> </body> </html> ``` ```css /* styles.css */ body { font-family: Arial, sans-serif; } header { background-color: #f0e68c; padding: 20px; } nav ul { list-style-type: none; display: flex; } nav a { color: #333; text-decoration: none; margin-right: 20px; } main { max-width: 900px; margin: 0 auto; padding: 20px; } section { margin-bottom: 30px; } footer { background-color: #ddd; padding: 10px; text-align: center; } ```

阅读全文