首页用css布局来写个介绍成都的网页

用css布局来写个介绍成都的网页

时间: 2024-12-14 08:18:53 浏览: 10

创建一个介绍成都的网页，我们可以利用CSS进行美观而直观的布局设计。下面是一个简单的HTML和CSS示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>成都之旅</title> <style> /* CSS样式 */ body { font-family: Arial, sans-serif; background-color: #f5f5f5; margin: 0; padding: 0; } .container { max-width: 1200px; margin: 0 auto; /* 居中 */ padding: 20px; box-sizing: border-box; } header { background-color: #4CAF50; color: white; text-align: center; padding: 10px; } h1 { margin-bottom: 10px; } section { display: flex; justify-content: space-between; gap: 20px; } aside { width: 30%; padding: 20px; background-color: #f1f1f1; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } article { flex: 70%; padding: 20px; } ul { list-style-type: disc; margin-left: 20px; } footer { background-color: #333; color: white; text-align: center; padding: 10px; } </style> </head> <body> <div class="container"> <header> <h1>魅力成都</h1> </header> <section> <aside> <h2>简介</h2> <ul> <li>成都，简称“蓉”，古称蜀，有“天府之国”之称...</li>  </ul> </aside> <article> <h2>特色景点</h2> <ul> <li>宽窄巷子</li> <li>武侯祠</li> <li>锦里</li>  </ul> <h2>美食推荐</h2> <ul> <li>火锅</li> <li>小吃街</li> </ul> </article> </section> <footer> 更多精彩内容敬请关注我们的网站... </footer> </div> </body> </html> ``` 这个例子中，我们使用了flex布局来组织页面结构，分为侧边栏（包含简短的介绍）和主要内容区域（包括景点和美食）。注意，这是一个基础模板，你可以根据需要添加更多的图片、链接、详细描述等。

阅读全文