1、博客系统效果图

博客主页：

博客详情页：

网络异常，图片无法展示

博客编辑页：

网络异常，图片无法展示

博客注销页：

网络异常，图片无法展示

2、代码实现

1）、博客详情页

<!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>
    <!-- 引入css链接 -->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_detail.css">
</head>
<body>
    <!-- 导航条 -->
    <div class="nav">
        <img src="img/博客园.png" alt="">
        <span class="title">我的博客系统</span>
        <!-- spacer 不现实任何内容, 只是占位, 把后面 a 标签撑到右侧去 -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="login.html">注销</a>
    </div>
    <!-- 这个 div 表示页面的主区域(版心) -->
    <div class="container">
        <!-- 左侧的用户信息 -->
        <div class="container-left">
            <!-- 用这个元素表示用户的信息 -->
            <div class="card">
                <!-- 用户的头像 -->
                <img src="img/1.jpg!1" alt="">
                <!-- 用户的名字 -->
                <h3>冷兮雪</h3>
                <!-- 这个空链接可以放自己的GitHub或者Gitee -->
                <a href="#" target="_blank">github 地址</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 class="blog-detail">
                <!-- 博客标题 -->
                <h3>我的第一篇博客</h3>
                <!-- 编写博客的时间 -->
                <div class="date">2022-11-06 12:00:00</div>
                <!-- 博客正文 -->
                <p>
                从今天起, 我要认真写代码. 句多么朴实的话语，当我们平静下来仔细审视它的时
           候，你会发现它是如此地完美，在人人觉得俗不可耐的外表下却是一个让人怦然心动的
           真理，一种饱含深情的希翼。毛泽东的伟大之处从这简单而深刻的语言中大概就能让人
           深深地体会到了现在的孩子真的该好好学习这句话了。从字义上去理解，我想就是
           要求学生认认真真地学习，把学习当作一回事来做，这里的“好”即是态度，这种态度
           不是一般的好，不是强迫的好，而是发自内心的、出自求知的、来自远大理想的好，
           两个“好”就体现了一种切切实实的、脚踏实地的那种学习姿态，没有做作，没有
           虚张，没有花哨，只告诉你学习应该是“好好”地学。还有呢?就是要“天天向上”，
           这里既是“好好学习”的目的，更是培养人才的目的。人生就不是完善的，学而知之，学
           而善之，要告教化才能不断进步，“向上”即是从善，要有好学的精神，要有见贤思
           齐的思想，要能不断弥补自己的不足之处、改正自己的缺点，从而把自己塑造成一个
           文明的人，一个有思想、有道德、有情操、有文化、有知识、有才干的人。“向上”
           是一切的“上”，所谓的“择其善者而从之，择其不善者而改之”也，凡是值得学的我们都
           要学，凡是不可学的坚决不学，而“向”更能说明一种自觉主动的姿态，一种积极奋发
           的样子，从善如流的心情。而且“向上”之外，还在于“天天”。一个人要进步不难，难的
           是每天进步，哪怕是进步一点，这里有希望、有责任、有寄托，是对少年儿童殷切的
           期望、真诚的教诲。
                </p>
            </div>
        </div>
    </div>
</body>
</html>

2）、博客列表页

<!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>
    <!-- 引入css链接 -->
    <link rel="stylesheet" href="css/blog_list.css"> 
    <link rel="stylesheet" href="css/common.css">
</head>
<body>
    <!-- 导航条 -->
    <div class="nav">
        <img src="img/博客园.png" alt="">
        <span class="title">我的博客系统</span>
        <!-- spacer 不现实任何内容, 只是占位, 把后面 a 标签撑到右侧去 -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="login.html">注销</a>
    </div>
    <!-- 这个 div 表示页面的主区域(版心) -->
    <div class="container">
        <!-- 左侧的用户信息 -->
        <div class="container-left">
            <!-- 用这个元素表示用户的信息 -->
            <div class="card">
                <!-- 用户的头像 -->
                <img src="img/1.jpg!1" alt="">
                <!-- 用户的名字 -->
                <h3>冷兮雪</h3>
                <!-- 这个空链接可以放自己的GitHub或者Gitee -->
                <a href="#" target="_blank">github 地址</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 class="blog">
                <div class="title">我的第一篇博客</div>
                <div class="date">2022-11-06 12:00:00</div>
                <div class="desc">
                    从今天起, 我要认真写代码.从今天起, 我要认真写代码.从今天起, 我要认真写代码.从今天起, 我要认真写代码. 
                    好好学习,天天学习,拿一个好的offer。
                </div> 
                <!-- &gt为‘>’的实体名称 -->
                <a href="blog_detail.html">查看全文 &gt;&gt; </a>
            </div>
            <div class="blog">
                <div class="title">我的第二篇博客</div>
                <div class="date">2022-11-06 12:00:00</div>
                <div class="desc">
                    从今天起, 我要认真写代码.从今天起, 我要认真写代码.从今天起, 我要认真写代码.从今天起, 我要认真写代码. 
                    好好学习,天天学习,拿一个好的offer。
                </div> 
                <!-- &gt为‘>’的实体名称 -->
                <a href="blog_detail.html">查看全文 &gt;&gt; </a>
            </div>
            <div class="blog">
                <div class="title">我的第三篇博客</div>
                <div class="date">2022-11-06 12:00:00</div>
                <div class="desc">
                    从今天起, 我要认真写代码.从今天起, 我要认真写代码.从今天起, 我要认真写代码.从今天起, 我要认真写代码. 
                    好好学习,天天学习,拿一个好的offer。
                </div> 
                <!-- &gt为‘>’的实体名称 -->
                <a href="blog_detail.html">查看全文 &gt;&gt; </a>
            </div>
            <div class="blog">
                <div class="title">我的第四篇博客</div>
                <div class="date">2022-11-06 12:00:00</div>
                <div class="desc">
                    从今天起, 我要认真写代码.从今天起, 我要认真写代码.从今天起, 我要认真写代码.从今天起, 我要认真写代码. 
                    好好学习,天天学习,拿一个好的offer。
                </div> 
                <!-- &gt为‘>’的实体名称 -->
                <a href="blog_detail.html">查看全文 &gt;&gt; </a>
            </div>
        </div>
    </div>
</body>
</html>

3）、博客编辑页

<!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>
    <!-- 引入css链接 -->
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_edit.css">
    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <!-- 这是另一个第三方库 -->
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- 引入 editor.md 的依赖 -->
    <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>
    <!-- 导航条 -->
    <div class="nav">
        <img src="img/博客园.png" alt="">
        <span class="title">我的博客系统</span>
        <!-- spacer 不现实任何内容, 只是占位, 把后面 a 标签撑到右侧去 -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="login.html">注销</a>
    </div>
    <!-- 整个编辑页的版心 -->
    <div class="blog-edit-container">
        <!-- 标题的编辑区 -->
        <div class="title">
            <!-- 输入的标题内容 -->
            <input type="text" id="blog-title" placeholder="在这里输入博客标题">
            <!-- 发布按钮 -->
            <button id="submit">发布文章</button>
        </div>
        <!-- 正文的编辑区 -->
        <div id="editor">
        </div>
    </div>
    <script>
        // 初始化编辑器, 代码也是截取自 官方文档 . 
        var editor = editormd("editor", {
            // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. 
            width: "100%",
            // 设定编辑器高度
            height: "calc(100% - 50px)",
            // 编辑器中的初始内容
            markdown: "## hello world",
            // 指定 editor.md 依赖的插件路径
            path: "editor.md/lib/"
        });
    </script>
</body>
</html>

另外博客编辑页还需要下载引入开源的markddown编辑器Editor.md

Editor.md - 开源在线 Markdown 编辑器 (pandao.github.io)

直接Github下载

下载好之后我们把它放在我们写博客系统的文件夹中，并改名为editor.md

除此之外，我们还要引入一个第三方库

https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js

4）博客注销页

<!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_login.css">
</head>
<body>
    <!-- 导航条 -->
    <div class="nav">
        <img src="img/博客园.png" alt="">
        <span class="title">我的博客系统</span>
        <!-- spacer 不现实任何内容, 只是占位, 把后面 a 标签撑到右侧去 -->
        <div class="spacer"></div>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="login.html">注销</a>
    </div>
    <!-- 博客页面 -->
   <dir class="login-container">
    <div class="login">
        <h3 >登陆</h3>
        <div class="row">
              <span>用户名:</span>
              <input type="text">
        </div>
        <div class="row">
             <span>密码:</span>
             <input type="password">
        </div>
        <div>
            <button class="bin">登录</button>
        </div>
    </div>
   </dir>
</body>
</html>

css代码

1）公共样式css

/* 这个css样式是要放多个页面都需要使用的公共样式 */
/* 清除浏览器的默认样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
    /* 设置让 html 的高度和浏览器窗口一样高 */
    height: 100%;
}
body {
    /* 设置让 body 的高度和 html 标签一样高 */
    height: 100%;
    /* 博客系统背景图 */
    background-image: url(../img/2.jpg);
    /* 背景图片居中 */
    background-position: center center;
    /* 背景图片不平铺 */
    background-repeat: no-repeat;
    /* 背景图片扩展至足够大，以至使背景图片完全覆盖背景区域 */
    background-size: cover;
}
.nav {
    /* 导航栏高度普遍都是 50px */
    height: 50px;
    /* 导航栏颜色及透明度 */
    background-color: rgba(50, 50, 50, 0.4);
    color: white;
    /* 导航栏设置成弹性布局 */
    display: flex;
    /* 水平居中 */
    justify-content: flex-start;
    /* 竖直居中 */
    align-items: center;
}
 /* 导航栏图片样式 */
.nav img {
    width: 40px;
    height: 40px;
    /* 设置图片左右边距 */
    margin-left: 30px;
    margin-right: 10px;
    /* 设置图片圆角边框属性 */
    border-radius: 20px;
}
/* 导航栏中间空白长宽，使主页，写博客，注销等排列到右边 */
.nav .spacer {
    /* 宽度设置成百分比的形式, 以父元素为基准, 设置当前的尺寸 */
    width: 70%;
    height: 40px;
}
/* 导航栏链接样式 */
.nav a {
    color: white;
    text-decoration: none;
    padding: 0 10px;
}
/* 主页中心介绍 */
.container {
    width: 1000px;
    /* 水平居中 */
    margin: 0 auto;
    /* 设置高度 */
    height: calc(100% - 50px);
    /* 为了让里面的 left 和 right 能够水平方向排列, 就需要使用弹性布局了 */
    display: flex;
    justify-content: space-between;
}
.container .container-left {
    height: 100%;
    width: 200px;
}
.container .container-right {
    height: 100%;
    width: 796px;
     /* 均匀排列每个元素 首个元素放置于起点，末尾元素放置于终点 */ 
    background-color: rgba(255, 255, 255, 0.8);
    /* 设置内边距 */
    padding: 20px;
    border-radius: 20px;
    /* 如果内容超出范围了, 自动添加滚动条 */
    overflow: auto;
}
/* 介绍卡片的css属性 */
.card {
    background-color: rgba(255, 255, 255, 0.8);
    /* 设置内边距, 就是为了让文字和图片不要顶着边界 */
    padding: 30px;
    /* 设置介绍卡片的圆角边框属性 */
    border-radius: 20px;
}
/* 介绍卡片的图片 */
.card img {
    width: 140px;
    height: 140px;
    border-radius: 70px;
}
.card h3 {
    text-align: center;
    padding: 10px;
}
/* githup地址 的css属性*/
.card a {
    /* a 默认是行内元素. 默认尺寸就是和内容是一样的 */
    display: block;
    text-align: center;
    color: #999;
    text-decoration: none;
    padding: 10px 0;
}
.card .counter {
    display: flex;
    justify-content: space-around;
    padding: 5px;
}

这个图标可以在阿里巴巴矢量图标库

中找到，这个也是一个公开图标库，分享给大家使用

2）博客详情页css

/* 给博客详情页提供具体的样式 */
/* 给博客标题的css样式 */
.blog-detail h3 {
    font-size: 20px;
    text-align: center;
    padding: 20px 0;
}
/* 博客时间的css样式 */
.blog-detail .date {
    color: rgb(0, 128, 0);
    text-align: center;
    padding: 10px 0;
}
/* 博客正文的css样式 */
.blog-detail p {
    text-indent: 2em;
}

3）博客列表页css

/* 这个文件专门放 博客列表页 的专用样式 */
/* 针对博客的容器进行设置 */
.blog .title {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
    padding: 10px 0;
}
.blog .date {
    text-align: center;
    color: rgb(128, 128, 0);
    padding: 10px 0;
}
/* 设置博客列表页正文 首行文本内容之前的缩进量 */
.blog .desc {
    text-indent: 2em;
}
.blog a {
    /* 转成块级元素, 才好设置尺寸 */
    display: block;
    width: 120px;
    height: 40px;
    /* 元素水平居中 */
    margin: 10px auto;
    /* 文字水平居中 */
    text-align: center;
    /* 文字垂直居中 */
    line-height: 40px;
    color: black;
    /* 去掉下划线 */
    text-decoration: none;
    /* 加上边框 */
    border: 2px solid black;
    /* 加上一个背景的渐变效果 */
    transition: all 0.25s;
}
/* 鼠标悬停的时候, 有个动态效果 */
.blog a:hover {
    background-color: black;
    color: white;
}

4）博客编辑页css

/* 针对博客编辑页写的样式 */
/* 版心 */
.blog-edit-container {
    width: 1000px;
    height: calc(100% - 50px);
    margin: 0 auto;
}
/* 设置标题编辑区的样式 */
.blog-edit-container .title {
    height: 50px;
    /* 只要是水平方向排列多个元素, 就想到弹性布局就好 */
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/* 针对输入框进行调整 */
#blog-title {
    height: 40px;
    width: 897px;
    font-size: 20px;
    padding-left: 5px;
    /* 去掉边界（border）和轮廓（outline）线, 选中输入框时候的黑圈 */
    outline: none;
    border: none;
    border-radius: 5px;
    /* 加上背景半透明效果 */
    background-color: rgba(255, 255, 255, 0.8);
}
/* 针对发布文章的提交按钮调整 */
#submit {
    height: 40px;
    width: 100px;
    border: none;
    border-radius: 5px;
    color: white;
    background-color: orange;
}
#submit:active {
    background-color: grey;
}
#editor {
    border-radius: 10px;
    /* background-color: rgba(255, 255, 255, 0.8); */
    /* 这个属性的半透明是可以让子元素也一起生效的, 值是个百分数. 80% 就相当于 rgba 中的 0.8 */
    opacity: 80%;
}

5）博客注销页css

/* 博客注销页面的css属性 */
.login-container {
    height: calc(100% - 50px);
    /* 这三个样式是为了让 .dialog 垂直水平居中 */
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 博客注销操作台的css属性 */
.login {
    height: 400px;
    width: 400px;
    background-color: rgba(191, 223, 104, 0.8);
    /* 圆角矩边框属性*/
    border-radius: 30px;
}
.login h3{
    text-align: center;
    margin: 40px auto;
}
.row{
    height: 50px;
    display:flex;
    justify-content: center;
    align-items: center;
}
.row span{
    width: 100px;
    text-align: center;
}
.row input{
    height: 30px;
    /* 圆角矩边框属性*/
    border-radius: 10px;
}
.bin{
    width: 200px;
    height: 50px;
    display:block;
    margin: auto;
    border-radius: 12px;
    background-color: rgb(42, 185, 135);
    /* 使登录按钮在 被点击时 有 0.35s 的过渡时间 */
    transition: all 0.35s;
}
/* 鼠标悬停的时候, 有个动态效果 */
.bin:active {
    background-color: rgb(40, 140, 227);
    color: white;
}

JavaWeb博客系统

1、博客系统效果图

2、代码实现

1）、博客详情页

2）、博客列表页

3）、博客编辑页

4）博客注销页

css代码

1）公共样式css

2）博客详情页css

3）博客列表页css

4）博客编辑页css

5）博客注销页css

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

JavaWeb博客系统

1、博客系统效果图

2、代码实现

1）、博客详情页

2）、博客列表页

3）、博客编辑页

4）博客注销页

css代码

1）公共样式css

2）博客详情页css

3）博客列表页css

4）博客编辑页css

5）博客注销页css

热门文章

最新文章

相关课程

相关电子书

相关实验场景