【前端】博客系统（页面设计）

htmledit_views">

1. 预期效果

2. 实现博客列表页

2.1 实现导航栏

2.2 实现版心

2.3 实现个人信息

2.4 实现博客列表

3. 实现博客正文页

3.1 引入导航栏

3.2 引入版心

3.3 引入个人信息

3.4 实现博客正文

4. 实现博客登录页

4.1 引入导航栏

4.2 实现版心

4.3 实现登录框

5. 实现博客编辑页

5.1 引入导航栏

5.2 实现编辑区

5.3 引入 editor.md

实现一个简单的博客系统。

当前先完成页面设计的部分，通过前面学习的html" title=前端>前端知识来构建出网页。

主要分成四个页面：

博客列表页
博客正文页
博客登录页
博客编辑页

1. 预期效果

博客列表页效果

博客详情页效果

博客登录页效果

博客编辑页效果

2. 实现博客列表页

创建blog_list.html编写博客列表页。

2.1 实现导航栏

编辑blog_list.html，创建导航栏HTMl代码。

导航栏里面包含logo标题，以及一些按钮（跳转链接）。
为了实现左右排列，在logo和按钮之间加一个spcer作为占位器。

html"><!-- 导航栏 -->
<div class="nav">   <img src="img/logo2.jpg" alt="">   <span class="title">我的博客系统</span>   <!-- 用来占据中间位置 -->   <span class="spacer"></span>   <a href="blog_list.html">主页</a>   <a href="blog_edit.html">写博客</a>   <a href="logout">注销</a>
</div>

准备一个logo2.jpg，放到img目录中。

创建common.css

对于导航栏来说，每个页面都需要，因此把样式提取出来。

先清除浏览器默认样式。
准备一个cat.jpg作为背景图。
需要把html和body高度都设为100%，使背景的高度和浏览器窗口高度一样。
导航栏nav内部使用flex布局，用排列logo和一些按钮。

* {   margin: 0;   padding: 0;   box-sizing: border-box;
}/* 设置整体页面高度 */
html, body {   height: 100%;   background-image: url(../img/cat.jpg);   background-position: center center;   background-size: cover;   background-repeat: no-repeat;
}/* 上方导航栏 */
.nav {   width: 100%;   height: 50px;   background-color: rgba(51, 51, 51, 0.4);   color: #fff;   display: flex;   justify-content: left;   align-items: center;
}/* 导航栏中的图标 */
.nav img {   width: 40px;   height: 40px;   margin-left: 30px;   margin-right: 10px;   border-radius: 50%;
}/* 导航栏中的占位器 */
.nav .spacer {   width: 70%;
}/* 导航栏中的按钮 */
.nav a {   color: #fff;   text-decoration: none;   padding: 0 10px;
}

引入common.css

<link rel="stylesheet" href="css/conmmon.css">

2.2 实现版心

编辑blog_list_html

comtainer作为版心，实现居中对齐的效果。
左侧放用户信息。
右侧放博客列表。

html"><!-- 版心 -->
<div class="container">   <!-- 左侧个人信息 -->   <div class="container-left">   </div>   <!-- 右侧内容详情 -->   <div class="container-right">   </div>
</div>

编辑common.css

/* 页面内容容器, 版心 */
.container {   /* 使用 calc 计算高度 */   height: calc(100% - 50px);   /* 设置版心宽度 */   width: 1000px;   /* 水平居中 */   margin: 0 auto;   /* 使用弹性布局 */   display: flex;   justify-content: space-between;   align-items: center;
}/* 左侧部分, 用来放置用户信息 */
.container-left {   height: 100%;   width: 200px;
}/* 右侧部分, 用来放置正文 */
.container-right {   height: 100%;   /* 和左左侧部分中间留出 5px 间隙 */   width: 795px;   /* 如果内容溢出就自动加上滚动条 */   overflow: auto;   background-color: rgba(255, 255, 255, 0.8);   border-radius: 10px;
}

2.3 实现个人信息

编辑blog_list.html

把个人信息放到一个card.div中。
个人信息中包含头像（img），用户名（h3），用户的github（a），用户的文章数量和分类数量。

html"><!-- 左侧个人信息 -->
<div class="container-left">   <div class="card">       <img src="img/doge.jpg" class="avtar" alt="">       <h3>bo</h3>       <a href="http:www.github.com">