基于Servlet+JDBC实现的基础博客系统＞＞系列2 -- 前端基础页面

本文链接：https://blog.csdn.net/weixin_46114074/article/details/131372706

1. 博客公共页面样式

导航栏以及背景图设置

<body>
<!-- 1.navigation 导航栏 -->
    <div class="nav">
        <!-- logo -->
        <img src="image/logo.png" alt="">
        <div class="title">我的博客系统</div>
        <!-- 使用空白将后面的内容挤过去 -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="">注销</a>
    </div>
</body>

由于各个页面均有导航栏，因此导航栏的样式可以提取出来，构成一个css文件，方便其他页面引入样式。

创建 common.css，其余页面引入该样式

清除浏览器默认样式；
自行准备背景图，用于博客系统的背景；
将 html 和 body 的高度设置为 100% ，使得背景高度和浏览器窗口高度一样；
导航栏 nav 内部使用 flex 布局，方便排列 logo 和按钮；
该代码中也包含了个人信息和博客列表的样式。

/* 公共样式 */

/* 写一个页面的起手式 */
*{
    /* 调整盒子模型 */
    box-sizing: border-box;
    /* 去除浏览器默认样式 */
    padding: 0;
    margin: 0;
}

html{
    /* html的父元素为浏览器窗口 */
    /* 高度为100%:当前元素与父元素一样高 */
    height: 100%;
}

body{
    background-image: url(../image/githup.webp);
    /* 使得页面填满整个页面 */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    /* body的父元素为html */
    /* 高度为100%:当前元素与父元素一样高 */
    height: 100%;
    animation-name: move-background; /* 动画名称 */
    animation-duration:30s; /* 动画时长 */
    animation-timing-function: linear; /* 动画时间函数 */
    animation-iteration-count: infinite; /* 动画播放次数 */
}

@keyframes move-background {
    0% {
        background-position-x: -70px; /* 初始状态 */
      }
    50% {
        background-position-x: 0; /* 背景图像向右移动 */
      }
    100% {
        background-position-x: -70px; /* 结束状态，回到初始位置 */
      }
}
.nav{
    height: 80px;
    /* a代表为透明度 */
    background-color: rgba(50, 50, 50,0);
    color: white;

    /* 弹性布局 */
    display: flex;
    align-items: center;
}
.nav img{
    width: 80;
    height: 80px;
    /* 左右设置外边距 */
    margin-left: 50px;
    margin-right: 10px;
    /* 设置图标为圆形 */
    border-radius: 40px;
}
.nav a{
    color: white;
    /* 去掉下划线 */
    text-decoration: none;
    /* 设置边距 */
    padding: 0 10px;
}
.nav .spacer{
    width: 70%;
}

.container{
    width: 1000px;
    margin-left: auto;
    margin-right: auto;

    /* 设置高度 */
    height: calc(100% - 80px);

    display: flex;
    /* 元素等间距分来 */
    justify-content: space-between;
}

.container-left{
    height: 40%;
    width: 200px;
}

.container-right{
    height: 100%;
    /* 留出来 5px 的缝隙 */
    width: 795px;

    /* 加上白色半透明背景 */
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    padding: 20px;

    /* 当内容超出范围时, 自动添加滚动条 */
    overflow: auto;
}

/* 设置用户信息区域 */
.card {
    background-color: rgba(50, 50, 50, 0.5);
    border-radius: 10px;
    padding: 30px;
    color: white;
}

/* 设置用户头像 */
.card img {
    /* 整个 .card 的宽度是 200px, .card 设置了四个方向的内边距, 30px */
    /* 剩下的能放图片的空间就是 140px */
    width: 140px;
    height: 140px;
    border-radius: 70px;
}

/* 设置用户名 */
.card h3 {
    text-align: center;
    /* 这里使用内边距, 把用户名和头像, 撑开一个距离. 使用外边距也是 ok 的 */
    padding: 10px;
}

/* 设置 github 地址 */
.card a {
    text-align: center;
    /* 文字设置成灰色 */
    color: wheat;
    /* 去掉下划线 */
    text-decoration: none;
    /* 需要把 a 标签转成块级元素, 上述的文字水平居中才有意义 */
    display: block;
    /* 让 a 标签和下方有间隔 */
    margin-bottom: 10px;
}

.card .counter {
    display: flex;
    padding: 5px;
    justify-content: space-around;
}

2. 博客列表页面

实现版心，左侧用户信息，右侧博客列表

container 作为版心，实现整体居中对齐的效果；
个人信息，博文列表的具体实现见代码注释。

<!-- 2.页面的主体部分 -->
    <div class="container">
        <!-- 左侧信息 -->
        <div class="container-left">
            <div class="card">
                <!-- 用户的头像 -->
                <img src="image/header.jpg" alt="">
                <!-- 用户名 -->
                <h3>小小哈士奇</h3>
                <!-- github 地址 -->
                <a href="https://gitee.com/yao-fa">gitee 地址</a>
                <!-- 统计信息 -->
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>

        <!-- 右侧信息 -->
        <div class="container-right">
            <!-- 这个 div 表示一个 博客  -->
            <div class="blog">
                <div class="title">我的第一篇博客</div>
                <div class="date">2023-05-12 21:01:00</div>
                <div class="desc">
                    从今天起, 我要认真敲代码. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis repellendus voluptatum, reiciendis rem consectetur incidunt aspernatur eveniet excepturi magni quis sint, provident est at et pariatur dolorem aliquid fugit voluptatem.
                </div>
                <a href="blog_detail.html?blogId=1">查看全文 &gt;&gt; </a>
            </div>

            <div class="blog">
                <div class="title">我的第二篇博客</div>
                <div class="date">2023-05-11 20:00:00</div>
                <div class="desc">
                    从今天起, 我要认真敲代码. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis repellendus voluptatum, reiciendis rem consectetur incidunt aspernatur eveniet excepturi magni quis sint, provident est at et pariatur dolorem aliquid fugit voluptatem.
                </div>
                <a href="blog_detail.html?blogId=2">查看全文 &gt;&gt; </a>
            </div>
        </div>
    </div>

CSS渲染列表页

/* 专门写 博客页列表的专属样式 */
.blog {
    padding: 20px;
}

/* 设置博客的标题 */
.blog .title {
    font-size: 22px;
    text-align: center;
    font-weight: 900;
}

/* 设置发布时间 */
.blog .date {
    font-size: 17px;
    text-align: center;
    color: rgb(53, 0, 128);
    padding: 15px 0;
}

.blog a{
    /* 设置为块级元素 */
    display: block;
    width: 150px;
    height: 40px;
    border: 2px solid black;
    border-radius: 10px;

    /*把里面的文字改一下颜色,和下划线 */
    color: black;
    text-decoration: none;

    /* 设置文字居中 */
    text-align: center;
    
    /* 当文字的行高和元素高度一样的时候,文字恰好是垂直居中的 */
    line-height: 40px;

    /* 设置块级元素为居中 */
    margin: 10px auto;

    /* 加上背景切换 */
    transition: all 1s;
}

.blog a:hover{
    color: blue;
    background-color: rgb(167, 166, 166);
}

3. 博客详情页

创建 blog_detail.html，编写博客详情页面。

导航栏及个人信息部分与列表页的内容相同，直接复制代码即可。这里只对博客详情内容的代码编写进行说明。

博客的内容整体放到 blog-content 中；
博客标题使用 h3 标签；
博客发布时间放到 date 中；

<!-- 右侧信息 -->
        <div class="container-right">
            <h3>这是我的第一篇博客</h3>
            <div class="date">2023-05-12 21:01:00</div>
            <div class="content">
                <p>从今天起, 我要认真敲代码. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis repellendus voluptatum, reiciendis rem consectetur incidunt aspernatur eveniet excepturi magni quis sint, provident est at et pariatur dolorem aliquid fugit voluptatem.</p>
                <p>从今天起, 我要认真敲代码. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis repellendus voluptatum, reiciendis rem consectetur incidunt aspernatur eveniet excepturi magni quis sint, provident est at et pariatur dolorem aliquid fugit voluptatem.</p>
                <p>从今天起, 我要认真敲代码. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Debitis repellendus voluptatum, reiciendis rem consectetur incidunt aspernatur eveniet excepturi magni quis sint, provident est at et pariatur dolorem aliquid fugit voluptatem.</p>
            </div>
        </div>

CSS渲染详情页


.container-right h3 {
    font-size: 22px;
    text-align: center;
    font-weight: 900;
    padding: 20px 0;
}

.container-right .date {
    text-align: center;
    color: blue;
    padding: 10px 0;
}

.container-right .content p {
    /* 设置博客的正文 */
    /* text-indent是CSS属性，用于指定元素内文本块第一行的缩进。
    "2em"的值表示第一行将缩进当前字体大小的两倍. */
    text-indent: 2em;
    /* 段落之间的间距 */
    margin-bottom: 5px;
}

4. 博客登录页

登录页面相对比较简单，需要注意的是，注销按钮在该页面没必要继续展示，其余导航栏代码与之前页面一致。

创建并编辑 blog_login.html，这里给出登录界面的核心代码

<!-- 登录页的版心 -->
    <div class="login-container">
        <!-- 登录对话框 -->
        <div class="login-dialog">
            <h3>登录</h3>
            <!-- 使用 form 包裹一下下列内容, 便于后续给服务器提交数据 -->
            <form action="">
                <div class="row">
                    <span>用户名</span>
                    <input type="text" id="username">
                </div>
                <div class="row">
                    <span>密码</span>
                    <input type="password" id="password">
                </div>
                <div class="row">
                    <input type="submit" id="submit" value="登录">
                </div>
            </form>
        </div>
    </div>

CSS渲染登录页面

/* 登录页筛选 */
/* 这个是登录页的 css  */
.login-container {
    width: 100%;
    height: calc(100% - 80px);

    /* 为了让 login-dialog 垂直水平居中, 使用弹性布局 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-dialog {
    width: 500px;
    height: 350px;
    color: wheat;
    background-color: rgba(50, 50, 50,0.3);
    /* 设置圆角 */
    border-radius: 10px;
    position: relative;
    bottom: 50px;
}

/* 登录标题 */
.login-dialog h3 {
    font-size: 24px;
    font-weight: 900;
    text-align: center;
    margin-top: 60px;
    margin-bottom: 40px;
}

/* 针对每一行的样式 */
.row {
    height: 50px;
    width: 100%;

    /* 使用弹性布局 */
    display: flex;
    justify-content: space-around;
    align-items: center;
}

/* 每一行的文字 */
.row span {
    font-size: 20px;
    width: 60px;
    
}

.row #username {
    width: 350px;
    height: 40px;
    font-size: 20px;
    text-indent: 10px;
    border: none;
    background-color: rgba(50, 50, 50,0.2);;
}

.row #password {
    width: 350px;
    height: 40px;
    font-size: 20px;
    text-indent: 10px;
    border: none;
    background-color: rgba(50, 50, 50,0.2);
}

.row #submit {
    width: 150px;
    height: 40px;
    color: white;
    background-color: orange;
    text-align: center;
    /* 设置文字垂直居中 */
    line-height: 40px;
    /* 去掉按钮默认的边框 */
    border: none;
    border-radius: 10px;
    margin-top: 20px;
}

.row #submit:hover {
    background: gray;
}

5. 博客编辑页

博客编辑页面涉及到一个 markdown 编辑器，这里我们使用 editor.md 来实现。在编辑页面引入即可~

什么是 editor.md ?
editor.md 是一个开源的页面 markdown 编辑器组件，官网参见: https://pandao.github.io/editor.md/，用法可以参考代码中的 examples 目录中的示例。

1.从官网下载压缩包，并解压，引入项目目录中，其目录结构如下图所示：

2. 引入editor.md依赖

<!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>

3. 初始化编译器

<script>
        var editor = editormd("editor", {
            // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. 
            width: "100%",
            // 设定编辑器高度
            height: "calc(100% - 50px)",
            // 编辑器中的初始内容
            markdown: "# 在这里写下一篇博客",
            // 指定 editor.md 依赖的插件路径
            path: "editor.md/lib/"
        });
</script>

编辑 blog_edit.html

整个编辑区放到 div.blog-edit-container 中，里面包含一个标题编辑区, 和内容编辑区；
标题编辑区，包含一个 input，用来填写标题，以及一个 input 按钮用于提交；
内容编辑区先创建一个 div#editor，并使用上述 editor.md 相关代码进行初始化。

<!DOCTYPE html>
<html lang="ch">
<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_edit.css">
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <script src="editor.md/lib/marked.min.js"></script>
    <script src="editor.md/lib/prettify.min.js"></script>
    <script src="editor.md/editormd.js"></script>
</head>
<body>
    <!-- 导航栏. nav 是 导航 这个词的缩写 -->
    <div class="nav">
        <!-- logo -->
        <img src="image/logo2.jpg" alt="">
        <div class="title">我的博客系统</div>
        <!-- 只是一个空白, 用来把后面的链接挤过去 -->
        <!-- 这是一个简单粗暴的写法~~ -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <!-- 这里的地址回头再说 -->
        <a href="">注销</a>
    </div>

    <!-- 博客编辑页的版心 -->
    <div class="blog-edit-container">
        <form action="">
            <!-- 标题编辑区 -->
            <div class="title">
                <input type="text" id="title-input">
                <input type="submit" id="submit">
            </div>
            <!-- 博客编辑器 -->
            <!-- 把 md 编辑器放到这个 div 中 -->
            <div id="editor">

            </div>
        </form>
    </div>

    <script>
        var editor = editormd("editor", {
            // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. 
            width: "100%",
            // 设定编辑器高度
            height: "calc(100% - 50px)",
            // 编辑器中的初始内容
            markdown: "# 在这里写下一篇博客",
            // 指定 editor.md 依赖的插件路径
            path: "editor.md/lib/"
        });
    </script>
</body>
</html>