2323111411软四刘帆.zip
资源内容介绍
2323111411软四刘帆.zip <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>联系我</title> <link rel="stylesheet" href="styles.css"> <style> body { font-family: Arial, sans-serif; background-color: #f5f5f5; color: #333; margin: 0; padding: 0; } nav { position: fixed; top: 0; left: 0; width: 100%; background-color: #333; z-index: 999; } nav ul { list-style-type: none; padding: 0; margin: 0; } nav ul li { display: inline-block; margin-right: 10px; } nav ul li a { color: #fff; text-decoration: none; font-size: 18px; padding: 10px 20px; } nav ul li a:hover { background-color: #555; } .container { width: 80%; margin: 0 auto; overflow: hidden; } header { padding: 70px 0; text-align: center; } header h1 { margin: 0; font-size: 36px; color: #fff; } #contact { padding: 120px 0; } #contact .container { text-align: center; } #contact form { max-width: 500px; margin: 0 auto; } #contact input[type="text"], #contact input[type="email"], #contact textarea { width: 100%; padding: 10px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 5px; box-sizing: border-box; } #contact textarea { height: 150px; } #contact button { background-color: #ff9800; color: #fff; border: none; padding: 10px 20px; font-size: 18px; border-radius: 5px; cursor: pointer; } #contact button:hover { background-color: #f57c00; } #thank-you { display: none; color: #4CAF50; font-size: 20px; margin-top: 20px; } footer { background-color: #333; color: #fff; padding: 20px 0; text-align: center; } </style></head><body> <nav> <div class="container"> <ul> <li><a href="index.html">首页</a></li> <li><a href="about.html">关于我</a></li> <li><a href="portfolio.html">作品集</a></li> <li><a href="blog.html">博客</a></li> <li><a href="contact.html">联系我</a></li> </ul> </div> </nav> <header> <div class="container"> <h1>联系我</h1> </div> </header> <section id="contact"> <div class="container"> <h2>有什么可以帮助您的吗？</h2> <form id="contact-form" action="contact.php" method="post"> <input type="text" name="name" placeholder="您的姓名" required> <input type="email" name="email" placeholder="您的邮箱" required> <textarea name="message" placeholder="请留言" required></textarea> <button type="submit">发送</button> </form> <div id="thank-you">感谢您的留言，我们会尽快与您联系。</div> </div> </section> <footer> <div class="container"> <p>© 2024 我的个人网页</p> </div> </footer> <script> document.getElementById("contact-form").addEventListener("submit", function(event) { event.preventDefault(); document.getElementById("thank-you").style.display = "block"; document.getElementById("contact-form").reset(); }); </script></body></html>