提交 42a3e6e5 编写于 作者: Daisyeee's avatar Daisyeee

221900135第5次提交——medal界面的调整和美化+导航栏的js

上级 b35e733d
document.writeln("<!DOCTYPE html> ");
document.writeln("<html> ");
document.writeln("<head> ");
document.writeln("<meta http-equiv=\'Content-Type\' content=\'text/html; charset=utf-8\'/> ");
document.writeln(" <title></title> ");
document.writeln(" <meta charset=\'utf-8\' />");
document.writeln(" ");
document.writeln(" <link rel=\'stylesheet\' href=\'http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css\'> ");
document.writeln(" <script src=\'http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js\'></script> ");
document.writeln(" <script src=\'http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js\'></script> ");
document.writeln("");
document.writeln("</head> ");
document.writeln("");
document.writeln("<style>");
document.writeln(" html, body {");
document.writeln(" width:100%;height:100%;/*非常重要的样式让背景图片100%适应整个屏幕*/ ");
document.writeln(" background-image:url(\'images/7.png\') ;");
document.writeln(" background-size:cover; ");
document.writeln("");
document.writeln("}");
document.writeln("</style>");
document.writeln("<body> ");
document.writeln(" <nav class=\'navbar navbar-fixed-top my-navbar\' role=\'navigation\'> ");
document.writeln(" <div class=\'container-fluid\'> ");
document.writeln(" <div class=\'navbar-header\'> ");
document.writeln(" <button type=\'button\' class=\'navbar-toggle\' data-toggle=\'collapse\' ");
document.writeln(" data-target=\'#example-navbar-collapse\'> ");
document.writeln(" <span class=\'sr-only\'>切换导航</span> ");
document.writeln(" <span class=\'icon-bar\'></span> ");
document.writeln(" <span class=\'icon-bar\'></span> ");
document.writeln(" <span class=\'icon-bar\'></span> ");
document.writeln(" </button> ");
document.writeln(" <a class=\'navbar-brand\' href=\'#\'>菜鸟教程</a> ");
document.writeln(" </div> ");
document.writeln(" <div class=\'collapse navbar-collapse\' id=\'example-navbar-collapse\'> ");
document.writeln(" <ul class=\'nav navbar-nav\'> ");
document.writeln(" <li class=\'active\'><a href=\'#\'>首页</a></li> ");
document.writeln(" <li><a href=\'medals.html\'>奖牌总榜</a></li> ");
document.writeln(" <li><a href=\'#\'>奖牌地图</a></li> ");
document.writeln(" <li><a href=\'#\'>查看赛程</a></li> ");
document.writeln(" <li><a href=\'#\'>了解更多</a></li> ");
document.writeln("");
document.writeln(" </ul> ");
document.writeln(" </div> ");
document.writeln(" </div> ");
document.writeln(" </nav> ");
document.writeln(" <div class=\'bg\'></div> ");
document.writeln(" <script> ");
document.writeln(" $(window).scroll(function () { ");
document.writeln(" if ($(\'.navbar\').offset().top > 50) {$(\'.navbar-fixed-top\').addClass(\'top-nav\'); ");
document.writeln(" }else {$(\'.navbar-fixed-top\').removeClass(\'top-nav\');} ");
document.writeln(" })</script> ");
document.writeln("</body>");
document.writeln("</html> ");
document.writeln("");
\ No newline at end of file
......@@ -5,15 +5,34 @@
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="NavMenu.js"></script>
</head>
<style>
body{
width:80%;
left:10%;
position: relative;
top:50px;
}
</style>
<body>
<div id="app">
<v-app>
<template>
<v-data-table
:headers="headers"
:items="medalsList"
:items-per-page="10"
:items-per-page="15"
class="elevation-1"
></v-data-table>
</template>
......@@ -22,19 +41,8 @@
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<template>
<v-data-table
:headers="headers"
:items="medalsList"
:items-per-page="10"
class="elevation-1"
></v-data-table>
</template>
<script>
new Vue({
el: '#app',
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册