html个人博客网站简单模板

原创已于 2024-12-15 15:56:59 修改 · 595 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #前端 #javascript

于 2024-12-15 15:53:57 首次发布

本项目是基于html开发的个人博客模板类型，可以通过修改相关参数，增加样式拓展达到预想的效果!

网站的样式如下

模板代码如下

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的个人博客</title>
<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
  }

  header {
    background: #333 url('header-bg.jpg') no-repeat center/cover;
    color: white;
    text-align: center;
    padding: 2rem 1rem;
  }

  header h1 {
    font-size: 3rem;
    margin-bottom: 0.5rem;
  }

  nav {
    background: #444;
    color: white;
    padding: 1rem;
    text-align: center;
  }

  nav a {
    color: white;
    margin: 0 1rem;
    text-decoration: none;
  }

  .container {
    width: 80%;
    margin: auto;
    overflow: hidden;
  }

  main {
    float: left;
    width: 70%;
    padding: 1rem;
  }

  aside {
    float: right;
    width: 25%;
    background: #fff;
    padding: 1rem;
    margin-left: 2rem;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }

  footer {
    clear: both;
    text-align: center;
    padding: 1rem;
    background: #333;
    color: white;
  }

  article {
    background: #fff;
    padding: 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }

  article img {
    max-width: 100%;
    height: auto;
  }

  /* Responsive Design */
  @media(max-width: 768px) {
    .container, main, aside {
      width: 100%;
      margin: 0;
      float: none;
    }
  }
</style>
</head>
<body>

<header>
  <h1>欢迎来到我的博客</h1>
  <p>分享生活点滴，记录成长历程</p>
</header>

<nav>
  <a href="#home">首页</a>
  <a href="#about">关于我</a>
  <a href="#contact">联系我</a>
</nav>

<div class="container">

  <main>
    <article>
      <h2>我的第一篇文章</h2>
      <small>发布于 2024-12-15</small>
      <p>这里是文章的内容...</p>
      <img src="article-image.jpg" alt="文章图片">
    </article>
    <!-- 更多文章 -->
  </main>

  <aside>
    <h3>关于作者</h3>
    <p>这里是关于作者的一些介绍。</p>
  </aside>

</div>

<footer>
  <p>&copy; 2024 我的个人博客. All Rights Reserved.</p>
</footer>

</body>
</html>