ZIP2323111411软四刘帆.zip 2.05MB

2402_83729258

资源文件列表:

2323111411软四刘帆.zip 大约有12个文件
  1. 2323111411软四刘帆/23软四刘帆/
  2. 2323111411软四刘帆/23软四刘帆/01.jpg 188.28KB
  3. 2323111411软四刘帆/23软四刘帆/02.jpg 676.84KB
  4. 2323111411软四刘帆/23软四刘帆/03.jpg 152.85KB
  5. 2323111411软四刘帆/23软四刘帆/04.jpg 161.84KB
  6. 2323111411软四刘帆/23软四刘帆/05.jpg 253.49KB
  7. 2323111411软四刘帆/23软四刘帆/about.html 2.26KB
  8. 2323111411软四刘帆/23软四刘帆/blog.html 2.89KB
  9. 2323111411软四刘帆/23软四刘帆/contact.html 3.83KB
  10. 2323111411软四刘帆/23软四刘帆/e9dd7fb0843e8ff40701654e960f9a4.jpg 712.05KB
  11. 2323111411软四刘帆/23软四刘帆/index.html 3.14KB
  12. 2323111411软四刘帆/23软四刘帆/portfolio.html 2.89KB

资源介绍:

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>&copy; 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>
100+评论
captcha
    相关资源
    类型标题大小时间
    ZIP基于 SpringBoot 的社区居民友爱互助平台12.64MB9月前
    ZIP大学生期末前端项目vue3+vant4+移动端 水果商城14.98MB9月前
    ZIP基于SpringBoot人事管理系统-课程设计-idea-MySQL38.42MB9月前
    ZIP单机版坦克大战代码（计算机体系结构课内实验）1005.03KB9月前
    ZIP面试题1面试题1面试题1面试题1面试题11.81MB9月前
    ZIPunix高级编程unix高级编程unix高级编程20.74MB9月前
    ZIP华为viso图标（用于网络拓扑图绘制）7.99MB9月前
    ZIPMFC下基于单文档的打印实例57.39MB9月前