一 : 综述

博客系统是一个典型的web程序,有前端页面,也有后端代码,同时需要进行前后端交互,本节内容主要实现前端页面.

基本结构 :

二 : 博客列表页

2.1导航栏

页面结构 :

样式 :

1.起手式

整个页面的设置

单独导航栏的设置

导航栏图标的设置

占位

a标签的设置(三个按钮)

最终的导航栏效果 :

2.2实现页面主体

页面结构 :

样式 :

整体容器样式设置

左右界面设置

头像设置

最终的左侧界面效果 :

右侧标题 , 日期 ,正文

查看全文的按钮

右侧界面最终效果 :

整个博客列表页最终效果 :

2.3具体代码

blog_list.html

<!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_list.css">
</head>
<body><!--导航栏--><div class="nav"><img src="data:image/tubiao.jpg" alt=""><sapn class="title">我的博客系统</sapn><!--用这个spacer来占位--><span class="spacer"></span><!--按钮--><a href="blog_list.html">主页</a><a href="blog_edit.html">编辑页</a><a href="#">注销</a></div><!--页面主体--><div class="container"><!--左侧个人信息--><div class="container-left"><!-- 用.card表示用户信息 --><div class="card"><img src="data:image/touxiang.jpg" alt=""><h3>老白在这</h3><a href="#">gitee地址</a><div class="counter"><span>文章</span><span>分类</span></div><div class="counter"><span>5</span><span>8</span></div></div></div><!--右侧内容详情--><div class="container-right"><!-- 此处表示一篇博客 --><div class="blog"><div class="title">第一篇博客</div><div class="date">2022-10-05 20:45:35</div><div class="desc">从今天起,做一个幸福的人 Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto quaerat harum rerum magnam sapiente voluptatem, ea minima. Mollitia maxime odio harum ducimus voluptatum debitis voluptate exercitationem, error officia, vitae amet?<a href="#">查看全文  &gt;&gt;</a></div></div><div class="blog"><div class="title">第二篇博客</div><div class="date">2022-10-06 14:45:35</div><div class="desc">俱往矣,数风流人物,还看今朝 Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto quaerat harum rerum magnam sapiente voluptatem, ea minima. Mollitia maxime odio harum ducimus voluptatum debitis voluptate exercitationem, error officia, vitae amet?<a href="#">查看全文  &gt;&gt;</a></div></div></div>
</body>
</html>

common.css

    /*这是起手式,一般都一样*/* {margin: 0;padding: 0;box-sizing: border-box;}html, body {height: 100%;background-image: url(../image/beijng.jpg);background-repeat : no-repeat;background-position: center center;background-size: cover;}.nav {width:100%;height: 50px;background-color: rgba(130,130,130,0.5);color:blanchedalmond;display: flex;align-items: center;}.nav img {width: 40px;height: 40px;border-radius: 20px;margin-left: 30px;margin-right: 10px;}.nav .spacer {width: 70%;}.nav a {color: rgba(255,255,255);text-decoration: none;padding:0 10px ;}.container {width: 1000px;height: calc(100%-50px);margin: 0 auto;/*实现左右布局,使用flex*/display: flex;justify-content: space-between;}.container-left {height: 100%;width: 200px;}.container-right {height: 100%;width: 795px;background-color: rgba(255,255,255,0.8);border-radius: 10px;/*溢出之后如果内容多,自动加滚动条*/overflow: auto ;}.card {background-color: rgba(255,255,255,0.8);border-radius: 10px;padding: 30px;}/*用户头像*/.card img {width:140px;height:140px;border-radius: 70px;}/*用户名*/.card h3 {text-align:center;padding: 10px;}/*gitee链接*/.card a {display: block;text-align: center;text-decoration: none;padding: 10px;color :#aaa;}/*文章和分类*/.card .counter {display: flex;padding:5px;justify-content: space-around;}

blog_list.css

.blog {width: 100%;padding: 20px;
}/*标题*/
.blog .title {font-size: 20px;font-weight: 700;text-align: center;padding: 10px 0;
}/*日期*/
.blog .date {color: cadetblue;text-align: center;padding: 5px;
}/*首行缩进两字符*/
.blog .desc {text-indent: 2em;font-style: inherit;
}/*查看全文的按钮*/
.blog a{text-align: center;display: block;width:130px;height: 40px;margin:10px auto;line-height: 40px;border: 2px black solid;color: black;text-decoration: none;transition: all 0.5s;
}.blog a:hover {background-color: #333;color:#fff
}

2.4实现效果

三 : 博客详情页

3.1具体代码

blog_detail.html

<!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_detail.css">
</head>
<body><!-- 导航栏 --><div class="nav"><img src="data:image/tubiao.jpg" alt=""><span class="title">我的博客系统</span><!-- 这个 spacer 用来占位 --><span class="spacer"></span><!-- 来几个按钮 --><a href="blog_list.html">主页</a><a href="blog_edit.html">写博客</a><a href="#">注销</a></div> <!--页面主体--><div class="container"><!--左侧个人信息--><div class="container-left"><!-- 用.card表示用户信息 --><div class="card"><img src="data:image/touxiang.jpg" alt=""><h3>老白在这</h3><a href="#">gitee地址</a><div class="counter"><span>文章</span><span>分类</span></div><div class="counter"><span>5</span><span>8</span></div></div></div><!-- 右侧内容详情 --><div class="container-right"><!-- 这个 div 里来放博客的内容 --><div class="blog-content"><!-- 博客标题 --><h3>我的第一篇博客</h3><!-- 博客时间 --><div class="date">2022-10-06 20:45:35</div><!-- 博客正文 --><div><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p><p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nulla, dolore corporis hic at ut temporibus perspiciatis quisquam quibusdam doloremque aut consequuntur a voluptate reprehenderit odio, placeat minus iusto ratione eaque.</p></div></div></div></div>
</body>
</html>

blog_detail.css

.blog-content {padding: 30px;
}.blog-content h3 {text-align: center;padding: 20px 0;
}.blog-content .date {text-align: center;color:cadetblue;padding: 10px 0;
}.blog-content p {text-indent: 2em;
}

3.2实现效果

四 : 博客登录页

4.1具体代码

blog_login.html

<!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="data:image/tubiao.jpg" alt=""><sapn class="title">我的博客系统</sapn><!--用这个spacer来占位--><span class="sapcer"></span><!--按钮--><a href="blog_list.html">主页</a><a href="blog_edit.html">编辑页</a></div><!-- 构造页面 --><div class="login-container"><div class="login-dialog"><h3>登录</h3><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="button" value="提交" id="submit"></div></div></div>
</body>
</html>

blog_login.css

.login-container {height:calc(100%-50px);display: flex;/*水平居中*/justify-content: center;/*垂直居中*/align-items: center;
}.login-dialog {width: 400px;height: 350px;background-color: reba(255,255,255,0.8);border-radius: 10px;
}.login-dialog h3 {padding:75px 0;text-align: center;
}.login-dialog .row {height:50px;display: flex;justify-content: center;align-items: center;
}.login-dialog .row span {width: 100px;font-weight: 700;
}#username, #password {width: 200px;height: 40px;font-size: 24px;border: none;outline: none;padding-left: 5px;border-radius: 10px;background-color: beige;
}#submit {width: 300px;height: 40px;color: white;background-color: #98FB98;border: none;border-radius: 10px;
}#submit:active {background-color: grey;
}

4.2实现效果

五 : 博客编辑页

5.1editor.md组件导入

自己实现markdown是有一定难度的 . 所以这里最关键的步骤 ,是使用markdown组件 , 下面我将介绍如何导入这个组件 .

第一步 : 网页搜索editor.md , 进入官网下载 .

第二步 : 将下载好的文件夹放在总的博客系统目录下 .

editor.md这个组件要想正常使用 , 还依赖一个东西jquery . jquery是js世界最知名的库 !

第三步 : 在页面中引入依赖的js , css等文件 . (参考官方文档) .

        <!-- 引入 editor.md 的依赖 --><link rel="stylesheet" href="editor.md/css/editormd.min.css" /><script src="js/jquery.min.js"></script><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>

需要注意目录结构 !

第四步 : 在js代码中 , 初始化editor.md .

    <script>// 初始化编辑器var editor = editormd("editor", {width:"100%",height: "calc(100% - 50px)",// 编辑器中的初始内容markdown: "# 在这里写下一篇博客",// 指定 editor.md 依赖的插件路径path: "editor.md/lib/"});</script>

在书写这部分代码时 , 还有一些注意事项 :

5.2具体代码

blog_edit.html

<!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_edit.css"><!-- 引入 editor.md 的依赖 --><link rel="stylesheet" href="editor.md/css/editormd.min.css" /><script src="js/jquery.min.js"></script><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="data:image/tubiao.jpg" alt=""><span class="title">我的博客系统</span><!-- 这个 spacer 用来占位 --><span class="spacer"></span><!-- 来几个按钮 --><a href="blog_list.html">主页</a><a href="blog_edit.html">写博客</a><a href="#">注销</a></div> <div class="blog-edit-container"><!-- 标题编辑区 --><div class="title"><input type="text" id="title" placeholder="请输入文章标题"><input type="button" id="submit" value="发布文章"></div><!-- 博客编辑器标签 --><div id="editor"></div></div><script>// 初始化编辑器var editor = editormd("editor", {width: "100%",// 设定编辑器高度height: "calc(100% - 50px)",// 编辑器中的初始内容markdown: "# 在这里写下一篇博客",// 指定 editor.md 依赖的插件路径path: "editor.md/lib/"});</script>
</body>
</html>

blog_edit.css

.blog-edit-container {width: 1000px;height: calc(100% - 50px);margin: 0 auto;
}.title {height: 50px;display: flex;align-items: center;justify-content: space-between;
}#title {width: 895px;height: 40px;border-radius: 10px;border: none;outline: none;font-size: 22px;padding-left: 5px;background-color: rgba(255, 255, 255, 0.8);
}#submit {width: 100px;height: 40px;border-radius: 10px;color: white;background-color: orange;border: none;outline: none;
}#submit:active {background-color: rgb(32, 22, 22);
}#editor {border-radius: 10px;/* background-color: rgba(255, 255, 255, 0.8); */opacity: 80%;
}

5.3实现效果

至此 , 博客系统的前端部分代码全部完成 !

javaEE初阶---博客系统(前端)相关推荐

博客系统前端页面代码实现及页面展示(代码版)
hi,大家好,今天为大家带来博客系统的前端代码及页面展示我们使用VS code 这个编码工具来编写代码博客系统前端页面分为四个部分 1.博客列表页 2.博客编辑页 3.博客登录页 4.博客详情页
实现一个博客系统(前端页面设计)
博客系统的四个页面展示效果: 注意CSS有一些隐式规定,下面代码的状态:上下边距不是50px(不是两者边距之和,而是他们的最大值);上下边距塌方问题,况且只在垂直方向有,水平方向就是他们的和:况且他的 ...
一个前端写的php博客系统2--前台展示+后台登录
前台首页展示首页的侧边预留的位置是给后面的统计,热门之类的版块预留位置... 控制器文章列表展示要考虑到文章数量增多后分页展示,那么我们要统计文章数量,使用 count() 计算文章总数,然后使用 ...
基于SSM实现个人博客系统
项目编号:BS-PT-005 该博客是基于SSM实现的一个个人博客系统,适合初学SSM和个人博客制作的同学学习. 主要涉及技术包括的包括 Maven.Spring.SpringMVC.MyBatis. ...
SSM实现个人博客系统
项目编号:BS-PT-005 该博客是基于SSM实现的一个个人博客系统,适合初学SSM和个人博客制作的同学学习. 主要涉及技术包括的包括 Maven.Spring.SpringMVC.MyBatis. ...
基于 SpringBoot + MyBatis 的博客系统
文章目录 1. 项目设计 2. 效果展示 3. 创建项目并配置文件 1.1 创建 Spring 项目 1.2 配置文件 4. 数据库实现用户和博客管理 4.1 设计数据库 4.2 使用 MyBatis ...
前端 - 博客系统(页面设计) - JavaEE初阶 - 细节狂魔
文章目录前言博客系统博客列表页紧急修改一下背景图片,虽然上面那张图很美,但是小了.特别的模糊,我就在替换一下背景图 html 代码部分通用 css 代码部分博客列表页专属 css文件博客 ...
前端三剑客之 HTML - JavaEE初阶 - 细节狂魔
文章目录前言后端 && 前端的部分历史 - java 关于网站搭建正文开始! HTML 怎么编写一个HTML的代码? 小拓展: 快速编写 HTML 代码的小技巧浏览器的开发者工 ...
【java毕业设计】基于javaEE+SSM+MySql的个人博客系统设计与实现（毕业论文+程序源码）——个人博客系统
基于javaEE+SSM+MySql的个人博客系统设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于javaEE+SSM+MySql的个人博客系统设计与实现,文章末尾附有本毕业设计的论文和源 ...

javaEE初阶---博客系统(前端)