时间：2025-12-14 点击： 次 来源：网络 作者：佚名 - 小 + 大
如何制作一个网站首页（index.html）- 初学者指南什么是网站首页？制作网站首页的基本步骤
一个简单的网站首页HTML实例 <!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的第一个网站 - 首页</title> <style> /* 基础样式重置 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; } /* 头部样式 */ header { background-color: #4CAF50; color: white; padding: 1rem; text-align: center; } /* 导航栏样式 */ nav { background-color: #333; padding: 0.5rem; } nav ul { list-style: none; display: flex; justify-content: center; } nav ul li { margin: 0 1rem; } nav ul li a { color: white; text-decoration: none; padding: 0.5rem 1rem; } nav ul li a:hover { background-color: #555; border-radius: 4px; } /* 主要内容区域样式 */ .container { max-width: 1200px; margin: 0 auto; padding: 2rem; } .hero { text-align: center; padding: 3rem 1rem; background-color: #f4f4f4; margin-bottom: 2rem; } .hero h2 { margin-bottom: 1rem; color: #4CAF50; } .btn { display: inline-block; background-color: #4CAF50; color: white; padding: 0.7rem 1.5rem; text-decoration: none; border-radius: 4px; margin-top: 1rem; } .btn:hover { background-color: #45a049; } /* 内容区块样式 */ .content-section { margin-bottom: 2rem; } .content-section h3 { margin-bottom: 1rem; color: #4CAF50; border-bottom: 2px solid #f4f4f4; padding-bottom: 0.5rem; } /* 页脚样式 */ footer { background-color: #333; color: white; text-align: center; padding: 1rem; margin-top: 2rem; } </style></head><body> <!-- 网站头部 --> <header> <h1>欢迎来到我的网站</h1> <p>一个为初学者创建的示例网站</p> </header> <!-- 导航栏 --> <nav> <ul> <li><a href="index.html">首页</a></li> <li><a href="about.html">关于我们</a></li> <li><a href="services.html">服务</a></li> <li><a href="contact.html">联系我们</a></li> </ul> </nav> <!-- 主要内容区域 --> <div> <!-- 欢迎横幅 --> <section> <h2>欢迎访问我们的网站</h2> <p>这里是一个简单的网站首页示例，展示了基本的HTML结构和CSS样式。</p> <a href="#">了解更多</a> </section> <!-- 内容区块1 --> <section> <h3>关于我们</h3> <p>我们是一家致力于帮助初学者学习网页设计的团队。通过简单的示例和详细的解释，我们希望能够帮助更多人掌握网站开发的基础知识。</p> </section> <!-- 内容区块2 --> <section> <h3>我们的服务</h3> <p>我们提供以下服务：</p> <ul> <li>网页设计教程</li> <li>HTML/CSS代码示例</li> <li>响应式网站设计指导</li> </ul> </section> <!-- 内容区块3 --> <section> <h3>联系我们</h3> <p>如果您有任何问题或建议，请随时与我们联系：</p> <p>邮箱：contact@example.com</p> <p>电话：123-456-7890</p> </section> </div> <!-- 网站页脚 --> <footer> <p>© 2023 我的网站. 保留所有权利.</p> </footer></body></html>代码解析
保存和查看网站
下一步学习建议
|
上一篇：快解析、花生壳、NAT123、路由侠，免费内网穿透工具怎么选？
下一篇：什么是HTML及简单示例！