简单的博客系统(CSS+HTML)

最新推荐文章于 2024-06-17 08:00:00 发布

只羡鸳鸯不羡仙仙

最新推荐文章于 2024-06-17 08:00:00 发布

阅读量1.1k

点赞数 2

文章标签：前端 java

本文链接：https://blog.csdn.net/m0_68989458/article/details/126272523

版权

本文介绍了如何使用CSS和HTML构建一个简单的博客系统，涵盖了博客列表页、用户登录页、博客详情页和博客编辑页的设计。博客编辑页采用开源编辑器editor.md，详细阐述了各页面的功能区组成及代码实现。

摘要由CSDN通过智能技术生成

一、简单介绍

1、博客系统简介

用户登录页场景

博客列表页场景

博客详情页场景

博客编辑页场景

每个场景都是由镀多个功能区组成的

二、博客列表页

<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <title>博客列表</title>
    <link rel="stylesheet" href="./css/List.css">
</head>
<body>
<div class="导航栏">
    <div class="导航栏左边">
        <div class="logo-shell">
            <img class="logo" src="./img/logo.jpg">
        </div>
        我的博客系统
    </div>
    <div class="导航栏右边">
        <a href="/List.html">主页</a>
        <a href="/edit.html">写博客</a>
        <a href="/login.html">注销</a>
    </div>
</div>
<div class="下面区域">
    <div class="用户信息展示">
        <div class="头像展示区">
            <img src="./img/avatar.jpg">
        </div>
        <div class="用户名称">小熊吃糖</div>
        <div class="git地址">
            <a href="https://gitee.com/ren-xiaoxiong">gitee 地址</a>
        </div>
        <div class="统计信息">
            <div class="文章数量区域">
                <div>文章</div>
                <div class="文章数量">2</div>
            </div>
            <div class="分类数量区域">
                <div>分类</div>
                <div class="分类数量">2</div>
            </div>
        </div>
    </div>
    <div class="博客列表展示">
        <div class="博客项">
            <h3 class="博客标题">我的第一篇博客</h3>
            <p class="发表日期">2022-08-09 09:31:28</p>
            <p class="简介信息">从今天起, 我要认真敲代码. Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                Cum distinctio ullam eum ut veroab laborum numquam tenetur est in dolorum a sint, assumenda adipisci
                similique quaerat vel. Facere,et.</p>
            <div class="按钮区域"><a href="/edit.html">查看全文 &gt;&gt;</a></div>
        </div>
        <div class="博客项">
            <h3 class="博客标题">我的第二篇博客</h3>
            <p class="发表日期">2022-08-11 16:31:35</p>
            <p class="简介信息">从今天起, 我要认真敲代码. Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                Cum distinctio ullam eum ut veroab laborum numquam tenetur est in dolorum a sint, assumenda adipisci
                similique quaerat vel. Facere,et.</p>
            <div class="按钮区域"><a href="/edit.html">查看全文 &gt;&gt;</a></div>
        </div>
    </div>
</div>
</body>
<