HTML：博客页面制作

· · 个人记录

前言

本文章是对 HTML 的博客页面制作所出的教程，会使用 CSS 美化。

框架构造

首先，我们在 HTML 中写上博客页面基本框架。

首先，我们需要一个博客标题，我们可以使用 <h1> 标签来完成。

<html>
  <head>
    <title>blog</title>
  </head>
  <body>
    <h1>我的博客</h1>
  </body>
</html>

这样，我们就给我们的博客取了个名字。接下来，我们需要一张图片作为背景/插图使用。

背景

选择一张图片，在 <head> 整体内填写：

<style>
  body {
   background-size: 100%;
  }
</style>

接着把 <body> 更改为 <body background="图片地址">。 于是乎，我们的博客有了背景。

插图

如果不喜欢背景，可以使用插图的方式。

在合适的位置插入：

<p style="text-align: center"><!--图片居中，可以不要-->
<img src="图片地址">

并在 <style> 标签内写上：（可选）

img {
  border-radius: 15px;
}

可以让图片圆角化，更好看。 完美！

博客列表

我们可以使用 <a> 标签来引导博客地址。

<hr /><!--分割线，控制图片居中和文本居中-->
<a href="博客文章地址">第一篇博客</a>
<p>博客介绍……</p>

但是，这个分割线太不美观了，我们在 <style> 添加 <hr> 标签的美化：

.hr-solid-content{
    color: #a2a9b6;
    border: 0;
    font-size: 12px;
    padding: 1em 0;
    position: relative;
}
.hr-solid-content::before {
    content: attr(data-content);
    position: absolute;
    padding: 0 1ch;
    line-height: 1px;
    border: solid #d0d0d5;
    border-width: 0 99vw;
    width: fit-content;
    /* for IE浏览器 */
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
}

接着，把 <hr /> 换成 <hr class="hr-solid-content" data-content="文本"> 我们还可以给每篇博客的列表添加边框（在 <style> 中更改）：

#content {
            border: solid #87CEEB;   /*设置边框样式跟颜色*/
            margin: 0 auto;   /*设置div居中*/
            border-width: 2px; /*设置边框宽度*/
            border-radius: 7px;
        }
        .hr-solid-content{
    color: #a2a9b6;
    border: 0;
    font-size: 12px;
    padding: 1em 0;
    position: relative;
}
<div id="content">
  <a href="博客文章地址">第一篇博客</a>
  <p>博客介绍……</p>
</div>

最后进入优化阶段。

优化

这里不详细说明了，具体代码放这里了，需要自取：

<html>
  <head>
    <title>blog</title>
    <style>
      body {
        background-size: 100%;
      }
      img {
    border-radius: 15px;

}
.hr-solid-content{
    color: #a2a9b6;
    border: 0;
    font-size: 12px;
    padding: 1em 0;
    position: relative;
}
.hr-solid-content::before {
    content: attr(data-content);
    position: absolute;
    padding: 0 1ch;
    line-height: 1px;
    border: solid #d0d0d5;
    border-width: 0 99vw;
    width: fit-content;
    /* for IE浏览器 */
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%);
}
#content {
            border: solid #87CEEB;   /*设置边框样式跟颜色*/
            margin: 0 auto;   /*设置div居中*/
            border-width: 2px; /*设置边框宽度*/
            border-radius: 7px;
        }
        .hr-solid-content{
    color: #a2a9b6;
    border: 0;
    font-size: 12px;
    padding: 1em 0;
    position: relative;
}
h1 {
        padding:20px;
            font-weight:bold;
            font-size:30px;
                border-radius: 10px;
                    text-shadow:-1px 0 #333,
                        0 -1px #333,
                        1px 0 #fff,
                        0 1px #fff;
    }
    </style>
  </head>
  <body>
    <h1 align="center"><font color="blue">我的博客</font></h1>
    <p style="text-align: center">
    <img src="./img/blog.jpg" height="540px" width="960px">
    <hr class="hr-solid-content" data-content="hello">
    <br />
    <div id="content">
    <a href="博客文章地址">第一篇博客</a>
    <p>博客介绍……</p>
    </div>
  </body>
</html>

成品：