前端 - 博客系统(页面设计)

博客系统(页面设计)

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

当前先完成页面设计的部分. 通过前面学习的前端知识来构建出网页.

主要分成四个页面:

• 博客列表页
• 博客正文页
• 博客登陆页
• 博客编辑页

预期效果

博客列表页效果

博客详情页效果

博客登陆页效果

博客编辑页效果

实现博客列表页

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

实现导航栏

编辑 blog_list.html, 创建导航栏的 html 代码.

• 导航栏里面包含 logo, 标题, 以及一些按钮(跳转链接).
• 为了实现左右排列, 在 logo 和 按钮 之间加一个 spacer 作为占位器.

<!-- 导航栏 -->
<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">

实现版心

编辑 blog_list.html

• container 作为版心, 实现居中对齐的效果.
• 左侧放用户信息
• 右侧放博客列表

<!-- 版心 -->
<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;
}

实现个人信息

编辑 blog_list.html

• 把个人信息放到一个 .card div 中.
• 个人信息中包含 头像 (img), 用户名 (h3), 用户的 github (a), 用户的文章数量和分类数量.

<!-- 左侧个人信息 -->
<div class="container-left">
    <div class="card">
        <img src="img/doge.jpg" class="avtar" alt="">
        <h3>比特汤老湿</h3>
        <a href="http:www.github.com">github 地址</a>
        <div class="counter">
            <span>文章</span>
            <span>分类