目录
一、简单介绍
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">查看全文 >></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">查看全文 >></a></div>
</div>
</div>
</div>
</body>
<