简洁款个人主页源代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>个人主页</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f2f2f2;
      }
      
      header {
        background-color: #333;
        color: white;
        text-align: center;
        padding: 20px;
      }
      
      h1 {
        margin-top: 0;
      }
      
      nav {
        background-color: #f2f2f2;
        text-align: center;
        padding: 10px;
        margin-bottom: 20px;
      }
      
      nav a {
        text-decoration: none;
        color: #333;
        padding: 10px 20px;
        border: 1px solid #333;
        border-radius: 20px;
        margin-right: 10px;
        transition: background-color 0.3s ease;
      }
      
      nav a:hover {
        background-color: #333;
        color: white;
      }
      
      section {
        margin: 20px;
        background-color: white;
        padding: 20px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.3);
      }
      
      section h2 {
        margin-top: 0;
      }
      
      footer {
        background-color: #333;
        color: white;
        text-align: center;
        padding: 20px;
        margin-top: 20px;
      }
      
      @media (min-width: 768px) {
        nav {
          display: flex;
          justify-content: center;
        }
        
        nav a {
          margin-right: 0;
        }
        
        section {
          margin: 20px auto;
          max-width: 700px;
        }
      }
    </style>
  </head>
  <body>
    <header>
      <h1>欢迎来到我的个人主页</h1>
      <p>这是我的个人信息和兴趣爱好。</p>
    </header>
    <nav>
      <a href=" ">首页</a>
      <a href="#">个人资料</a>
      <a href="#">兴趣爱好</a>
    </nav>
    <section>
      <h2>个人资料</h2>
      <p>姓名：XXX</p>
      <p>年龄：XX岁</p>
      <p>性别：XXX</p>
      <p>职业：XXX</p>
    </section>
    <section>
      <h2>兴趣爱好</h2>
      <p>我喜欢XXX，XXX，XXX等等。</p>
    </section>
    <section>
      <h2>联系方式</h2>
      <p>电话：XXX-XXXX-XXXX</p>
      <p>邮箱：XXX@XXX.com</p>
    </section>
    <footer>
      <p> 2023 by My Personal Website. All rights reserved.</p>
    </footer>
  </body>
</html>

文章版权归作者所有，未经允许请勿转载。

THE END