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

这个代码示例展示了如何使用 HTML、CSS 和 JavaScript 创建一个简单的拟态 UI 个人博客。你可以通过复制粘贴代码来快速生成一个基本的个人博客，并在此基础上进行修改和扩展。

文件结构

index.html：主页面文件，包含博客的结构和内容。
styles.css：样式文件，定义博客的视觉效果。
script.js：脚本文件，添加一些交互功能。

代码示例

index.html

<!DOCTYPE html>
<html>
<head>
  <title>拟态 UI 个人博客</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="container">
    <header>
      <h1>个人博客</h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我</a></li>
        <li><a href="#">文章</a></li>
        <li><a href="#">联系我</a></li>
      </ul>
    </nav>
    <section>
      <article>
        <h2>文章标题</h2>
        <p>这是一篇示例文章的内容。</p>
      </article>
      <article>
        <h2>文章标题</h2>
        <p>这是另一篇示例文章的内容。</p>
      </article>
    </section>
    <aside>
      <h3>关于我</h3>
      <p>这里是关于我的简介。</p>
    </aside>
    <footer>
      <p>&copy; 2022 个人博客. All rights reserved.</p>
    </footer>
  </div>

  <script src="script.js"></script>
</body>
</html>

styles.css

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

.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

header {
  text-align: center;
  margin-bottom: 20px;
}

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;
  padding: 5px 10px;
  border-radius: 5px;
  background-color: #eee;
  transition: background-color 0.3s ease;
}

nav ul li a:hover {
  background-color: #ddd;
}

section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}

article {
  padding: 20px;
  background-color: #eee;
  border-radius: 5px;
}

aside {
  padding: 20px;
  background-color: #eee;
  border-radius: 5px;
}

footer {
  text-align: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ddd;
}

script.js

// script.js
// 可以在这里添加一些交互功能

使用方法

将以上代码保存为三个文件：index.html，styles.css和script.js。
将三个文件放在同一个文件夹中。
在浏览器中打开 index.html 文件。

扩展功能

添加更多文章内容
改变博客的样式
添加评论功能
添加搜索功能
集成社交媒体
使用 JavaScript 添加交互功能

小贴士

使用 CSS 预处理器 (如 Sass 或 Less) 可以更方便地管理样式。
使用 JavaScript 库 (如 jQuery) 可以简化代码编写。
使用图像和视频来丰富博客内容。
定期更新博客内容以吸引读者。