【前端项目】 - 论坛信息管理系统(纯页面)

简介: 实现一个简单的论坛信息管理系统.当前先完成页面设计的部分. 通过前端知识来构建出网页.

🤞目录🤞

💖预览效果

💖0. 文件夹列表说明

💖1. 实现论坛列表页

1.1 论坛列表页 - list.html

1.2 导航栏公用的css - naviddation bar.css

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. 论坛列表页

    image.gif编辑

    2. 论坛正文页

    image.gif编辑

    3. 论坛登陆页

    image.gif编辑

    4. 论坛注册页

    image.gif编辑

    5. 帖子编辑页

    image.gif编辑


    🚀0. 文件夹列表说明

    🛸1. 先看一下相应代码文件夹列表位置

    image.gif编辑

      • 论坛列表页 - list.html
      • 论坛正文页 - detail.html
      • 论坛登陆页 - login.html
      • 论坛注册页 - logon.html
      • 帖子编辑页 - editor.html

      🛸2. 其中css文件夹中有

      image.gif编辑

      detail.css                 - 论坛正文页

      editor.css                 - 帖子编辑页

      list.css                     - 论坛列表页

      login.css                  - 论坛登陆页

      logon.css                 - 论坛注册页

      naviddation bar.css - 导航栏公用的css

      common.css            - 主页和正文页面 公用的个人信息

      🛸3. 其中img文件中存放的是页面所需要的图片

      image.gif编辑

      可以自行导入

      🛸4. 其中editor文件夹中存放的是 Markdown 编辑器

      editor.md 是一个开源的页面 markdown 编辑器组件

      image.gif编辑

      在实现帖子编辑页时需要用到

      下载网址:markdown 编辑器


      🚀1. 实现论坛列表页

      🛸1.1 论坛列表页 - list.html

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>论坛主页</title>
          <link rel="stylesheet" href="css/navigation bar.css">
          <link rel="stylesheet" href="css/common.css">
          <link rel="stylesheet" href="css/list.css">
      </head>
      <body>
          <div class="导航栏">
              <div class="left-logo">
                  <div class="logo"><img src="img/系统图标.png" width="45"></div>
                  <p>论坛管理信息系统</p>
              </div>
              <div class="占位"></div>
              <div class="right-function">
                  <a href="list.html">主页</a>
                  <a href="editor.html" target="_blank">写帖子</a>
                  <a href="login.html" target="_blank">注销</a>
              </div>
          </div>
          <div class="主体">
              <div class="个人中心">
                  <div class="头像">
                      <img src="img/头像.png" alt="" width="120">
                  </div>
                  <p>爱干饭的猿</p>
                  <div>男</div>
                  <div>软件开发工程师</div>
                  <div class="等级信息">
                      <div>
                          <div>积分</div>
                          <div>10</div>
                      </div>
                      <div>
                          <div>等级</div>
                          <div>1</div>
                      </div>
                  </div>
              </div>
              <div class="板块列表">
                  <ol>
                      <li>
                          <div class="板块信息">
                              <h3 class="板块名称">他拾到了遗落凡间的信伐。</h3>
                              <div class="版主">版主: <span class="版主名称">爱干饭的猿</span></div>
                              <p class="板块说明">他由记得,当他还是个孩子的时候,在养了只小狗的同时,种了一棵樱桃树。而此时,树正长的旺盛。天上烈火在水坝中烧着,空中鸟雀在湖水中游着,光穿过樱桃树的叶片照在树上蝉鸣着,吵得狗不断翻着身着。他刚从学校回来,还没见它,便己听到它的犬吠,他走到不远处,便见到那只狗向他扑来,但是一条铁链的却限制了他的动作,只得努力的叫着。他再走近,那狗又蹦起来,前脚不注意踩到他的衣服上。他急忙躲窜,但它只当是与他之间的玩耍。他身受一脚却也不碍事,用湿布一擦即可去掉污泥。那年夏天,每次他回到老家,它都会如此迎接他。</p>
                              <div class="查看详情">
                                  <a href="detail.html" target="_blank">查看详情>></a>
                              </div>
                              <div class="点击">
                                  <div class="数量">
                                      <div>点击次数</div>
                                      <div>100</div>
                                  </div>
                                  <div>
                                      <div>主题数</div>
                                      <div>10</div>
                                  </div>
                              </div>
                          </div>
                      </li>
                      <li>
                          <div class="板块信息">
                              <h3 class="板块名称">莫不是斜日青天, 那见得灯火阑珊?</h3>
                              <div class="版主">版主: <span class="版主名称">爱干饭的猿</span></div>
                              <p class="板块说明">其实这世上事都是慢慢积累起来的,没有什么是突然的,没有什么突然。我明白自己的坚持总不会有错,点点生活都被点点时光刻录下来,你不知道它的光辉,是因为它在一点一点地积累能量。终有一天,点点的积累会回以最暖心的光芒。站在时光的顶端,闭眼轻轻仰起头来,膜拜一段往事,或许已经逾越了千年。</p>
                              <div class="查看详情">
                                  <a href="">查看详情>></a>
                              </div>
                              <div class="点击">
                                  <div class="数量">
                                      <div>点击次数</div>
                                      <div>100</div>
                                  </div>
                                  <div>
                                      <div>主题数</div>
                                      <div>10</div>
                                  </div>
                              </div>
                          </div>
                      </li>
                      <li>
                          <div class="板块信息">
                              <h3 class="板块名称">生活不是等待风暴过去,而是学会在雨中翩翩起舞。</h3>
                              <div class="版主">版主: <span class="版主名称">爱干饭的猿</span></div>
                              <p class="板块说明">站在流年的渡口,徘徊张望,叹息溅落如冬日的寒冰,划伤了一颗憔悴的心。再回首,岁月的离歌余音绕梁,惹人伤怀。再回首,生命的千般流转,淡泊了一颗心。当世界给草籽重压时,它总会用自己的方法破土而出。世上一开始没有路,走多了便成了路。青春的字典无“困难”之字,青春的开头无“障碍”之语。相信自己我能行。认我们有有限的青春去做无限的奋斗吧!这个充满生机的世界呢?不要放弃,坚持到底,战胜使你头疼的恶魔,你就战胜了你自己,你就会获得成功。没有一种不通过蔑视忍受和奋斗就可以征服的命运。这清韵流转蕴涵的深意,穿过幽幽深深的曲径,缓缓的抵达心灵的深处,此刻一曲莫道不消魂,暗自凝噎。
                                  生活不是等待风暴过去,而是学会在雨中翩翩起舞。</p>
                              <div class="查看详情">
                                  <a href="">查看详情>></a>
                              </div>
                              <div class="点击">
                                  <div class="数量">
                                      <div>点击次数</div>
                                      <div>100</div>
                                  </div>
                                  <div>
                                      <div>主题数</div>
                                      <div>10</div>
                                  </div>
                              </div>
                          </div>
                      </li>
                  </ol>
              </div>
          </div>
      </body>
      </html>

      image.gif

      🛸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;
      }

      image.gif

      🛸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;
      }

      image.gif

      🛸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;
      }

      image.gif

      实现效果:

      image.gif编辑


      🚀2. 实现论坛正文页

      🛸2.1 论坛正文页 - detail.html

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>主贴-回帖</title>
          <link rel="stylesheet" href="css/navigation bar.css">
          <link rel="stylesheet" href="css/common.css">
          <link rel="stylesheet" href="css/detail.css">
      </head>
      <body>
      <div class="导航栏">
          <div class="left-logo">
              <div class="logo"><img src="img/系统图标.png" width="45"></div>
              <p>论坛管理信息系统</p>
          </div>
          <div class="占位"></div>
          <div class="right-function">
              <a href="list.html">主页</a>
              <a href="editor.html" target="_blank">写帖子</a>
              <a href="login.html" target="_blank">注销</a>
          </div>
      </div>
      <div class="主体">
          <div class="个人中心">
              <div class="头像">
                  <img src="img/头像.png" alt="" width="120">
              </div>
              <p>爱干饭的猿</p>
              <div>男</div>
              <div>软件开发工程师</div>
              <div class="等级信息">
                  <div>
                      <div>积分</div>
                      <div>10</div>
                  </div>
                  <div>
                      <div>等级</div>
                      <div>1</div>
                  </div>
              </div>
          </div>
          <div class="板块列表">
              <ol>
                  <li>
                      <div class="板块信息">
                          <h3 class="板块名称">他拾到了遗落凡间的信伐。</h3>
                          <p class="主贴时间">2022-06-05</p>
                          <div class="版主">贴主: <span class="版主名称">爱干饭的猿</span></div>
                          <p class="板块说明">
                              在这个世界上,一个好友,可能与他作对而变成敌人;一个用慈爱所培养起来的儿女,可能变得不忠不孝;一个人所拥有的金钱可能会在最需要的时候插翅飞走。但在这个世界上,我们仍拥有一个毫不自私的,永不忘恩复义的朋友,那便是他的狗。
                          </p>
                          <p class="板块说明">    他由记得,当他还是个孩子的时候,在养了只小狗的同时,种了一棵樱桃树。而此时,树正长的旺盛。天上烈火在水坝中烧着,空中鸟雀在湖水中游着,光穿过樱桃树的叶片照在树上蝉鸣着,吵得狗不断翻着身着。他刚从学校回来,还没见它,便己听到它的犬吠,他走到不远处,便见到那只狗向他扑来,但是一条铁链的却限制了他的动作,只得努力的叫着。他再走近,那狗又蹦起来,前脚不注意踩到他的衣服上。他急忙躲窜,但它只当是与他之间的玩耍。他身受一脚却也不碍事,用湿布一擦即可去掉污泥。那年夏天,每次他回到老家,它都会如此迎接他。
                          </p>
                          <div class="点击">
                              <div class="数量">
                                  <div>点击次数</div>
                                  <div>100</div>
                              </div>
                              <div>
                                  <div>回复次数</div>
                                  <div>10</div>
                              </div>
                          </div>
                      </div>
                  </li>
                  <li>
                      <div class="板块信息">
                          <h3 class="板块名称">回帖</h3>
                          <p class="主贴时间">2022-06-05</p>
                          <div class="版主">回帖: <span class="版主名称">爱干饭的猿</span></div>
                          <p class="板块说明">自你离开以后,从此就丢掉了笑颜。等待,在这春暖花开的季节,听候鸟南归,看春花烂漫。路漫长,却依然望不到心中那抹湛蓝。一望无垠的天际,呈现灰蒙蒙一片,荒凉了心里所有的期许和祈盼!</p>
                          <div class="点击">
                              <div class="数量">
                                  <div>点击次数</div>
                                  <div>100</div>
                              </div>
                          </div>
                      </div>
                  </li>
                  <li>
                      <div class="板块信息">
                          <h3 class="板块名称">回帖</h3>
                          <p class="主贴时间">2022-06-05</p>
                          <div class="版主">回帖: <span class="版主名称">爱干饭的猿</span></div>
                          <p class="板块说明">人的一生里会遇到的痛苦太多了。而支撑着我们走下去的,大概就是,平凡生活里的一点点琐碎而渺小的快乐。</p>
                          <div class="点击">
                              <div class="数量">
                                  <div>点击次数</div>
                                  <div>100</div>
                              </div>
                          </div>
                      </div>
                  </li>
                  <li>
                      <div class="板块信息">
                          <h3 class="板块名称">回帖</h3>
                          <p class="主贴时间">2022-06-05</p>
                          <div class="版主">回帖: <span class="版主名称">爱干饭的猿</span></div>
                          <p class="板块说明">遗憾千万种,各人皆不同 。伤口不管有多重,总有痊愈的一天。但遗憾不一样,它会跟随你直到生命终结。</p>
                          <div class="点击">
                              <div class="数量">
                                  <div>点击次数</div>
                                  <div>100</div>
                              </div>
                          </div>
                      </div>
                  </li>
              </ol>
              <p></p>
              <div>
                  回帖
                  <input type="text" placeholder="在这里写回帖" id="title">
                  <button id="submit">发布回帖</button>
              </div>
          </div>
      </div>
      </body>
      </html>

      image.gif

      🛸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;
      }

      image.gif

      实现效果:

      image.gif编辑


      🚀3. 实现论坛登陆页

      🛸3.1 论坛登陆页 - login.html

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>登录</title>
          <link rel="stylesheet" href="css/navigation bar.css">
          <link rel="stylesheet" href="css/login.css">
      </head>
      <body>
          <div class="导航栏">
              <div class="left-logo">
                  <div class="logo"><img src="img/系统图标.png" width="45"></div>
                  <p>论坛管理信息系统</p>
              </div>
              <div class="占位"></div>
              <div class="right-function">
                  <a href="list.html">主页</a>
                  <a href="editor.html" target="_blank">写帖子</a>
                  <a href="logon.html">注册</a>
              </div>
          </div>
          <div class="主体区">
              <div class="登录框">
                  <form action="">
                      <h2>登录</h2>
                      <div>
                          <span>用户名</span>
                          <input type="text" class="text" placeholder="请输入用户名">
                      </div>
                      <div>
                          <span>密码</span>
                          <input type="password" class="text" placeholder="请输入密码">
                      </div>
                      <div>
                          <input type="button" class="提交" value="登录">
                      </div>
                  </form>
              </div>
          </div>
      </body>
      </html>

      image.gif

      🛸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;
      }

      image.gif

      实现效果:

      image.gif编辑


      🚀4. 实现论坛注册页

      🛸4.1 论坛注册页 - logon.html

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>注册</title>
          <link rel="stylesheet" href="css/navigation bar.css">
          <link rel="stylesheet" href="css/logon.css">
      </head>
      <body>
          <div class="导航栏">
              <div class="left-logo">
                  <div class="logo"><img src="img/系统图标.png" width="45"></div>
                  <p>论坛管理信息系统</p>
              </div>
              <div class="占位"></div>
              <div class="right-function">
                  <a href="list.html">主页</a>
                  <a href="editor.html" target="_blank">写帖子</a>
                  <a href="login.html">登录</a>
              </div>
          </div>
          <div class="主体区">
              <div class="注册框">
                  <form action="">
                      <h2>注册</h2>
                      <div>
                          <span>昵称</span>
                          <input type="text" class="text" placeholder="请输入昵称">
                      </div>
                      <div>
                          <span>年龄</span>
                          <input type="text" class="text" placeholder="请输入年龄">
                      </div>
                      <div>
                          <span class="sex">性别</span>
                          <input type="radio" name="sex">男
                          <input type="radio" name="sex">女
                      </div>
                      <div>
                          <span class="hobby">爱好</span>
                          <input type="checkbox">吃饭
                          <input type="checkbox">睡觉
                          <input type="checkbox">打游戏
                      </div>
                      <div>
                          <span>职业</span>
                          <input type="text" class="text" placeholder="请输入职业">
                      </div>
                      <div>
                          <span>Email</span>
                          <input type="text" class="text" placeholder="请输入Email">
                      </div>
                      <div>
                          <span>密码</span>
                          <input type="password" class="text" placeholder="请输入密码">
                      </div>
                      <div>
                          <span>再次确认密码</span>
                          <input type="password" class="text" placeholder="请再次确认密码">
                      </div>
                      <div>
                          <input type="button" class="提交" value="注册">
                      </div>
                  </form>
              </div>
          </div>
      </body>
      </html>

      image.gif

      🛸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;
      }

      image.gif

      实现效果:

      image.gif编辑


      🚀5. 实现帖子编辑页

      🛸5.1 帖子编辑页 - editor.html

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>写帖子</title>
          <link rel="stylesheet" href="css/navigation bar.css">
          <link rel="stylesheet" href="css/editor.css">
      </head>
      <body>
          <div class="导航栏">
              <div class="left-logo">
                  <div class="logo"><img src="img/系统图标.png" width="45"></div>
                  <p>论坛管理信息系统</p>
              </div>
              <div class="占位"></div>
              <div class="right-function">
                  <a href="list.html">主页</a>
                  <a href="editor.html">写帖子</a>
                  <a href="login.html" target="_blank">注销</a>
              </div>
          </div>
          <div class="blog-edit-container">
              <div class="title">
                  <input type="text" placeholder="在这里写下主贴标题" id="title">
                  <button id="submit">发布帖子</button>
              </div>
              <div id="editor" class="编辑器"></div>
              <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>
          </div>
          <script>
              var content = '# 在这里写下一篇帖子 ##';
              var config = {
                  // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉.
                  width: "100%",
                  // 高度 100% 意思是和父元素一样高. 要在父元素的基础上去掉标题编辑区的高度
                  height: "100vh",
                  // 编辑器中的初始内容
                  markdown: content,
                  // 指定 editor.md 依赖的插件路径
                  path: "editor.md/lib/"
              };
              editormd("editor", config);
          </script>
      </body>
      </html>

      image.gif

      🛸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%;
      }

      image.gif

      实现效果:

      image.gif编辑


      论坛信息管理系统的页面到这里就全部完成了,喜欢的可以点赞收藏加关注呀,后续会持续分享页面改进和与后端连接的相关操作,谢谢了!!!🎈 🎈 🎈

      相关文章
      |
      3月前
      |
      前端开发 JavaScript 定位技术
      一、前端高德地图注册、项目中引入、渲染标记(Marker)and覆盖物(Circle)
      文章介绍了如何在前端项目中注册并使用高德地图API,包括注册高德开放平台账号、引入高德地图到项目、以及如何在地图上渲染标记(Marker)和覆盖物(Circle)。
      112 1
      |
      1月前
      |
      监控 前端开发 数据可视化
      3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
      @icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
      114 8
      3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
      |
      2月前
      |
      JavaScript 前端开发 Docker
      前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
      在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
      151 3
      前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
      |
      1月前
      |
      前端开发 测试技术
      前端工程化的分支策略要如何与项目的具体情况相结合?
      前端工程化的分支策略要紧密结合项目的实际情况,以实现高效的开发、稳定的版本控制和顺利的发布流程。
      28 1
      |
      1月前
      |
      前端开发 Unix 测试技术
      揭秘!前端大牛们如何高效管理项目,确保按时交付高质量作品!
      【10月更文挑战第30天】前端开发项目涉及从需求分析到最终交付的多个环节。本文解答了如何制定合理项目计划、提高团队协作效率、确保代码质量和应对项目风险等问题,帮助你学习前端大牛们的项目管理技巧,确保按时交付高质量的作品。
      41 2
      |
      2月前
      |
      前端开发 JavaScript 应用服务中间件
      linux安装nginx和前端部署vue项目(实际测试react项目也可以)
      本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
      791 0
      linux安装nginx和前端部署vue项目(实际测试react项目也可以)
      |
      2月前
      |
      缓存 前端开发 JavaScript
      前端架构思考:代码复用带来的隐形耦合,可能让大模型造轮子是更好的选择-从 CDN 依赖包被删导致个站打不开到数年前因11 行代码导致上千项目崩溃谈谈npm黑洞 - 统计下你的项目有多少个依赖吧!
      最近,我的个人网站因免费CDN上的Vue.js包路径变更导致无法访问,引发了我对前端依赖管理的深刻反思。文章探讨了NPM依赖陷阱、开源库所有权与维护压力、NPM生态问题,并提出减少不必要的依赖、重视模块设计等建议,以提升前端项目的稳定性和可控性。通过“left_pad”事件及个人经历,强调了依赖管理的重要性和让大模型代替人造轮子的潜在收益
      |
      2月前
      |
      前端开发 JavaScript 开发工具
      前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(三)
      前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(三)
      46 0
      |
      2月前
      |
      Web App开发 前端开发 JavaScript
      前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(二)
      前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(二)
      59 0
      |
      2月前
      |
      Web App开发 移动开发 前端开发
      前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(一)
      前端代码规范和质量是确保项目可维护性、可读性和可扩展性的关键(一)
      64 0