前端项目 - 论坛信息管理系统（纯页面）
目录
预览效果
0. 文件夹列表说明
1. 实现论坛列表页
1.1 论坛列表页 - list.html
1.3 主页和正文页面 公用的个人信息 - common.css
1.4 论坛列表页 - list.css
2. 实现论坛正文页
2.1 论坛正文页 - detail.html
2.2 论坛正文页 - detail.css
3. 实现论坛登陆页
3.1 论坛登陆页 - login.html
3.2 论坛登陆页 - login.css
4. 实现论坛注册页
4.1 论坛注册页 - logon.html
4.2 论坛注册页 - logon.css
5. 实现帖子编辑页
5.1 帖子编辑页 - editor.html
5.2 帖子编辑页 - editor.css
【大家好，我是爱干饭的猿，如果喜欢这篇文章，点个赞，关注一下吧，后续会持续分享页面改进和与后端连接的相关操作】
预览效果
实现一个简单的论坛信息管理系统 .当前先完成页面设计的部分 . 通过前端知识来构建出网页 .
主要分成五个页面 :
- 论坛列表页
- 论坛正文页
- 论坛登陆页
- 论坛注册页
- 帖子编辑页
1. 论坛列表页
2. 论坛正文页
3. 论坛登陆页
4. 论坛注册页
5. 帖子编辑页
0. 文件夹列表说明
1. 先看一下相应代码文件夹列表位置
- 论坛列表页 - list.html
- 论坛正文页 - detail.html
- 论坛登陆页 - login.html
- 论坛注册页 - logon.html
- 帖子编辑页 - editor.html
2. 其中css文件夹中有
detail.css - 论坛正文页
editor.css - 帖子编辑页
list.css - 论坛列表页
login.css - 论坛登陆页
logon.css - 论坛注册页
naviddation bar.css - 导航栏公用的css
common.css - 主页和正文页面 公用的个人信息
3. 其中img文件中存放的是页面所需要的图片
可以自行导入
4. 其中editor文件夹中存放的是 Markdown 编辑器
editor.md 是一个开源的页面 markdown 编辑器组件
在实现帖子编辑页时需要用到
下载网址：markdown 编辑器
1. 实现论坛列表页
1.1 论坛列表页 - list.html
论坛主页
爱干饭的猿
男
软件开发工程师
积分
10
等级
1
-
他拾到了遗落凡间的信伐。
版主: 爱干饭的猿
他由记得，当他还是个孩子的时候，在养了只小狗的同时，种了一棵樱桃树。而此时，树正长的旺盛。天上烈火在水坝中烧着，空中鸟雀在湖水中游着，光穿过樱桃树的叶片照在树上蝉鸣着，吵得狗不断翻着身着。他刚从学校回来，还没见它，便己听到它的犬吠，他走到不远处，便见到那只狗向他扑来，但是一条铁链的却限制了他的动作，只得努力的叫着。他再走近，那狗又蹦起来，前脚不注意踩到他的衣服上。他急忙躲窜，但它只当是与他之间的玩耍。他身受一脚却也不碍事，用湿布一擦即可去掉污泥。那年夏天，每次他回到老家，它都会如此迎接他。
点击次数
100
主题数
10
-
莫不是斜日青天, 那见得灯火阑珊?
版主: 爱干饭的猿
其实这世上事都是慢慢积累起来的，没有什么是突然的，没有什么突然。我明白自己的坚持总不会有错，点点生活都被点点时光刻录下来，你不知道它的光辉，是因为它在一点一点地积累能量。终有一天，点点的积累会回以最暖心的光芒。站在时光的顶端，闭眼轻轻仰起头来，膜拜一段往事，或许已经逾越了千年。
点击次数
100
主题数
10
-
生活不是等待风暴过去，而是学会在雨中翩翩起舞。
版主: 爱干饭的猿
站在流年的渡口，徘徊张望，叹息溅落如冬日的寒冰，划伤了一颗憔悴的心。再回首，岁月的离歌余音绕梁，惹人伤怀。再回首，生命的千般流转，淡泊了一颗心。当世界给草籽重压时，它总会用自己的方法破土而出。世上一开始没有路，走多了便成了路。青春的字典无“困难”之字，青春的开头无“障碍”之语。相信自己我能行。认我们有有限的青春去做无限的奋斗吧!这个充满生机的世界呢?不要放弃，坚持到底，战胜使你头疼的恶魔，你就战胜了你自己，你就会获得成功。没有一种不通过蔑视忍受和奋斗就可以征服的命运。这清韵流转蕴涵的深意，穿过幽幽深深的曲径，缓缓的抵达心灵的深处，此刻一曲莫道不消魂，暗自凝噎。
生活不是等待风暴过去，而是学会在雨中翩翩起舞。
点击次数
100
主题数
10
1.2 导航栏公用的css - naviddation bar.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100%;
background-image: url(../img/cat.png);
background-size: cover;
background-repeat: no-repeat;
}
.导航栏 {
width: 100%;
height: 50px;
background-color: rgba(51, 51, 51, 0.4);
/* 相对定位 */
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.占位 {
width: 80%;
}
.left-logo {
width: 180px;
color: white;
/* 绝对定位 */
position: absolute;
left: 10px;
display: flex;
justify-content: space-between;;
align-items: center;
}
.right-function {
width: 130px;
position: absolute;
right: 10px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
width: 34px;
height: 34px;
border-radius: 50%;
overflow: hidden;
}
.right-function a {
color: white;
text-decoration: none;
}
1.3 主页和正文页面 公用的个人信息 - common.css
.主体 {
height: 100%;
width: 1000px;
margin: 5px auto;
display: flex;
justify-content: space-between;
}
.个人中心 {
width: 190px;
height: 300px;
padding: 15px;
background: rgba(255,255,255,0.6);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.等级信息 {
width: 80px;
text-align: center;
display: flex;
align-items: center;
justify-content: space-between;
}
.头像 {
width: 110px;
height: 110px;
border-radius: 50%;
overflow: hidden;
}1.4 论坛列表页 - list.css
.板块列表{
height: 100%;
min-height: 500px;
overflow: hidden;
width: calc(100% - 190px - 5px);
padding: 15px;
background: rgba(255,255,255,0.6);
}
ol {
list-style: none;
}
.板块信息 {
margin: 5px auto;
padding: 10px;
min-height: 200px;
background: rgba(255,255,255,0.7);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.板块名称 {
font-size: 18px;
text-align: center;
}
.版主 {
font-size: 10px;
text-align: right;
}
.板块说明 {
padding: 10px;
text-indent: 2em;
font-size: 13px;
}
.查看详情 {
display: block;
margin: 10px auto 0 auto;
/*border: 2px solid black;*/
align-items: center;
text-align: center;
color: black;
user-select: none;
cursor: pointer;
}
.查看详情 a {
color: black;
text-decoration: none;
font-size: 13px;
}
.点击 {
display: flex;
justify-content: right;
text-align: center;
font-size: 10px;
}
.数量 {
margin: 0px 10px 0 0;
}
实现效果：
2. 实现论坛正文页
2.1 论坛正文页 - detail.html
主贴-回帖
爱干饭的猿
男
软件开发工程师
积分
10
等级
1
-
他拾到了遗落凡间的信伐。
2022-06-05
贴主: 爱干饭的猿
在这个世界上，一个好友，可能与他作对而变成敌人;一个用慈爱所培养起来的儿女，可能变得不忠不孝;一个人所拥有的金钱可能会在最需要的时候插翅飞走。但在这个世界上，我们仍拥有一个毫不自私的，永不忘恩复义的朋友，那便是他的狗。
他由记得，当他还是个孩子的时候，在养了只小狗的同时，种了一棵樱桃树。而此时，树正长的旺盛。天上烈火在水坝中烧着，空中鸟雀在湖水中游着，光穿过樱桃树的叶片照在树上蝉鸣着，吵得狗不断翻着身着。他刚从学校回来，还没见它，便己听到它的犬吠，他走到不远处，便见到那只狗向他扑来，但是一条铁链的却限制了他的动作，只得努力的叫着。他再走近，那狗又蹦起来，前脚不注意踩到他的衣服上。他急忙躲窜，但它只当是与他之间的玩耍。他身受一脚却也不碍事，用湿布一擦即可去掉污泥。那年夏天，每次他回到老家，它都会如此迎接他。
点击次数
100
回复次数
10
-
回帖
2022-06-05
回帖: 爱干饭的猿
自你离开以后，从此就丢掉了笑颜。等待，在这春暖花开的季节，听候鸟南归，看春花烂漫。路漫长，却依然望不到心中那抹湛蓝。一望无垠的天际，呈现灰蒙蒙一片，荒凉了心里所有的期许和祈盼!
点击次数
100
-
回帖
2022-06-05
回帖: 爱干饭的猿
人的一生里会遇到的痛苦太多了。而支撑着我们走下去的，大概就是，平凡生活里的一点点琐碎而渺小的快乐。
点击次数
100
-
回帖
2022-06-05
回帖: 爱干饭的猿
遗憾千万种，各人皆不同 。伤口不管有多重，总有痊愈的一天。但遗憾不一样，它会跟随你直到生命终结。
点击次数
100
回帖
2.2 论坛正文页 - detail.css
.板块列表{
height: 100%;
overflow: hidden;
width: calc(100% - 190px - 5px);
padding: 15px;
background: rgba(255,255,255,0.6);
}
ol {
list-style: none;
}
.板块信息 {
margin: 5px auto;
padding: 10px;
background: rgba(255,255,255,0.7);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.板块名称 {
font-size: 18px;
text-align: left;
}
.主贴时间 {
font-size: 10px;
text-align: right;
}
.版主 {
font-size: 10px;
text-align: right;
}
.板块说明 {
padding: 5px;
text-indent: 2em;
font-size: 13px;
}
.点击 {
display: flex;
justify-content: right;
text-align: center;
font-size: 10px;
}
.数量 {
margin: 0px 10px 0 0;
}
#title {
height: 40px;
width: 620px;
text-indent: 10px;
border-radius: 10px;
outline: none;
border: none;
background-color:rgba(255, 255, 255, 0.8);
}
#submit {
height: 40px;
width: 80px;
color: white;
background: orange;
outline: none;
border: none;
border-radius: 10px;
}
实现效果：
3. 实现论坛登陆页
3.1 论坛登陆页 - login.html
登录
3.2 论坛登陆页 - login.css
.主体区 {
padding: 100px;
display: flex;
align-items: center;
flex-direction: column;
}
.登录框 {
width: 300px;
height: 265px;
padding-top: 50px;
padding-bottom: 50px;
border-radius: 10px;
background-color: rgba(255,255,255,0.7);
}
form {
height: 100%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-between;
}
h2 {
font-size: 20px;
}
span {
display: inline-block;
width: 90px;
text-align: left;
}
.提交 {
width: 260px;
height: 30px;
background: rgba(77,132,226);
color: white;
border: none;
}
.text {
width: 165px;
height: 25px;
padding-left: 10px;
border-radius: 5px;
border: none;
}实现效果：
4. 实现论坛注册页
4.1 论坛注册页 - logon.html
注册
4.2 论坛注册页 - logon.css
.主体区 {
padding: 30px;
display: flex;
align-items: center;
flex-direction: column;
}
.注册框 {
width: 360px;
height: 500px;
padding-top: 50px;
padding-bottom: 50px;
border-radius: 10px;
background-color: rgba(255,255,255,0.7);
}
form {
height: 100%;
display: flex;
align-items: center;
flex-direction: column;
justify-content: space-between;
}
h2 {
font-size: 20px;
}
span {
display: inline-block;
width: 120px;
text-align: left;
}
.sex {
width: 225px;
}
.hobby {
width: 125px;
}
.提交 {
width: 290px;
height: 30px;
background: rgba(77,132,226);
color: white;
border: none;
}
.text {
width: 165px;
height: 25px;
padding-left: 10px;
border-radius: 5px;
border: none;
}实现效果：
5. 实现帖子编辑页
5.1 帖子编辑页 - editor.html
写帖子
5.2 帖子编辑页 - editor.css
.blog-edit-container {
width: 900px;
height: calc(100% - 50px);
margin: 0 auto;
}
.title {
width: 100%;
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
}
#title {
height: 40px;
width: 800px;
text-indent: 10px;
border-radius: 10px;
outline: none;
border: none;
background-color:rgba(255, 255, 255, 0.8);
}
#submit {
height: 40px;
width: 100px;
color: white;
background: orange;
outline: none;
border: none;
border-radius: 10px;
}
#editor {
border-radius: 10px;
opacity: 80%;
}实现效果：
论坛信息管理系统的页面到这里就全部完成了，喜欢的可以点赞收藏加关注呀，后续会持续分享页面改进和与后端连接的相关操作，谢谢了！！！