威海住房建设部官方网站,小米网站制作,wordpress问卷插件,深圳百度seo关键词排名文章目录1 效果展示1.1 博客登录页面1.2 博客列表页面1.3 博客详情页面1.4 博客编辑页面2 页面具体实现2.1 博客列表页的实现2.2 博客详情页的实现2.3 博客登录页面的实现2.4 博客编辑页面的实现写在最后1 效果展示
1.1 博客登录页面
用于实现用户的登录功能#xff0c;并展…
文章目录1 效果展示1.1 博客登录页面1.2 博客列表页面1.3 博客详情页面1.4 博客编辑页面2 页面具体实现2.1 博客列表页的实现2.2 博客详情页的实现2.3 博客登录页面的实现2.4 博客编辑页面的实现写在最后1 效果展示
1.1 博客登录页面
用于实现用户的登录功能并展示必要的信息。 1.2 博客列表页面
展示博客的标题发布时间摘要等内容可以选择查看全文来获取博文的详细内容。 1.3 博客详情页面
用于展示博文的具体信息。 1.4 博客编辑页面
用于编辑博文与发布博文。 2 页面具体实现
2.1 博客列表页的实现
创建 blog_list.html编写博客列表页面。
导航栏的具体实现
导航栏包含头像主页写博客注销及一些跳转spacer 空白元素用于占位调整布局观察效果展示的四个页面均有导航栏该代码可以复用~ !-- 这是一个导航栏 --div classnavimg srcimage/博客头像.jpg alt博客头像.jpg加载失败span我的博客系统/span!-- 空白元素用于占位调整布局 --div classspacer/diva hrefblog_list.html主页/aa hrefblog_edit.html写博客/aa href#注销/a/div由于各个页面均有导航栏因此导航栏的样式可以提取出来构成一个css文件方便其他页面引入样式。
创建 common.css其余页面引入该样式
清除浏览器默认样式自行准备背景图用于博客系统的背景将 html 和 body 的高度设置为 100% 使得背景高度和浏览器窗口高度一样导航栏 nav 内部使用 flex 布局方便排列 logo 和 按钮该代码中也包含了个人信息和博客列表的样式。
/* 放置一些各个页面可能用到的公共样式 */* {margin: 0;padding: 0;box-sizing: border-box;
}/* 导航栏样式 */
.nav {height: 50px;background-color: rgba(51, 51, 51, 0.4);color: white;display: flex;/* 垂直居中 */align-items: center;
}/* 头像圆形 */
.nav img {width: 40px;height: 40px;border-radius: 50%;margin-left: 30px;margin-right: 10px;
}.nav .spacer {width: 70%;
}.nav a {color: white;text-decoration: none; /* 去掉下划线 */padding: 0 10px;
}/* 设置背景 */
html, body {height: 100%;
}body {background: url(../image/background.jpg) no-repeat center center;background-size: cover;
}/* 版心相关的样式 */
.container {width: 1000px;height: calc(100% - 50px);margin: 0 auto;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;
}/* card相关的样式 */
.card {background-color: rgba(255, 255, 255, 0.8);border-radius: 10px;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;color: #999;padding: 10px;text-decoration: none;
}.card .counter {display: flex;justify-content: space-around;padding: 5px;
}实现版心左侧用户信息右侧博客列表
container 作为版心实现整体居中对齐的效果个人信息博文列表的具体实现见代码注释。 !-- container作为页面的版心 --div classcontainer!-- 左侧个人信息 --div classleft!-- 表示整个用户区域 --div classcardimg srcimage/个人信息头像.png alt个人信息头像.png加载失败h3小蒲七七/h3a href#github 地址/adiv classcounterspan文章/spanspan分类/span/divdiv classcounterspan2/spanspan1/span/div/div/div!-- 右侧内容详情 --div classright!-- .blog div 对应一个博客 --div classblog!-- 博客标题 --div classtitle【零基础学C】初识C语言01/div!-- 博客发布时间 --div classdate2022-10-16 17:20:00/div!-- 博客摘要 --div classdesc第一个C语言程序数据类型变量、常量字符串转义字符注释选择语句循环语句函数数组操作符常见关键字define定义常量和宏指针结构体/diva href#查看全文 gt;gt;/a/div/div2.2 博客详情页的实现
创建 blog_detail.html编写博客详情页面。
导航栏及个人信息部分与列表页的内容相同直接复制代码即可。这里只对博客详情内容的代码编写进行说明。
博客的内容整体放到 blog-content 中博客标题使用 h3 标签博客发布时间放到 date 中博客正文使用 p 标签读者也可以根据需要自己调整。 !-- 右侧内容详情 --div classright!-- 使用该div展示博客内容 --div classblog-content!-- 标题 --h3【零基础学C】初识C语言01/h3!-- 博客发布时间 --div classdate2022-10-16 17:20:00/div!-- 正文 --pC语言是一门通用计算机编程语言广泛应用于底层开发。C语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。/pp尽管C语言提供了许多低级处理的功能但仍然保持着良好跨平台的特性以一个标准规格写出的C语言程序可在许多电脑平台上进行编译甚至包含一些嵌入式处理器单片机或称MCU以及超级电脑等作业平台。/pp二十世纪八十年代为了避免各开发厂商用的C语言语法产生差异由美国国家标准局为C语言制定了一套完整的美国国家标准语法称为ANSIC作为C语言最初的标准。目前2011年12月8日国际标准化组织ISO和国际电工委员会IEC发布的C11标准是C语言的第三个官方标准也是C语言的最新标准该标准更好的支持了汉字函数名和汉字标识符一定程度上实现了汉字编程。/p/div/divblog_detail.css博客详情页的样式文件
/* 博客详情页的样式 */
.blog-content {padding: 30px;
}.blog-content h3 {text-align: center;padding: 20px 0;
}.blog-content .date {text-align: center;color: #fa8497;padding: 20px 0;
}.blog-content p {text-indent: 2em;padding: 10px 0;
}.right {/* 为right添加滚动条 */overflow: auto;
}2.3 博客登录页面的实现
登录页面相对比较简单需要注意的是注销按钮在该页面没必要继续展示其余导航栏代码与之前页面一致。
创建并编辑 blog_login.html这里给出登录界面的核心代码
登录页面会话框
!--登录页面会话框--
div classlogin-containerdiv classlogin-dialogh3登录/h3div classrowspan用户名/spaninput typetext idusername/divdiv classrowspan密emsp;码/spaninput typepassword idpassword/divdiv classrowbutton登录/button/div/div
/div编辑 blog_login.css实现登录页的样式
使用 .row button:active 伪类选择器, 实现点击按钮时样式切换的效果
/* 登录界面样式文件 */.login-container {width: 100%;height: calc(100% - 50px);/* 需要让里面的子元素垂直水平居中需要用flex布局 */display: flex;align-items: center;justify-content: center;
}.login-container .login-dialog {width: 400px;height: 350px;border-radius: 10px;background-color: rgba(255, 255, 255, 0.8);
}.login-container .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 {display: block;width: 100px;font-weight: 700;
}#username, #password {width: 200px;height: 40px;font-size: 22px;line-height: 40px;padding-left: 10px;border-radius: 10px;/* 去掉边框 */border: none;/* 去掉轮廓线 */outline: none;
}.row button {width: 300px;height: 50px;border-radius: 10px;color: white;background-color: #fa8497;border: none;outline: none;/*padding: 10px;*/
}.row button:active {background-color: #fc4c65;
}2.4 博客编辑页面的实现
博客编辑页面涉及到一个 markdown 编辑器这里我们使用 editor.md 来实现。在编辑页面引入即可~
什么是 editor.md ? editor.md 是一个开源的页面 markdown 编辑器组件官网参见: https://pandao.github.io/editor.md/用法可以参考代码中的 examples 目录中的示例。
从官网下载压缩包并解压引入项目目录中其目录结构如下图所示 引入 editor.md !-- 引入 editor.md 相关的依赖 --link relstylesheet hrefeditor.md/css/editormd.min.cssscript srcjs/jquery.min.js/scriptscript srceditor.md/lib/marked.min.js/scriptscript srceditor.md/lib/prettify.min.js/scriptscript srceditor.md/editormd.js/script初始化编辑器 // 初始化编辑器var editor editormd(editor, {// 这里的尺寸必须在这里设置设置样式会被 editormd 自动覆盖width: 100%,// 设定编辑器高度height: calc(100% - 50px),// 编辑器的初始内容markdown: # 在这里写下一篇博客,// 指定 editor.md 依赖的插件路径path: editor.md/lib/});编辑 blog_edit.html
整个编辑区放到 div.blog-edit-container 中里面包含一个标题编辑区, 和内容编辑区标题编辑区包含一个 input用来填写标题以及一个 button 按钮用于提交内容编辑区先创建一个 div#editor并使用上述 editor.md 相关代码进行初始化。
!DOCTYPE html
html langen
headmeta charsetUTF-8title博客编辑页/titlelink relstylesheet hrefcss/common.csslink relstylesheet hrefcss/blog_edit.css!-- 引入 editor.md 相关的依赖 --link relstylesheet hrefeditor.md/css/editormd.min.cssscript srcjs/jquery.min.js/scriptscript srceditor.md/lib/marked.min.js/scriptscript srceditor.md/lib/prettify.min.js/scriptscript srceditor.md/editormd.js/script
/head
body
!-- 这是一个导航栏 --
div classnavimg srcimage/博客头像.jpg alt博客头像.jpg加载失败span我的博客系统/span!-- 空白元素用于占位调整布局 --div classspacer/diva hrefblog_list.html主页/aa hrefblog_edit.html写博客/aa href#注销/a
/div!-- 包裹整个博客编辑页面的内容 --
div classblog-edit-containerdiv classtitleinput typetext placeholder在此输入文章标题button发布文章/button/div!-- 放置 md 编辑器 --div ideditor/div
/divscript// 初始化编辑器var editor editormd(editor, {// 这里的尺寸必须在这里设置设置样式会被 editormd 自动覆盖width: 100%,// 设定编辑器高度height: calc(100% - 50px),// 编辑器的初始内容markdown: # 在这里写下一篇博客,// 指定 editor.md 依赖的插件路径path: editor.md/lib/});
/script/body
/html写在最后 本文完整代码已上传 gitee如有需要请自取https://gitee.com/hxh2001/blog-system 以上便是本文的全部内容啦创作不易如果你有任何问题欢迎私信感谢您的支持下一节我们将继续使用 JDBC、Servlet 等内容完成该博客系统的后端逻辑。
