——页面介绍
博客列表页:显示了当前系统中都有哪些发布出来的博客
- 导航栏:logo,标题,主页,写博客,注销
- 左侧:当前用户信息,用户的头像+名字+其他的简单信息
- 右侧:博客列表
列表中的每一项,包含了,博客标题,发布时间,摘要信息,查看全文按钮
博客详情页:显示了当前博客,详细正文
- 导航栏:和博客列表页相同
- 左侧:显示的是当前文章的作者信息
- 右侧:显示当前文章的详细内容了
登录页面:包含了一个登录框,输入用户名,密码,登录按钮
博客登录页 :登录博客的界面
- 输入用户名
- 输入密码
- 确认登录
博客编辑页:点击 “写博客" 进入的页面
- 导航栏:和前面一样
- 输入框,输入博客的标题
- markdown 编辑器,按照 markdown 的语法来编辑博客内容,用第三方的组件
——预期效果
1、博客列表页效果:
2、博客详情页效果:
3、博客登录页效果:
4、博客编辑页效果:
——代码
1、博客列表页
开发一个页面,不是在脑子里,凭空就搞出来的
而是要先设计好,然后再对照着这个设计稿来进行开发
一般是产品经理,或者美工 (UED) 提供的
如果没有个设计图,凭空去想,这个页面啥样,是特别不好做的 (既要实现代码,又要完成设计工作)
设计稿,一般来说,是一个 PS(PhotoShop) 搞出来的文件
非常方便程序猿来获取到里面的一些细节 (某个东西尺寸,颜色,位置,字体大小……)按照人家设计稿里包含的细节,直接来写代码就行了,但是也有一种情况,设计稿,只有一个图片,就需要程序猿亿点点自由发挥了
写一个页面的时候,一定要,先确定好,页面的结构 (页面的结构是特别重要的,会直接影响到后续的 CSS,JS 代码)
由于导航栏会被各个页面都使用到,导航栏的样式,就写到一个 common.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/picture.jpg" alt="">
<span>我的博客系统</span>
<!-- 空白元素 用来占位 -->
<div class="spacer"></div>
<a href="blog_list.html">主页</a>
<a href="blog_edit.list">写博客</a>
<a href="#">注销</a>
</div>
<!-- .container 作为页面的版心 -->
<!-- 这个部分是在页面中 水平居中对齐的 左右两侧会留出一定的边距 这个东西很多网站都有 称为"版心" -->
<div class="container">
<!-- 左侧个人信息 -->
<div class="left">
<!-- 整个用户信息区 -->
<div class="card">
<img src="image/picture.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-05 15:00:00
</div>
<!-- 博客摘要 -->
<div class="desc">
从今天起,我要认真写博客,Lorem ipsum dolor sit