Question

我想知道如何在下面嵌入我的网站代码。作为一名初学者，我对如何将其包括在内感到困惑，我只是习惯使用12网格系统而且之前从未将其添加到我的网站中。

＆＃13;

$(document).ready(function() {
	$('#fullpage').fullpage();
});

＆＃13;

.one {
  background: #F1E05A;
}

.two {
  background: #563D7C;
}

.three {
  background: #E34C26;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>


<div id="Sections">
	<div class="section one"></div>
	<div class="section two"></div>
	<div class="section three"></div>
</div>

＆＃13;

完整网站代码

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
.body {
  font-family: 'Roboto', sans-serif;
  color: black;
}
.navbar.navbar-default {
  background-color: #FFFFFF;
  height: 10vh;
  z-index: 100;
}

.navbar.navbar-default ul {
  list-style-type: none;
  text-align: center;
}

.navbar.navbar-default ul li {
  display: inline-block;
}

.dropdown-menu li {
  text-align: center;
}

.dropdown .dropdown-menu {
  background-color: #FFFFFF;
}

.dropdown .dropdown-menu a {
  color: white;
}

.navbar.navbar-default ul li a {
  display: inline-block;
  padding: 3.5vh 8px 4px;
  color: black;
  text-decoration: none;
  font-size: 14pt;
  font-family: 'Roboto', sans-serif;
}

.navbar.navbar-default ul li:after {
  content: '';
  position: absolute;
  right: 50%;
  bottom: 0;
  left: 50%;
  height: 3px;
  background-color: black;
  border-radius: 9px;
  transition: all .2s;
}

.nav.navbar-nav,
.nav.navbar-nav>li {
  float: none;
}

.navbar.navbar-default ul li:hover:after {
  right: 0;
  left: 0;
}

.navbar.navbar-default ul.dropdown-menu li,
.navbar.navbar-default ul.dropdown-menu li a {
  position: relative;
  display: block;
}
</style>
<body>
  <div class="container">
    <nav class="navbar navbar-default navbar-fixed-top">
       <div class="container-fluid">
         <!-- Brand and toggle get grouped for better mobile display -->
         <div class="navbar-header">
           <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                           <span class="sr-only">Toggle navigation</span>
                           <span class="icon-bar"></span>
                           <span class="icon-bar"></span>
                           <span class="icon-bar"></span>
           </button>
         </div>
         <!-- Collect the nav links, forms, and other content for toggling -->
         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
           <ul class="nav navbar-nav">
             <li><a href="#">Home</a>
             </li>
             <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true">About Me <span class="caret"></span></a>
               <ul class="dropdown-menu">
                 <li><a href="#">Action</a>
                 </li>
                 <li><a href="#section3">Contact</a>
                 </li>
                 <li><a href="#">Something else here</a>
                 </li>
                 <li><a href="#">Separated link</a>
                 </li>
                 <li><a href="#">One more separated link</a>
                 </li>
               </ul>
             </li>
             <li class="dropdown">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Units <span class="caret"></span></a>
               <ul class="dropdown-menu">
                 <li><a href="#">Action</a>
                 </li>
                 <li><a href="#">Another action</a>
                 </li>
                 <li><a href="#">Something else here</a>
                 </li>
                 <li><a href="#">Separated link</a>
                 </li>

                 <li><a href="#">One more separated link</a>
                 </li>
               </ul>
             </li>
             <li><a href="#">Clients</a>
             </li>
             <li><a href="#contact-me">Contact Me</a>
             </li>
           </ul>
         </div>
         <!-- /.navbar-collapse -->
       </div>
       <!-- /.container-fluid -->
     </nav>


</body>
</html>

Answer 1

您可以内嵌包含样式和脚本，如下所示。最佳做法是将这些文件放入自己的文件中。这使您可以更好地管理代码并分担责任。

<html>
    <head>
        <link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.css" rel="stylesheet"/>
        <style>
            .one {
                background: #F1E05A;
            }
    
            .two {
                background: #563D7C;
            }
    
            .three {
                background: #E34C26;
            }
        </style>
    </head>
    <body>
        <div id="Sections">
            <div class="section one">Foo</div>
            <div class="section two">Bar</div>
            <div class="section three">Baz</div>
        </div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>
    
        <script>
            $(document).ready(function() {
                $('#Sections').fullpage();
            });
        </script>
    </body>
</html>

我还针对JQuery函数定位了#Sections div。

Answer 2

如果您要问的是如何在html页面中显示所有这些内容，这应该可以帮助您入门。您还可以将样式移动到自定义css文件中。

<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.css" rel="stylesheet" />
<style>
    .one {
        background: #F1E05A;
    }

    .two {
        background: #563D7C;
    }

    .three {
        background: #E34C26;
    }
</style>
</head>
<body>
<div id="Sections">
    <div class="section one"><span>Color 1</span></div>
    <div class="section two"><span>Color 2</span></div>
    <div class="section three"><span>Color 3</span></div>
</div>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.9.4/jquery.fullpage.min.js"></script>
<script>
$(document).ready(function () {
    $('#fullpage').fullpage();
});
</script>

如何在我的网站中包含此代码？

2 个答案: