MDUI
首页
注册

为什么我的网站总是上面有一段空着。

SuperKevinZhou
2022-07-18 22:08:35

如题。

代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>My MDUI Site</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
  <!-- 新 Bootstrap4 核心 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

  <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

  <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单,包含了 popper.min.js -->
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

  <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <!-- MDUI CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mdui@1.0.1/dist/css/mdui.min.css"
    integrity="sha384-cLRrMq39HOZdvE0j6yBojO4+1PrHfB7a9l5qLcmRm/fiWXYY+CndJPmyu5FV/9Tw" crossorigin="anonymous" />
  <script src="https://unpkg.com/mdui@1.0.2/dist/js/mdui.min.js"></script>

</head>

<body class="mdui-appbar-with-toolbar mdui-theme-layout-dark mdui-theme-layout-auto">
  <script>mdui.mutation();</script>
  <div class="mdui-appbar mdui-appbar-scroll-hide">
    <div class="mdui-tab mdui-color-theme mdui-color-indigo" mdui-tab>
      <a href="#example3-tab1" class="mdui-ripple mdui-ripple-white">首页</a>
      <a href="#example3-tab2" class="mdui-ripple mdui-ripple-white">博客</a>
      <a href="#example3-tab3" class="mdui-ripple mdui-ripple-white">推荐</a>
    </div>
  </div>
  <!-- 首页 -->
  <div id="example3-tab1">
    <div class="mdui-typo">
      <h3><b>我的博客</b></h3>
      <p class="mdui-text-color-purple-accent">书籍是人类进步的楼梯,<br />网络是人类进步的电梯。</p>
      <hr />
      <h3><b>博客推荐</b></h3><!-- 卡片-菜鸟教程推荐-->

      <div class="mdui-card-media-covered">
        <div class="mdui-card-primary">
          <div class="mdui-card-primary-title">菜鸟教程</div>
          <div class="mdui-card-primary-subtitle">推荐</div>
          <div class="mdui-card-actions">
            <a href="pages/blogs/runoob.html">点击跳转
            </a>
          </div>
        </div>
      </div>
      <!--结束1-->
    </div>
  </div>
  <!--博客-->
  <div id="example3-tab2">
    <div class="mdui-typo mdui-center">
      <h3><b>诶呀呀,这个页面还在施工 :(</b></h3>
    </div>
  </div>
  <!--推荐-->
  <div id="example3-tab3">
    <div class="mdui-typo">
      <h3><b>推荐</b></h3>
      <p><a href="https://www.runoob.com/">菜鸟教程——学的不仅是技术,更是梦想!</a><br />
        <a href="https://visualgo.net/zh">数据结构和算法动态可视化 (Chinese)</a><br />
        <a href="https://www.mdui.org/">Material Design User Interface中文版(MDUI)</a><br />
      </p>
    </div>
  </div>

</body>

</html>