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

目录

1. 博客公共页面样式

2. 博客列表页

3. 博客详情页

4. 博客登录页

5. 博客编辑页

---

1. 博客公共页面样式

导航栏以及背景图设置

    

        
        
        
我的博客系统
        
        

        主页
        写博客
        注销
    

由于各个页面均有导航栏，因此导航栏的样式可以提取出来，构成一个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 作为版心，实现整体居中对齐的效果；
• 个人信息，博文列表的具体实现见代码注释。

    

        
        

            

                
                
                
                
小小哈士奇
                
                gitee 地址
                
                

                    文章
                    分类
                
                

                    2
                    1
                
            
        

        
        

            
            

                
我的第一篇博客
                
2023-05-12 21:01:00
                

                    从今天起, 我要认真敲代码. 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.
                
                查看全文 >> 
            

            

                
我的第二篇博客
                
2023-05-11 20:00:00
                

                    从今天起, 我要认真敲代码. 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.
                
                查看全文 >> 
            
        
    

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，编写博客详情页面。

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

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

        

            
这是我的第一篇博客
            
2023-05-12 21:01:00
            

                
从今天起, 我要认真敲代码. 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.
                
从今天起, 我要认真敲代码. 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.
                
从今天起, 我要认真敲代码. 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.
            
        

 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，这里给出登录界面的核心代码

    

        
        

            
登录
            
            

                

                    用户名
                    
                
                

                    密码
                    
                
                

                    
                
            
        
    

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依赖

3. 初始化编译器

编辑 blog_edit.html

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

    
    
    
    
    
    
    
    
    
    
    
    


    
    

        
        
        
我的博客系统
        
        
        

        主页
        写博客
        
        注销
    

    
    

        

            
            

                
                
            
            
            
            


            
        
    

    

以上就是基础的前端页面的搭建,是基于JavaScript HTML CSS 完成的,后续还会根据Servlet实现的服务器对以上内容进行修改,最后实现可以前后端进行交互的博客系统.