前端页面项目——博客系统
2024-05-10 13:52:47
目录
1.实现博客列表页
1.1 实现导航栏
1.2 实现中间版心
1.3 实现个人信息
1.4 实现博客列表
2. 实现博客正文页
3. 实现博客登陆页
4. 实现博客编辑
4.1 实现编辑区
4.2 引入编辑器
展示
1）登录页面
2）博客列表页
3）博客详情页
4）博客编辑页
，项目所需目录表
1.实现博客列表页
创建 blog_list.html, 编写博客列表页
1.1 实现导航栏
编辑 blog_list.html, 创建导航栏的 html 代码。
导航栏里面包含 logo, 标题, 以及一些按钮(跳转链接)。
为了实现左右排列, 在 logo 和 按钮 之间加一个 spacer 作为占位器。
1）先将页面需要得创建好
其中主页和写博客两个标签都加上对于的网址，方面跳转，后面的也一样
<!-- 导航栏 --><div class="nav"><img src="data:image/deng.jpg" alt=""><span>我的博客系统</span><!-- 空白元素, 用来占位置 --><div class="spacer"></div><a href="blog_list.html">主页</a><a href="blog_edit.html">写博客</a><a href="#">注销</a></div>这是页面展示效果
2）对页面进行排版设计
创建一个common.css 用来存放整个博客系统的页面设计代码，同时要将common.css引入blog_list.html
<head><link rel="stylesheet" href="css/common.css">
</head>编辑common.css ，先对照导航栏的内容进行设计
/* 放置一些各个页面都会用到的公共样式 */* {margin: 0;padding: 0;box-sizing: border-box;
}.nav {width: 100%;/* 此处没设计稿, 具体的尺寸取决于我自己的喜好 */height: 50px;background-color: rgba(51, 51, 51, 0.4);color: white;/* 导航栏内部的内容, 都是一行排列的. 就需要使用 flex 布局来进行操作 */display: flex;/* 实现子元素垂直居中效果 */align-items: center;
}.nav img {width: 40px;height: 40px;border-radius: 50%;margin-left: 30px;margin-right: 10px;
}.nav .spacer {/* 相对于父元素的宽度, 如果父元素(.nav) 宽度是 1000px, 此时 .spacer 就是 700px */width: 70%;
}.nav a {color: white;text-decoration: none;padding: 0 10px;
}排版效果如下：
3）给页面加背景
直接在 common.css 下添加背景图和设计
/* 给整个页面加上背景图 */html,
body {height: 100%;
}body {background-image: url(../image/jing.jpg);background-repeat: no-repeat;background-position: center center;background-size: cover;
}* {margin: 0;padding: 0;box-sizing: border-box;
}效果展示
1.2 实现中间版心
版心设计有两个区域。.
左侧是个人信息。右侧是博客列表
1）编辑 blog_list.html
container 作为版心, 实现居中对齐的效果
<!-- 这里的 .container 作为页面的版心 --><div class="container"><!-- 左侧个人信息 --><div class="left"><!-- 表示整个用户信息区域. --><div class="card"></div></div><!-- 右侧内容详情 --><div class="right"></div></div>2）编辑 common.css
.container {/* 当前版心并不是和窗口一样宽的 */width: 1000px;height: calc(100% - 50px);/* 水平居中 */margin: 0 auto;display: flex;justify-content: space-between;
}.container .left {height: 100%;width: 200px;background-color: rgb(0, 128, 49);
}.container .right {height: 100%;width: 795px;background-color: rgba(255, 255, 255, 0.8);border-radius: 10px;/* 内容滚动条 */overflow: auto;
}效果展示
1.3 实现个人信息
1）编辑 blog_list.html
把个人信息放到一个 .card div 中.
个人信息中包含 头像 (img), 用户名 (h3), 用户的 github (a)。
<!-- 左侧个人信息 --><div class="left"><!-- 表示整个用户信息区域. --><div class="card"><img src="data:image/wen.jpg" alt=""><h3>Fly Upward</h3><a href="https://gitee.com/dafei-cloud">gitee 地址</a></div></div>刚插入信息的效果
2） 编辑 common.css，对个人信息卡片进行排版
/* 实现 card 部分的样式 */.card {background-color: rgba(255, 255, 255, 0.8);border-radius: 10px;/* 通过这里的内边距, 就可以让头像居中 *//* 这里设置的 30px 意思是四个方向, 都是 30px */padding: 30px;
}.card img {width: 140px;height: 140px;border-radius: 50%;
}.card h3 {text-align: center;padding: 10px;
}.card a {/* a 默认是行内元素. 行内元素的很多边距不生效. 为了简单起见, 直接设为块级元素. */display: block;text-align: center;text-decoration: none;color: #999;padding: 10px;
}排版之后的效果
1.4 实现博客列表
1）编辑 blog_list.html
每个博客使用 div.blog 来表示.
每个博客中包含标题, 发布时间, 描述, 查看全文按钮.
此处先在查看全文按钮处加入博客全文的连接，后面实现即可跳转
<div class="right"><!-- .blog 就对应一个博客 --><div class="blog"><!-- 博客标题 --><div class="title">我的第一篇博客</div><!-- 博客发布时间 --><div class="date">2022-05-10 20:00:00</div><!-- 博客的摘要 --><div class="desc">把学到的知识记录下来. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla alias tenetur ut velit ex voluptatibus consequatur quam exercitationem, assumenda ea blanditiis repudiandae? Repellendus tenetur nostrum asperiores molestias doloremque cupiditatemaiores.</div><a href="../博客系统/blog_detail.html">查看全文 >> </a></div><div class="blog"><!-- 博客标题 --><div class="title">我的第二篇博客</div><!-- 博客发布时间 --><div class="date">2022-05-12 20:00:00</div><!-- 博客的摘要 --><div class="desc">从今天起, 我要认真敲代码. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla alias tenetur ut velit ex voluptatibus consequatur quam exercitationem, assumenda ea blanditiis repudiandae? Repellendus tenetur nostrum asperiores molestias doloremque cupiditatemaiores.</div><a href="../博客系统/blog_detail.html">查看全文 >> </a></div></div>效果展示
2） 创建 blog_list.css
这一部分是单独设计博客列表页面的
使用伪类选择器 .blog .detail:hover , 实现光标悬停时修改样式的功能.
给 .blog .detail 中加上过度效果 transition: all 0.3s; 使悬停的样式改变更逼真
/* 这个文件中专门写和博客列表页相关的样式 */.blog {width: 100%;/* 高度如果不设置, 就取决于里面的内容高度的综合 */padding: 20px;
}.blog .title {text-align: center;font-size: 22px;font-weight: bold;padding: 10px 0;
}.blog .date {/* 日期居中 */text-align: center;color: rgb(15, 100, 56);/* 上下内边距10px，左右0 */padding: 10px 0;
}.blog .desc {/* 首行缩进两字符 */text-indent: 2em;
}.blog a {/* 设置成块级元素, 方便设置尺寸和边距 */display: block;width: 140px;height: 40px;margin: 10px auto;border: 2px black solid;color: black;line-height: 40px;text-align: center;text-decoration: none;/* 如果想让变化变的柔和一些, 可以加上过渡效果 */transition: all 0.5s;
}.blog a:hover {background: #333;color: #fff;
}效果展示
2. 实现博客正文页
1）创建 blog_detail.htm
其中博客正文页的导航栏、个人信息卡片和右侧版心是和博客列表页一样的，只需要直接复制过来即可。
<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"><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/boog_detail.css"><title>博客详情页</title>
</head><body><!-- 这是导航栏 --><div class="nav"><img src="data:image/deng.jpg" alt=""><span>我的博客系统</span><!-- 空白元素, 用来占位置 --><div class="spacer"></div><a href="blog_list.html">主页</a><a href="blog_edit.html">写博客</a><a href="#">注销</a></div><!-- 这里的 .container 作为页面的版心 --><div class="container"><!-- 左侧个人信息 --><div class="left"><!-- 表示整个用户信息区域. --><div class="card"><img src="data:image/wen.jpg" alt=""><h3>Fly Upward</h3><a href="https://gitee.com/dafei-cloud">gitee 地址</a><div class="counter"><span>文章</span><span>分类</span></div><div class="counter"><span>2</span><span>1</span></div></div></div><!-- 右侧内容详情 --><div class="right"></div></div>
</body>
2）实现博客正文
编辑 blog_detail.htm。
博客内容中包含博客标题 (h3), 博客时间(div.date), 博客正文(p)
将正文编辑在div.right 标签内
<!-- 右侧内容详情 --><div class="right"><!-- 使用这个 div 来包裹整个博客的内容详情 --><div class="blog-content"><!-- 博客标题 --><h3>我的第一篇博客</h3><!-- 博客的时间 --><div class="date">2022-05-10 20:00:00</div><!-- 正文 --><p>把学到的知识记录下来. Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla alias tenetur ut velit ex voluptatibus consequatur quam exercitationem, assumenda ea blanditiis repudiandae? Repellendus tenetur nostrum asperiores molestias doloremque cupiditatemaiores.</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat vel omnis consectetur reprehenderit velit, mollitia perspiciatis porro natus sit iure laudantium rem quas quae. Perferendis mollitia sint aut rerum minima?</p><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis aspernatur corporis autem nisi, aliquid exercitationem perferendis, repellat sequi labore ad expedita itaque quisquam aperiam? Voluptatem numquam cupiditate exercitationem quis earum.</p><p>从今天开始, 我要认真敲代码. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Blanditiis veniam dolorem modi, sunt quo rem facere ut dolores inventore ratione nemo provident quae eius adipisci quidem facilis quod. Maxime, nam?</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat vel omnis consectetur reprehenderit velit, mollitia perspiciatis porro natus sit iure laudantium rem quas quae. Perferendis mollitia sint aut rerum minima?</p><p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis aspernatur corporis autem nisi, aliquid exercitationem perferendis, repellat sequi labore ad expedita itaque quisquam aperiam? Voluptatem numquam cupiditate exercitationem quis earum.</p></div></div>效果如下
3）对正文进行排版
创建blog_detail.css
并将blog_detail.css 引入blog_detail.htm，在上面创建 blog_detail.htm 时，已经提前引入文件的，现在只需编辑保存即可使用。
/* 正文容器 */.blog-content {padding: 30px;
}/* 标题 */.blog-content h3 {text-align: center;padding: 20px 0;
}/* 日期 */.blog-content .date {text-align: center;color: rgb(0, 128, 0);padding: 20px 0;
}/* 正文锻炼 */.blog-content p {text-indent: 2em;padding: 10px 0;
}效果展示
由于在设置common.css时已经加入了/* 内容滚动条 */ overflow: auto;所以可以看到下面右边有个灰色的滚动条
3. 实现博客登陆页
1）创建 blog_login.html
引入导航栏、引入样式 common.css
<!-- 这是导航栏 --><div class="nav"><img src="data:image/deng.jpg" alt=""><span>我的博客系统</span><!-- 空白元素, 用来占位置 --><div class="spacer"></div><a href="blog_list.html">主页</a><a href="blog_edit.html">写博客</a><!-- 注销按钮没必要在登录页面展示 --><!-- <a href="#">注销</a> --></div><link rel="stylesheet" href="css/common.css">2）实现版心
<div class="login-container"><div class="login-dialog"></div></div>创建blog_login.css 来对登录页面进行排版，并引入blog_login.html 中
<link rel="stylesheet" href="css/blog_login.css">先将登录区域设计好
.login-container {width: 100%;height: calc(100% - 50px);/* 需要让里面的子元素, 垂直水平居中, 需要用到 flex 布局 */display: flex;align-items: center;justify-content: center;
}.login-dialog {width: 400px;height: 350px;background-color: rgba(255, 255, 255, 0.8);border-radius: 10px;
}
效果展示
3）实现登录信息卡片
编辑 blog_login.html
登陆框整体放倒 div.login-dialog 中.
内部包含三个行, 使用 div.row 表示.
每个行里分别包含, 用户名输入框, 密码输入框, 提交按钮。
<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"><button>提交</button></div></div></div>效果展示
4）排版登录卡片
编辑blog_login.css
.login-dialog h3 {text-align: center;padding: 50px 0;
}.login-dialog .row {height: 50px;width: 100%;display: flex;align-items: center;justify-content: center;
}.login-dialog .row span {/* 把 span 转成块级元素, 方便设置后续尺寸 */display: block;width: 100px;font-weight: 700;
}#username,
#password {width: 200px;height: 40px;border-radius: 10px;/* 文字的设置 */font-size: 22px;line-height: 40px;padding-left: 10px;/* 去掉边框 */border: none;/* 去掉轮廓线 */outline: none;
}.row button {width: 300px;height: 50px;border-radius: 10px;color: white;background-color: rgb(0, 128, 0);border: none;outline: none;margin-top: 50px;
}.row button:active {background-color: #666;
}效果展示
4. 实现博客编辑
1）创建 blog_edit.html
引入导航栏、引入引入样式 common.css
<!-- 这是导航栏 --><div class="nav"><img src="data:image/deng.jpg" alt=""><span>我的博客系统</span><!-- 空白元素, 用来占位置 --><div class="spacer"></div><a href="blog_list.html">主页</a><a href="blog_edit.html">写博客</a><a href="#">注销</a></div> <link rel="stylesheet" href="css/common.css">4.1 实现编辑区
1）编辑 blog_edit.html
整个编辑区放到 div.blog-edit-container 中。
里面包含一个标题编辑区, 和内容编辑区。
标题编辑区, 包含一个 input, 用来填写标题, 以及一个 button 按钮用于提交。
内容编辑区先创建一个 div#editor, 后面将使用 editor.md 进行初始化。
<!-- 包裹整个博客编辑页内容的顶级容器 --><div class="blog-edit-container"><div class="title"><input type="text" placeholder="在此处输入标题"><button>发布文章</button></div><!-- 放置 md 编辑器 --><div id="editor"></div></div>
2）创建 blog_edit.css
#editor 需要使用 opacity: 80%; 设置透明度. 如果直接使用 background-color 后面会被
editor.md 给覆盖掉。
.blog-edit-container {width: 1000px;height: calc(100% - 50px);margin: 0 auto;
}.blog-edit-container .title {width: 100%;height: 50px;display: flex;align-items: center;justify-content: space-between;
}.blog-edit-container .title input {width: 895px;height: 40px;border-radius: 10px;border: none;outline: none;font-size: 22px;line-height: 40px;padding-left: 10px;background-color: rgba(255, 255, 255, 0.8);
}.blog-edit-container .title button {width: 100px;height: 40px;border-radius: 10px;color: white;background-color: orange;border: none;outline: none;
}.blog-edit-container .title button:active {background-color: #666;
}#editor {border-radius: 10px;/* background-color: rgba(255, 255, 255, 0.8); */opacity: 80%;
}
效果展示
4.2 引入编辑器
1) 下载 editor.md
从官网上下载到压缩包并解压（浏览器搜索 editor.md 就可以了），然后将文件放到项目的目录中
2) 引入 editor.md依赖
在blog_edit.html 中引入
<!-- 引入 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>3）创建 js
js/jquery.min.js
先在项目目录下创建js文件夹，然后再里面创建 jquery.min.js 文件
浏览器搜索jQuery.cdn 然后按下面的操作，最后复制到 jquery.min.js 文件里面
4）初始化 editor.md
编辑 blog_edit.html
<script>// 初始化编辑器let editor = editormd("editor", {// 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. width: "100%",// 设定编辑器高度height: "calc(100% - 50px)",// 编辑器中的初始内容markdown: "# 在这里写下一篇博客",// 指定 editor.md 依赖的插件路径path: "editor.md/lib/"});</script>效果展示
可以正常显示并编辑
前端页面项目——博客系统相关推荐
- 前端页面设计 博客系统
--页面介绍 博客列表页:显示了当前系统中都有哪些发布出来的博客 导航栏:logo,标题,主页,写博客,注销 左侧:当前用户信息,用户的头像+名字+其他的简单信息 右侧:博客列表 列表中的每一项,包含 ...
- 前端项目 - 博客系统(纯页面)
预览效果 1. 实现博客列表页 导航栏 common.css blog_list.html blog_list.css 2. 实现博客正文页 blog_detail.html blog_detail. ...
- 从零开始开发SSM项目-博客系统实战
一.项目包含功能 使用SSM框架开发一个博客系统,包含的功能大致有: 1.用户注册与激活,激活方式通过邮件激活 2.用户的登录和退出,包括账号登录.手机快捷登录和qq第三方登录 3.用户账号登录和注册 ...
- JavaWeb 项目 --- 博客系统(基于模板引擎)
文章目录 1. 创建 maven 项目 2. 设计数据库 3. 封装数据库的操作代码 3.1 创建 DBUtil 类 3.2 创建类 Blog (代表一篇博客) 3.3 创建类 User (代表一个用 ...
- JavaWeb项目——博客系统
系统介绍 博客是互联网平台上的个人信息交流中心.通常博客就是用来发表文章,所有的文章都是按照年份和日期排列,有些类似斑竹的日记.看上去平淡无奇,毫无可炫耀之处,但它可以让每个人零成本.零维护地创建自己 ...
- JavaWeb 项目 --- 博客系统(前后分离)
文章目录 效果展示 1. 创建 maven 项目 2. 设计数据库 3. 封装数据库的操作代码 3.1 创建 DBUtil 类 3.2 创建类 Blog (代表一篇博客) 3.3 创建类 User ( ...
- SSM项目 - 博客系统
在线体验 : http://43.139.1.94:8080/login.html 项目 Gitee 链接 : 博客系统 - SSM 1.SSM 版本的博客系统相较于 Servlet 版本的升级 1. ...
- Java项目——博客系统（毕业设计）
文末获取资源 文章目录 主页 注册模块 个人中心模块 发布文章模块 推荐模块 评论模块 点赞模块 通知模块 主页 主页是用户打开的第一个页面,是到达各个模块的入口,友好的一个界面可以给用户一个好的印象 ...
- 基于Spring+SpringMVC+MyBatis博客系统的开发教程（十三）
第13课:第三方 QQ 登录及账号绑定与解除 使用 QQ 第三方登录时要调用第三方接口,需要 AppID 和 AppKey 等信息,所以首先要申请注册一下. 申请注册 首先在百度搜索 QQ 互联或者点 ...
最新文章
- java,js,jstl,EL的简单交互
- 解决SecureCRT中文乱码
- 因需设岗，竞争上岗的多Agent协作的协作模式
- 从IEEE754标准谈C语言浮点数据类型
- pygame学习和python巩固——字体显示
- Docker中运行Springboot jar时的变量传递
- 国家开放大学计算机应用模块3客观题答案,国家开放大学《计算机应用基础》考试与答案形考任务模块3模块3Excel2010电子表格系统—客观题答案.pdf...
- Tomcat启动过程源码解读
- 异常处理：try-catch-finally与throws的区别及使用情况
- hive 直接访问mysql_hive 直接插入mysql
- linux常用命令大全，入门基础版
- api wke_好用的wke浏览器代码，兼容chrome
- iOS PNG和JPG的区别
- python插件安装包_Python的插件安装
- 新手向python实现淘宝自动抢购
- js监听只读文本框_js设置input文本框只读
- 信道以及信道容量小结
- RISC-V指令集架构------RV32I基础整数指令集
- 你想要的免费ppt资源（我帮你准备好啦！）
- 在微型计算机中 多媒体信息包括,公务员考试常识题：1、具有多媒体功能的微型计算机系统中，常用的CD-ROM是...