为什么我的网站总是上面有一段空着。
如题。
代码
<!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>
