首页实现一个官网首页源代码，用html和css

实现一个官网首页源代码，用html和css

时间: 2024-11-20 10:37:53 浏览: 9

实现一个简单的官网首页源代码，我们可以创建一个基本的HTML结构，并搭配CSS来美化页面。下面是一个基础的例子： **index.html:** ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>官方网站</title> <link rel="stylesheet" href="styles.css"> </head> <body>  <header> <div class="logo-container"> <img src="logo.png" alt="公司Logo"> </div> </header>  <nav> <ul> <li><a href="#about">关于我们</a></li> <li><a href="#services">服务</a></li> <li><a href="#portfolio">作品集</a></li> <li><a href="#contact">联系我们</a></li> </ul> </nav>  <main> <section id="about"> <h2>关于我们</h2> <p>这里是关于我们的简短描述...</p> </section>  </main>  <footer> <p>© 2023 网站名称 | All rights reserved.</p> </footer> </body> </html> ``` **styles.css:** ```css * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: Arial, sans-serif; } header { background-color: #f5f5f5; padding: 20px; } .logo-container { display: flex; align-items: center; } nav ul { list-style-type: none; display: flex; justify-content: space-around; } nav a { color: #333; text-decoration: none; } #about { padding: 40px; background-color: #e9ecef; } /* 添加更多的样式，如颜色、间距等，按需调整 */ ```

阅读全文