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

于 2022-07-04 09:42:44 发布
阅读量932 收藏 6
点赞数
文章标签： vue.js elementui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ejunda/article/details/125593873
版权

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>
未脱发程序员
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

未脱发程序员

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

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

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

打赏作者

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

抵扣说明：

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

余额充值