目录
1.设计博客列表页
总代码:这里面的link标签是CSS修改颜色样式的文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>博客列表</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/blog_list.css">
</head>
<body>
<!-- 导航栏页面结构 -->
<div class="nav">
<img src="image/logo.jpg" alt="">
<span>我的博客系统</span>
<!-- spacer是个空白元素,用来占位置,将导航栏的字左右分开 -->
<div class="spacer"></div>
<a href="blog_list.html">主页</a>
<a href="blog_edit.html">写博客</a>
<a href="#">注销</a>
</div>
<!-- 这里的 .container作为页面的版心-->
<div class="container">
<!-- 左侧个人信息 -->
<div class="left">
<!-- 表示整个用户信息 -->
<div class="card">
<img src="image/dog.jpg" alt="">
<h3>张--</h3>
<a href="#">github 地址</a>
<div class="counter">
<span>文章</span>
<span>分类</span>
</div>
<div class="counter">
<span>2</span>
<span>1</span>
</div>
</div>
</div>
<!-- 右侧内容详情 -->
<div class="right">
<!-- .blog就对应一个博客 -->
<div class="blog">
<!-- 博客标题 -->
<div class="title">
我的第一篇博客
</div>
<!-- 博客发布时间 -->
<div class="date">
2022-05-07 21:43:00
</div>
<!-- 博客摘要 -->
<div class="desc">
今天是写博客第一天,Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius error minus, accusamus architecto sapiente excepturi dolores ducimus ullam iste provident similique necessitatibus inventore, dolore ipsam modi nisi itaque a autem.
</div>
<a href="#">查看全文 &g