当前位置:   article > 正文

一个简单的HTML 个人网页

一个简单的HTML 个人网页

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>个人网页</title> <style> body { font-family: Arial, sans-serif; background-color: #f1f1f1; margin: 0; padding: 0; }

  1. header {
  2. background-color: #333;
  3. color: #fff;
  4. padding: 20px;
  5. text-align: center;
  6. }
  7. h1 {
  8. margin: 0;
  9. }
  10. nav {
  11. background-color: #555;
  12. color: #fff;
  13. padding: 10px;
  14. }
  15. nav ul {
  16. margin: 0;
  17. padding: 0;
  18. list-style: none;
  19. text-align: center;
  20. }
  21. nav ul li {
  22. display: inline-block;
  23. margin-right: 20px;
  24. }
  25. nav ul li a {
  26. color: #fff;
  27. text-decoration: none;
  28. }
  29. section {
  30. padding: 20px;
  31. }
  32. footer {
  33. background-color: #333;
  34. color: #fff;
  35. padding: 20px;
  36. text-align: center;
  37. font-size: 14px;
  38. }
  39. &lt;/style>

</head> <body> <header> <h1>欢迎来到我的个人网页</h1> </header> <nav> <ul> <li><a href="#about">关于我</a></li> <li><a href="#skills">我的技能</a></li> <li><a href="#projects">我的项目</a></li> <li><a href="#contact">联系我</a></li> </ul> </nav> <section id="about"> <h2>关于我</h2> <p>你好,我是XXX,一名热爱编程的前端工程师。我喜欢探索新技术,并且不断提升自己的技能。</p> <p>在我的个人网页中,你可以了解我关于技术方面的知识和经验,还可以看到我的项目以及如何联系我。</p> </section> <section id="skills"> <h2>我的技能</h2> <ul> <li>HTML/CSS</li> <li>JavaScript</li> <li>React</li> <li>Vue.js</li> <li>Node.js</li> </ul> </section> <section id="projects"> <h2>我的项目</h2> <ul> <li>项目1:简历生成器</li> <li>项目2:电子商务网站</li> <li>项目3:博客系统</li> </ul> </section> <section id="contact"> <h2>联系我</h2> <p>如果你对我的个人网页或者项目有任何疑问或者建议,欢迎与我联系。</p> <p>Email: xxx@example.com</p> <p>电话: 123-456-7890</p> </section> <footer> © 2021 个人网页. All rights reserved. </footer> </body> </html>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/208688
推荐阅读
相关标签
  

闽ICP备14008679号