个人博客类网页模板，有登陆页，有Vue+elementui版本，期末节大课作业，手机电脑自适应

最新推荐文章于 2026-05-29 08:01:21 发布
原创 最新推荐文章于 2026-05-29 08:01:21 发布 · 1k 阅读 · 6 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

index.html
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; 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="icon" href="http://192.168.0.112:8080/favicon.ico">
  <title>vueblog-vue</title>
  <link rel="stylesheet" href="./assets/element.css">
  <style scoped>
    .mpage {
      margin: 0 auto;
      text-align: center;
    }
  </style>
</head>

<body>
  <div id="app">
    <div class="mcontaner">
      <div class="m-content">
        <h3>欢迎来到我的博客</h3>
        <div class="block"><span class="el-avatar el-avatar--circle"
            style="height: 50px; width: 50px; line-height: 50px;"><img
              src="./assets/3ea6beec64369c2642b92c6726f1epng.png" style="object-fit: cover;"></span>
          <div>请先登录</div>
        </div>
        <div class="maction"><span><a href="./index.html" class="el-link el-link--default is-underline">
              <!----><span class="el-link--inner">主页</span>
              <!---->
            </a></span>
          <div class="el-divider el-divider--vertical">
            <!---->
          </div><span><a href="./add.html" class="el-link el-link--success is-underline">
              <!----><span class="el-link--inner">发表博客</span>
              <!---->
            </a></span>
          <div class="el-divider el-divider--vertical">
            <!---->
          </div><span><a href="./login.html" class="el-link el-link--primary is-underline">
              <!----><span class="el-link--inner">登录</span>
              <!---->
            </a></span><span style="display: none;"><a class="el-link el-link--danger is-underline">
              <!----><span class="el-link--inner">退出</span>
              <!---->
            </a></span>
        </div>
      </div>
      <div class="block">
        <ul class="el-timeline">
          <li class="el-timeline-item">
            <div class="el-timeline-item__tail"></div>
            <div class="el-timeline-item__node el-timeline-item__node--normal el-timeline-item__node--">
              <!---->
            </div>
            <!---->
            <div class="el-timeline-item__wrapper">
              <div class="el-timeline-item__timestamp is-top">

              </div>
              <div class="el-timeline-item__content">
                <div class="el-card is-always-shadow">
                  <!---->
                  <div class="el-card__body">
                    <h4><a href="./detail.html" class="router-link-active"> 900余件故宫文物在港展出 </a></h4>
                    <p> 微信公众号“微故宫”7月3日消息，香港回归祖国25周年之际，筹备多年的香港故宫文化博物馆在今天正式对公众开放！ </p>
                  </div>
                </div>
              </div>
              <!---->
            </div>
          </li>

        </ul>
        <div class="mpage el-pagination is-background"><button type="button" disabled="disabled" class="btn-prev"><i
              class="el-icon el-icon-arrow-left"></i></button>
          <ul class="el-pager">
            <li class="number active">1</li>
            <!---->
            <!---->
            <!---->
          </ul><button type="button" disabled="disabled" class="btn-next"><i
              class="el-icon el-icon-arrow-right"></i></button>
        </div>
      </div>
    </div>
  </div>
  <!-- built files will be auto injected -->

</body>

</html>

login.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">
    <link rel="icon" href="/favicon.ico">
    <title>vueblog-vue</title>
    <link rel="stylesheet" href="./assets/element.css">
  </head>
  <style>
    .el-header,
    .el-footer {
      background-color: #b3c0d1;
      color: #333;
      text-align: center;
      line-height: 60px;
    }

    .el-aside {
      background-color: #d3dce6;
      color: #333;
      text-align: center;
      line-height: 200px;
    }

    .el-main {
      /*background-color: #E9EEF3;*/
      color: #333;
      text-align: center;
      line-height: 160px;
    }

    body>.el-container {
      margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
      line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
      line-height: 320px;
    }

    .mlogo {
      height: 60%;
      margin-top: 10px;
    }

    .demo-ruleForm {
      max-width: 500px;
      margin: 0 auto;
    }
  </style>

  <body>
    <noscript>

    </noscript>
    <div id="app">
      <div data-v-26084dc2="">
        <section data-v-26084dc2="" class="el-container is-vertical">
          <header data-v-26084dc2="" class="el-header" style="height: 60px;"><img data-v-26084dc2=""
              src="https://ddrk.me/wp-content/uploads/2019/01/android-chrome-512x512-150x150.png" alt="" class="mlogo">
          </header>
          <main data-v-26084dc2="" class="el-main">
            <form data-v-26084dc2="" class="el-form demo-ruleForm">
              <div data-v-26084dc2="" class="el-form-item is-required"><label for="username" class="el-form-item__label"
                  style="width: 100px;">用户名</label>
                <div class="el-form-item__content" style="margin-left: 100px;">
                  <div data-v-26084dc2="" class="el-input">
                    <!----><input type="text" autocomplete="off" class="el-input__inner">
                    <!---->
                    <!---->
                    <!---->
                    <!---->
                  </div>
                  <!---->
                </div>
              </div>
              <div data-v-26084dc2="" class="el-form-item is-required"><label for="password" class="el-form-item__label"
                  style="width: 100px;">密码</label>
                <div class="el-form-item__content" style="margin-left: 100px;">
                  <div data-v-26084dc2="" class="el-input">
                    <!----><input type="password" autocomplete="off" class="el-input__inner">
                    <!---->
                    <!---->
                    <!---->
                    <!---->
                  </div>
                  <!---->
                </div>
              </div>
              <div data-v-26084dc2="" class="el-form-item">
                <!---->
                <div class="el-form-item__content" style="margin-left: 100px;"><button data-v-26084dc2="" type="button"
                    class="el-button el-button--primary">
                    <!---->
                    <!----><span>立即创建</span>
                  </button><button data-v-26084dc2="" type="button" class="el-button el-button--default">
                    <!---->
                    <!----><span>重置</span>
                  </button>
                  <!---->
                </div>
              </div>
            </form>
          </main>
        </section>
      </div>
    </div>

  </body>

  </html>

detail.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">
    <link rel="icon" href="/favicon.ico">
    <title>vueblog-vue</title>
    <link rel="stylesheet" href="./assets/element.css">
  </head>
  <style>
    .mblog {
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      width: 100%;
      min-height: 700px;
      padding: 20px 15px;
    }

    .m-content {
      max-width: 960px;
      margin: 0 auto;
      text-align: center;
    }

    .maction {
      margin: 10px 0;
    }
  </style>

  <body>
    <noscript>
      <strong>We're sorry but vueblog-vue doesn't work properly without JavaScript enabled. Please enable it to
        continue.</strong>
    </noscript>
    <div id="app">
      <div>
        <div data-v-61dd7a3d="" class="m-content">
          <h3 data-v-61dd7a3d="">欢迎来到我的博客</h3>
          <div data-v-61dd7a3d="" class="block"><span data-v-61dd7a3d="" class="el-avatar el-avatar--circle"
              style="height: 50px; width: 50px; line-height: 50px;"><img
                src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
                style="object-fit: cover;"></span>
            <div data-v-61dd7a3d="">请先登录</div>
          </div>
          <div data-v-61dd7a3d="" class="maction"><span data-v-61dd7a3d=""><a data-v-61dd7a3d="" href="./index.html"
                class="el-link el-link--default is-underline">
                <!----><span class="el-link--inner">主页</span>
                <!---->
              </a></span>
            <div data-v-61dd7a3d="" class="el-divider el-divider--vertical">
              <!---->
            </div><span data-v-61dd7a3d=""><a data-v-61dd7a3d="" href="./add.html"
                class="el-link el-link--success is-underline">
                <!----><span class="el-link--inner">发表博客</span>
                <!---->
              </a></span>
            <div data-v-61dd7a3d="" class="el-divider el-divider--vertical">
              <!---->
            </div><span data-v-61dd7a3d=""><a data-v-61dd7a3d="" href="./login.html"
                class="el-link el-link--primary is-underline">
                <!----><span class="el-link--inner">登录</span>
                <!---->
              </a></span><span data-v-61dd7a3d="" style="display: none;"><a data-v-61dd7a3d=""
                class="el-link el-link--danger is-underline">
                <!----><span class="el-link--inner">退出</span>
                <!---->
              </a></span>
          </div>
        </div>
        <div class="mblog">
          <h2></h2>
          <!---->
          <div class="el-divider el-divider--horizontal">
            <!---->
          </div>
          <div class="markdown-body"> 微信公众号“微故宫”7月3日消息，香港回归祖国25周年之际，筹备多年的香港故宫文化博物馆在今天正式对公众开放！
            香港故宫文化博物馆是西九文化区管理局与故宫博物院的合作项目，以推动中国文化艺术的研究和欣赏，并促进不同文明之间的对话为宗旨。香港故宫文化博物馆的建成，让香港市民能够零距离欣赏珍贵文物，体悟中华优秀传统文化的厚重底蕴，增强香港繁荣昌盛的文化自信。
            观众参观香港故宫文化博物馆 香港故宫文化博物馆/摄影师：刘庭玉 观众参观香港故宫文化博物馆 图片来源：央视新闻客户端
            香港故宫文化博物馆将展出900余件故宫文物，绝大部分为首次在港展出；开设9大展览，从香港角度演绎故宫文化；开放全新展馆，打造香港新地标。 让我们展开来，仔细看！ </div>
        </div>
      </div>
    </div>
    <!-- built files will be auto injected -->

  </body>

  </html>

add.html
在这里插入图片描述


  <!DOCTYPE html>
  <html lang="en">

  <head>
    <meta http-equiv="Content-Type" content="text/html; 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="icon" href="http://192.168.0.112:8080/favicon.ico">
    <title>vueblog-vue</title>
    <link rel="stylesheet" href="./assets/element.css">
    <link rel="stylesheet" href="./assets/github-markdown.min.css">

  </head>
  <style>
    .m-content {
      text-align: center;
    }
  </style>

  <body>
    <noscript>
      <strong>We're sorry but vueblog-vue doesn't work properly without JavaScript enabled. Please enable it to
        continue.</strong>
    </noscript>
    <div id="app">
      <div>
        <div class="m-content">
          <h3>欢迎来到我的博客</h3>
          <div class="block"><span class="el-avatar el-avatar--circle"
              style="height: 50px; width: 50px; line-height: 50px;"><img
                src="./assets/3ea6beec64369c2642b92c6726f1epng.png" style="object-fit: cover;"></span>
            <div>请先登录</div>
          </div>
          <div class="maction"><span><a href="./index.html" class="el-link el-link--default is-underline">
                <!----><span class="el-link--inner">主页</span>
                <!---->
              </a></span>
            <div class="el-divider el-divider--vertical">
              <!---->
            </div><span><a href="./add.html" class="el-link el-link--success is-underline">
                <!----><span class="el-link--inner">发表博客</span>
                <!---->
              </a></span>
            <div class="el-divider el-divider--vertical">
              <!---->
            </div><span><a href="./login.html" class="el-link el-link--primary is-underline">
                <!----><span class="el-link--inner">登录</span>
                <!---->
              </a></span><span style="display: none;"><a class="el-link el-link--danger is-underline">
                <!----><span class="el-link--inner">退出</span>
                <!---->
              </a></span>
          </div>
        </div>
        <div class="m-content">
          <form class="el-form demo-ruleForm">
            <div class="el-form-item is-required"><label for="title" class="el-form-item__label"
                style="width: 100px;">标题</label>
              <div class="el-form-item__content" style="margin-left: 100px;">
                <div class="el-input">
                  <!----><input type="text" autocomplete="off" class="el-input__inner">
                  <!---->
                  <!---->
                  <!---->
                  <!---->
                </div>
                <!---->
              </div>
            </div>
            <div class="el-form-item is-required"><label for="description" class="el-form-item__label"
                style="width: 100px;">摘要</label>
              <div class="el-form-item__content" style="margin-left: 100px;">
                <div class="el-textarea"><textarea autocomplete="off" class="el-textarea__inner"
                    style="min-height: 33px;"></textarea>
                  <!---->
                </div>
                <!---->
              </div>
            </div>
            <div class="el-form-item"><label for="content" class="el-form-item__label" style="width: 100px;">内容</label>
              <div class="el-form-item__content" style="margin-left: 100px;">
                <div class="el-textarea"><textarea autocomplete="off" class="el-textarea__inner"
                    style="min-height:300px;"></textarea>
                  <!---->
                </div>
              </div>
            </div>
            <div class="el-form-item">
              <!---->
              <div class="el-form-item__content" style="margin-left: 100px;"><button type="button"
                  class="el-button el-button--primary">
                  <!---->
                  <!----><span>立即创建</span>
                </button><button type="button" class="el-button el-button--default">
                  <!---->
                  <!----><span>重置</span>
                </button>
                <!---->
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <!-- built files will be auto injected -->
    <div>
      <!---->
    </div>

  </body>

  </html>
标签
#vue.js #elementui #javascript
VUE3-博客全栈 06-前端
m0_59214979的博客
09-09 760
文章的列表，添加文字，修改文章，删除文章
HTML+CSS+Vue3的静态网页，免费开源，可当作作业使用
m0_61279136的博客
12-14 2445
HTML+CSS+Vue3的静态网页，免费开源，可当作作业使用。
vue+element详细完整实现个人博客、个人网站
lucky_fang的博客
01-16 1万+
接上一篇《vue+elementui实现非常好看的博客、网站首页，网站模板》。 上一篇实现了整个框架的搭建和首页的编码，在此基础上，这一期进行了最终的功能页面完善，增加了功能：同时对样式进行了更深层的改造和优化。 文章详情： 心情说说+我的相册+相册详情 所有文章+标签合集 四.数据处理 主要数据就是文章+相册，分别声明为json数据格式，存储于页面缓存，因为app.vue是一定会加载的，所以作者把这些初始化数据和存储操作都放在了app.vue，利于其他页面获取缓存加载
VUE+element-ui开发出的美观好看的登录/注册模板组件 集成方便
07-01
VUE+element-ui开发出的美观好看的登录/注册模板组件 集成方便,本人耗时好几周才完成的, 头发掉了不少, 4.9买不了吃亏买不了上当.请我加个鸡腿吧. 效果图博客地址: https://yinyue.blog.csdn.net/article/details/118379258
vLLM-ascend框架深度解析：GLM-5量化模型推理优化技巧
最新发布
gitblog_00083的博客
05-29 484
vLLM-ascend框架是专为昇腾NPU优化的高性能大语言模型推理框架，而GLM-5-w4a8-mtp-QuaRot则是基于此框架的量化模型版本。本文将深入解析vLLM-ascend框架的核心特性，并分享GLM-5量化模型推理优化的实用技巧，帮助开发者充分发挥昇腾硬件的性能优势。🚀 ## 📊 什么是vLLM-ascend框架？ vLLM-ascend是基于昇腾NPU优化的vLLM推理框架
分享56个Vue模板源码总有一个是你想要的
zy0412326的专栏
08-14 6794
基于 Vue3、Vite2、Element-Plus、Vue-i18n、Vue-router4 x、Vuex4 x、Echarts5等最新技术开发的中后台管理模板,完整版本 vue3-admin-element 正在开发完善中。整合所有的前端项目案例模板，包括前端炫酷特效页面、海量博客模板、大数据可视化页面、各种导航页面、vue项目模板，React项目模板，UI设计交互，产品研发等。vue +vue-cli3+vuex+vue-router+vant 快速开发 h5模板。
Vue主界面精美模板分享
罗铠威的博客
05-31 5527
本篇博客主要提供vue组件之主页面组件源码，需要的朋友请自取 这里是网址图像联网会显示，圆角头像（可以自己更换） 这里点击按钮事件自己添加
VUE好看的个人博客源码
不踩坑，不知道坑有多深；不总结，踩过的坑白踩。
01-15 4867
VUE好看的个人博客源码，博客网站源码，博客整体页面整洁，内容清晰，赏心悦目，实现了博客首页，我的日记，我的文章，我的相册，我的源码，认识我等模块，可以在这个模板下借用相关代码，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
VUE博客模板----FXBLOG
weixin_46105091的博客
05-08 2349
前言 之前看到大佬写的Gblog博客模板,有感而发,刚好自己的简历上缺一个项目,所以撸了一个出来 前端用的vue(鬼知道我一个写后端的是咋写出来的),后台用的springboot,美观层面上不错,基础的登录和权限认证也写了,token验证和数据加密也有,就差个前端的后台管理 如果觉得还不错的话,给个star吧 预览地址 仓库地址 https://www.zhuiyifanxing.top/ https://github.com/zyfx-wzk/FXBLOG-Spring https:/.
分享52个vue模板，总有一款适合您
KlDMEO的博客
08-17 2015
前端开发模板整理，主要分前后台，前台在 vue-nuxt-vuetify-template 分支，后。基于axios，bootstrap，vue-router，webpack和express等等的基础v。一个类似vue-cli的脚手架,用于学习脚手架开发理念：下载模板,通过命令行交互, 处理下载的模板,后台管理系统提供了一个基于最新的技术栈（Vue 3、Vite、Ant Design Vue 3、vue cli 3 0 后台管理系统模板(vuex,vue-router,element-ui)
Vue二次元个人博客模板
个人博客：www.chaichaisocute.top
10-11 1985
vue二次元个人博客模板
vue商城类源码分享，前端期末作业，详情页，轮播图，购物车功能
ejunda的博客
06-30 8530
vue商城类源码分享，前端期末作业，详情页，轮播图，购物车功能
收集22种开源Vue模板和主题框架「干货」
weixin_52546522的博客
03-19 3353
在Internet上搜索模板和主题时，很难找到免费的Vue资源。 即使您不在乎质量，它们似乎也很难被发现，并出于好奇而感动，我花了数小时在Google和Github上四处挖掘，结果得到了收集22种开源Vue模板和主题框架集合。我不会对此打赌，但是它们也是高质量的资源。 Bootstrap Vue 现场演示： https://bootstrap-vue.org/ github**：**https://github.com/bootstrap-vue/bootstrap-vue BootstrapVue&nb
vue+elementui实现非常好看的博客、网站首页，网站模板
热门推荐
lucky_fang的博客
12-19 1万+
vue+elementui实现非常好看的博客、网站首页，网站模板
vue博客模板—Gblog
IT子也
05-31 7908
Gblog 引言：前段时间发布一个Fblog的基于vue3.x+element-ui的模板，反响还可以发现有一些朋友喜欢。今天强烈推荐第二个模板Gblog。 这两个博客模板的预览和仓库地址 模板 Fblog Gblog 预览地址 http://www.fengziy.cn/Fblog/ http://static.fengziy.cn/Gblog/ 仓库地址 https://gitee.com/fengziy/Fblog https://gitee.com/fengziy/Gblog
vue模板
ingenuou_的博客
08-30 1159
vue模板
推荐6个实用的Vue模板
m0_45407251的博客
07-27 1万+
推荐6个实用的Vue模板
推荐5款免费、开箱即用的Vue后台管理系统模板
专注于C#/.NET/.NET Core学习、工作、面试干货和实战教程分享。这里聚焦了大量的C#/.NET/.NET Core优质文章、开源项目、实用工具和学习、工作、面试心得。
08-23 2484
在现今的软件开发领域，Vue凭借其高效、灵活和易于上手的特性，成为了前端开发的热门选择。对于需要快速搭建企业级后台管理系统的开发者而言，使用现成的Vue后台管理系统模板无疑是一个明智之举。本文大姚将为你推荐5款开源、免费、开箱即用的Vue后台管理系统模板，帮助你快速启动项目，专注于业务逻辑的开发。
vue模板网站
weixin_46806380的博客
01-26 8396
vue模板网站
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

未脱发程序员

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值