拟态UI个人博客HTML+CSS+JS示例代码

这是一个简单的拟态UI个人博客的HTML+CSS+JS代码示例，包含了一个顶部的标题栏、导航栏、主要内容区域和页脚。你可以根据自己的需求进行修改和扩展。注意，这只是一个基础的示例，你可能需要根据自己的需求进一步完善和美化页面。

HTML 代码

<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>拟态UI个人博客</title>
  <link rel='stylesheet' href='styles.css'>
</head>

<body>
  <header>
    <h1>My Blog</h1>
  </header>

  <nav>
    <ul>
      <li><a href='#'>Home</a></li>
      <li><a href='#'>About</a></li>
      <li><a href='#'>Blog</a></li>
      <li><a href='#'>Contact</a></li>
    </ul>
  </nav>

  <section class='main-section'>
    <article>
      <h2>Welcome to My Blog</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus iaculis sapien sed felis vulputate
        ultrices. Nullam eget fermentum lectus. Vivamus id nulla in ligula dignissim aliquam. Nullam bibendum
        tristique mauris, et tincidunt turpis interdum sed.</p>
    </article>

    <aside>
      <h3>Latest Posts</h3>
      <ul>
        <li><a href='#'>Post 1</a></li>
        <li><a href='#'>Post 2</a></li>
        <li><a href='#'>Post 3</a></li>
      </ul>
    </aside>
  </section>

  <footer>
    <p>&copy; 2021 My Blog. All rights reserved.</p>
  </footer>

  <script src='script.js'></script>
</body>

</html>

CSS 代码

/* styles.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

header {
  background-color: #F0F2F5;
  text-align: center;
  padding: 20px;
}

nav {
  background-color: #F0F2F5;
  padding: 10px;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
}

nav ul li {
  margin: 0 10px;
}

nav ul li a {
  text-decoration: none;
  color: #333;
}

main-section {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px;
}

article {
  flex: 2;
  background-color: #F0F2F5;
  padding: 10px;
}

aside {
  flex: 1;
  background-color: #F0F2F5;
  padding: 10px;
}

footer {
  background-color: #F0F2F5;
  text-align: center;
  padding: 10px;
}

JavaScript 代码

// script.js (空文件)