博客 HTML 设计

2025年3月17日 | 阅读 7 分钟

在本文中，我们将通过 HTML 设计创建一个博客。在文章的开头，我们将学习一些 HTML 基础知识和博客的含义。然后，我们将通过各种 HTML 博客设计的示例来理解这个概念。

HTML 是什么意思？

HTML 是超文本标记语言的缩写。它用于创建网页的结构。 HTML 的最新版本是 HTML5。

博客是什么意思？

博客（blog）是一个在线日记或信息网站，以倒序时间顺序显示信息，最新的帖子最先显示在顶部。它是一个作家或一群作家分享他们对个人主题观点的平台。

让我们来看一些 HTML 博客设计的例子。

示例 1

<! DOCTYPE html>
<html lang="en">
<head>
  <title> HTML blog design </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
body {
  background-color: rgb(255, 212, 255);
} 
h1 {
  margin-left: 600px;
}
h3 {
  margin-left: 640px;
}
#sunset {
  margin-left: 150px;
  border-top: 1px solid rgb(204, 204, 204);
  padding-top: 40px;
  width: 1100px;    
  z-index: 1;
}
#top-bar {
  margin-left: 450px;
  position: relative;
  bottom: 260px;
 }
#page {
  z-index: 2;
  border: 1px solid white;
  background-color: white;
  width: 600px;
  margin-left: 170px;
  margin-top: 80px;
  position: relative;
  bottom: 160px;
  padding-bottom: 400px  
}
</style>
<body>
<h1> HTML Blog Design </h1>
<div id="sunset">
<img src="1.png" width="1100" height="210">
  <p>
  <div id="top-bar"> Home / About Me / Contact </div>
  </p>
</div>
  <div id="page">
    <p>
    <h2> Blog Design </h2>
    </p>
</div>
</body>
</html>

说明

在上面的例子中，我们创建了一个 HTML 博客设计。

输出

示例 2

<! DOCTYPE html>
<html>
<head>
<title> HTML blog design </title>
  <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
* {
  box-sizing: border-box;
}
body {
  font-family: Arial;
  padding: 20px;
  background: #f1f1f1;
}
.header {
  padding: 30px;
  font-size: 40px;
  text-align: center;
  background: white;
}
.leftcolumn {   
  float: left;
  width: 75%;
}
.rightcolumn {
  float: left;
  width: 25%;
  padding-left: 20px;
}
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
.card {
   background-color: white;
   padding: 20px;
   margin-top: 20px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}
</style>
</head>
<body>
<div class="header">
  <h2> Blog Name </h2>
</div>
<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2> TITLE HEADING </h2>
      <h5> Title description, Dec 7, 2017 <h5>
      <div class="fakeimg" style="height:200px;"> Image </div>
      <p> Some text.. </p>
      <p> Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. </p>
    </div>
    <div class="card">
      <h2> TITLE HEADING </h2>
      <h5> Title description, Sep 2, 2017 </h5>
      <div class="fakeimg" style="height:200px;"> Image </div>
      <p> Some text.. </p>
      <p> Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. </p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2> About Me </h2>
      <div class="fakeimg" style="height:100px;"> Image </div>
      <p> Some text about me in culpa qui officia deserunt mollit anim.. </p>
    </div>
    <div class="card">
      <h3> Popular Post </h3>
      <div class="fakeimg"> Image </div> <br>
      <div class="fakeimg"> Image </div> <br>
      <div class="fakeimg"> Image </div>
    </div>
    <div class="card">
      <h3> Follow Me </h3>
      <p> Some text.. </p>
    </div>
  </div>
</div>
<div class="footer">
  <h2> Footer </h2>
</div>
</body>
</html>

说明

在上面的例子中，我们创建了一个 HTML 博客设计。

输出

示例 3

<! DOCTYPE html>
<html lang="en">
<head>
  <title> HTML blog design </title>
  <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
@import url(<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;1,400&display=swap" rel="stylesheet">);
:root {
    --body-bg: rgba(241, 241, 241, 1);
    --grid-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
    --main-color: #fff;
    --hover-bg-clr: #cccccc;
    --black-clr: #000;
}
*{
    font-family: lato, sans-serif;
    box-sizing: border-box;
}
body {
    background: var(--body-bg);
    margin: 0px;
    padding: 0px;
}
.nav-ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: flex;
    background: transparent;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
}
.nav-ul li {
    line-height: 2.5;
}
.nav-ul > li > a {
    text-decoration: none;
    color: var(--black-clr);
    display: block;
    padding: 0 3rem;
    transition: background-color 500ms, color 500ms;
}
@media (max-width: 665px) {
    .nav-ul > li > a{
        padding: 0 1rem;
    }
}
.nav-ul > li > a:hover {
    background-color: rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 4rem rgba(0, 0, 0, 1);
    color: var(--body-bg);
}
.heading {
    font-size: 2.4rem;
    margin-top: 4rem;
    text-align: center;
    text-transform: uppercase;
}
.tag-line {
    margin-top: 0px;
    font-size: 0.9rem;
    text-transform: uppercase;
    text-align: center;
}
.container {
    height: 100%;
    width: 100%;
    margin-bottom: 1rem;
    padding: 30px;
    display: grid;
    grid-template-columns: 65% 35%;
    grid-template-rows: 60vh 18vh 32.5vh 35vh 7vh;
    grid-gap: 1.5rem; 
    overflow: hidden;
}
.article-1 {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    box-shadow: var(--grid-shadow);
    overflow: hidden;
}
.img-1 {
    width: 100%;
    height: auto;
}
.article-content {
    text-align: justify;
    margin: 0px;
    padding: 0px 2rem;
    background-color: var(--main-color);
    height: 100%;
}
.article-heading {
    margin-top: -5px;
    padding-top: 1rem;
}
.article-txt {
    margin-top: 2rem;
}
.article-btn {
    margin-top: 4rem;
    text-decoration: none;
    color: var(--black-clr);
    font-weight: 500;
    display: inline-block;
    padding: 0.5rem 1.2rem;
    border-radius: 0.7rem;
    border: 1px solid rgba(0, 0, 0, 0.5);
    transition: transform 400ms, box-shadow 500ms;
}
.article-btn:hover {
    transform: scale(1.05);
    border: none;
    box-shadow: 0 0 1.5rem 0 #d3d3d3;
}
.article-2 {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    box-shadow: var(--grid-shadow); 
    overflow: hidden;      
}
.img-2 {
    width: 100%;
    height: auto;
}
.article-3 {
    box-shadow: var(--grid-shadow);
    grid-column: 2 / 3;
    grid-row: 2 / 4;
    overflow: hidden;
}
.popular {
    font-weight: lighter;
    font-size: 1.6rem;
    margin: 0px;
    padding: 1rem 2rem;
    background-color: var(--body-bg);
}
.s-img {
    height: 3rem;
    width: 3rem;
}
.img-link {
    background: var(--main-color);
    display: block;
    border-bottom: 1px solid #cccccc;
    text-decoration: none;
    color: var(--black-clr);
    font-size: 1.5rem;
    padding: 0.62rem 2rem;
}
.img-link:hover {
    background: var(--hover-bg-clr);
}
.article-4 {
    box-shadow: var(--grid-shadow);
    grid-column: 1 / 2;
    grid-row: 3 / 6;
    overflow: hidden;
}
.img-3 {
    width: 100%;
    height: auto;
}
.article-5 {
    grid-column: 2 / 3;
    grid-row: 4 / 5;
    box-shadow: var(--grid-shadow);
    overflow: hidden;
}
.tag-container {
    padding-left: 1rem;
    padding-top: 1rem;
    background: var(--main-color);
    height: 100%;
}
.tags {
    display: inline-block;
    text-decoration: none;
    color: var(--black-clr);
    background: var(--hover-bg-clr);
    line-height: 1.5;
    height: 1.5rem;
    width: max-content;
    margin: 0.15rem;
    padding: 0 1rem;
    border-radius: 0.3rem;
}
.footer {
    height: 12rem;
    background: var(--black-clr);
    display: grid;
    place-items: center;
}
.footer-text {
    color: var(--body-bg);
}
@media (max-width: 1105px) {
    .container {
        grid-template-rows: 60vh 20vh 33vh 45vh 1vh;
    }
    .article-btn {
        margin-top: 6rem;
    }
    .img-link {
        padding: 0.72rem 2rem;
    }
}
@media (max-width: 852px) {
    .container {
        grid-template-columns: 100%;
        grid-template-rows: 31.5rem 33.8rem 23.2rem 31.5rem 11rem;
    }
    .article-1 {
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }
    .article-2 {
        grid-column: 1 / 2;
        grid-row: 2 / 3;
    }
    .article-3 {
        grid-column: 1 / 2;
        grid-row: 3 / 4;
    }
    .article-4 {
        grid-column: 1 / 2;
        grid-row: 4 / 5;
    }
    .article-5 {
        grid-column: 1 / 2;
        grid-row: 5 / 6;
    }
    .article-btn {
        margin-top: 1.5em;
    }
};
</style>
<body>
    <header>
The error in responsiveness is only due to the navigation bar of code pen you can test it by copy pasting in you code editor Thank you!! 
        <nav>
            <ul class="nav-ul">
                <li> <a href="#"> Home </a> </li>
                <li> <a href="#"> About </a> </li>
                <li> <a href="#"> Contact </a> </li>
                <li> <a href="#"> Blogs </a> </li>
            </ul>
        </nav>
    </header>
    <main>
        <h1 class="heading"> my blog </h1>
        <p class="tag-line"> Welcome to blogs regarding Lorem Ipsum </p>
        <div class="container">
            <div class="article-1">
                <img class="img-1" src="1.png" alt="forest image">
                <div class="article-content">
                    <h2 class="article-heading"> A Day in Woods </h2>
                    <p class="article-txt"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur officia commodi similique dolore itaque impedit mollitia totam minus accusantium tempore saepe doloremque. Quibusdam dolor inventore facere ratione cumque numquam cupiditate reprehenderit non explicabo aliquam nobis repellat impedit minima repudiandae. </p>
                    <a class="article-btn" href="#"> READ MORE > > </a>
                </div>    
            </div>
            <div class="article-2">
                <img class="img-2" src="6.png" alt="Mountains with clear blue sky">
                <div class="article-content">
                    <h2 class="article-heading"> About Me </h2>
                    <p> Tenetur officia commodi similique dolore itaque impedit mollitia totam minus accusantium tempore saepe doloremque. Quibusdam dolor inventore facere ratione. </p>
                </div>                   
            </div>
            <div class="article-3">
                <p class="popular"> Popular blogs </p>
                <a class="img-link" href="#"> <img class="s-img" src="1.png" alt=""> <span class="popular-link"> Lorem </span> </a>
                <a class="img-link" href="#"> <img class="s-img" src="4.png" alt=""> <span class="popular-link"> Ipsum </span> </a>
                <a class="img-link" href="#"> <img class="s-img" src="4.png" alt=""> <span class="popular-link"> Dolor </span> </a>
                <a class="img-link" href="#"> <img class="s-img" src="5.png" alt=""> <span class="popular-link"> Tenetur </span> </a>
            </div>
            <div class="article-4">
                <img class="img-3" src="3.png" alt="mountains with cloudy sky">
                <div class="article-content">
                    <h2 class="article-heading"> Nature Is The Most Beautiful </h2>
                    <p class="article-txt"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur officia commodi similique dolore itaque impedit mollitia totam minus accusantium tempore saepe doloremque. Quibusdam dolor inventore facere ratione cumque numquam cupiditate reprehenderit non explicabo aliquam nobis repellat impedit minima repudiandae. </p>
                    <a class="article-btn" href="#"> READ MORE > > </a>
                </div> 
            </div>
            <div class="article-5">
                <p class="popular"> Tags </p>
                <div class="tag-container">    
                    <a class="tags" href=""> Encourage </a>
                    <a class="tags" href=""> Confidence </a>
                    <a class="tags" href=""> Stage </a>
                    <a class="tags" href=""> Family </a>
                    <a class="tags" href=""> Success </a>
                    <a class="tags" href=""> Team work </a>
                    <a class="tags" href=""> Motivational </a>
                    <a class="tags" href=""> Create yourself </a>
                    <a class="tags" href=""> Self Confidence </a>
                    <a class="tags" href=""> Struggle </a>
                    <a class="tags" href=""> Games </a>
                    <a class="tags" href=""> failure </a>
                    <a class="tags" href=""> Practice </a>
                    <a class="tags" href=""> Exercise </a>
                </div>
            </div>
        </div>
    </main>
    <footer>
        <div class="footer">
            <p class="footer-text"> © 2020-2021 </p>
        </div>
    </footer>
</body>
</html>

说明

在上面的例子中，我们创建了一个 HTML 博客设计。

输出

下一个主题什么是标签

博客 HTML 设计

HTML 是什么意思？

博客是什么意思？

让我们来看一些 HTML 博客设计的例子。

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

博客

博客 HTML 设计

HTML 是什么意思？

博客是什么意思？

让我们来看一些 HTML 博客设计的例子。

示例 2

示例 3

相关帖子

ChatGPT 对新闻业的影响

如何写项目介绍

适用于 macOS 的 WinSCP

去阿布扎比前要知道的事

Vault 下载

土壤类型

素食者应避免的食物

复式记账法的优缺点

面包板

3Ds Max vs Maya

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器