如何使我的网页显示与在Codepen上显示的方式相同？

Question

So, I started my project on Codepen using both the Bootstrap 4 and JQuery quick-adds. 因此，我使用Bootstrap 4和JQuery快速添加程序在Codepen上启动了我的项目。 I was able to get perfect results, however when I copied the exact same code to my text-editor and ran it from there, the format of the page is off. 我能够获得理想的结果，但是当我将完全相同的代码复制到文本编辑器并从那里运行时，页面的格式已关闭。 I tried incorporating the same Bootstrap and Jquery CDN links, but no luck. 我尝试合并相同的Bootstrap和Jquery CDN链接，但是没有运气。 How do I get my code to run the same way it does on Codepen.io? 如何使我的代码以与Codepen.io相同的方式运行？ Which links do I need to include? 我需要包括哪些链接？

This is the desired result: 这是期望的结果：

This is the result that I get in the Firefox/Chrome browsers. 这是我在Firefox / Chrome浏览器中得到的结果。 Not too big of a difference now, except that most of my Bootstrap 4 styling is absent. 现在没有太大的区别，除了我的大多数Bootstrap 4样式都不存在。 Also, I'm having issues with the links in my navigation bar now. 另外，我的导航栏中的链接现在有问题。 When I try to use text-decoration: none; 当我尝试使用text-decoration: none; on my <a> elements and button, my JQuery code no longer works. 在<a>元素和按钮上，我的JQuery代码不再起作用。

This is the result that I get in Internet Explorer. 这是我在Internet Explorer中得到的结果。 Clearly the worst results of them all. 显然，它们所有人的最坏结果。 I tried moving my links like Moe kanan suggested but I feel like there's something that I'm still missing. 我尝试按照Moe kanan的建议移动链接，但感觉仍然缺少某些内容。

 $(document).ready(function() { $('a').on('click', function() { $(this).parents().siblings().children().removeClass('active'); $(this).addClass('active'); }); $('.menu-icon').on('click', function() { $('.nav-bar').toggleClass('hide-nav'); $('main').toggleClass('expand-main'); }); });

 * { /*box-sizing: border-box; */ padding: 0; margin: 0; } body, html { height: 100%; overflow: hidden; } .main { background-image: url('http://hdimages.org/wp-content/uploads/2016/10/css-background-image-HD6-1.jpg'); width: 75%; height: 100%; float: right; } .nav-bar { background-color: #4a235a; width: 25%; height: 100%; opacity: 0.9; } ul { padding: 10% 30%; } ul li { color: white; text-transform: uppercase; list-style-type: none; padding: 20%; border-bottom: solid 1px gray; font-size: 1.2em; } ul li:hover { color: gray; font-weight: bold; } h3 { padding: 3%; font-size: 1.3em; color: lemonchiffon; font-weight: bold; } .active { color: navy; font-weight: bold; } h1 { font-family: Raleway; font-size: 2.6em; line-height: 1.4em; padding-left: 20%; padding-right: 20%; padding-top: 14%; padding-bottom: 4%; color: snow; } .button { color: white; font-size: 1.3em; text-align: center; border: solid 1px white; padding: 0.5em 0.7em; } .button:hover { color: #2c3e50; background-color: #c39bd3; opacity: 0.9; } a { color: white; } a:hover { color: gray; text-decoration: none; } .menu-icon { width: 2.5%; margin: 1.2%; padding: 0.05% 0.02%; } img:hover { border: solid 1px #17202a; border-radius: 0.5em; } .hide-nav { display: none; } .expand-main { float: none; width: 100%; }

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Gab's Tech Space</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link href="Gab's Tech Space Template.css" rel="stylesheet" type="text/css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="main"> <a href=#><img class="menu-icon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Ic_menu_36px.svg/2000px-Ic_menu_36px.svg.png"></a> <h1 class="text-center">Hello! My name is <span>Gabby</span> and I create beautiful, professional, and responsive websites.</h1> <center><a class="button text-center" href="#"><span class="learn-more">Learn More</span></a></center> </div> <div class="nav-bar"> <h3>Gab's Tech <br><span class="space text-center">Space</span></h3> <ul class="text-center"> <li><a href=# class="active">Home</a></li> <li><a href=#>About</a></li> <li><a href=#>Projects</a></li> <li><a href=#>Contact</a></li> </ul> </div> <script src="Gab's Tech Space Template.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>

Answer 1

1. Rename your javaScript file and remove the spaces, then edit the script src. 1.重命名javaScript文件并删除空格，然后编辑脚本src。

Change Gab's Tech Space Template.js to gabsTechSpaceTemplate.js 将Gab的Tech Space Template.js更改为gabsTechSpaceTemplate.js

Change this: 更改此：

<script src="Gab's Tech Space Template.js"></script>

To this: 对此：

<script src="gabsTechSpaceTemplate.js"></script>

NOTE: make sure your javaScript file is in the root folder (same as the index.html file) 注意：确保您的javaScript文件在根文件夹中（与index.html文件相同）

2. Move the jQuery CDN link first: You need to import the library first, then use it. 2.首先移动jQuery CDN链接：您需要先导入库，然后使用它。 In your case, you started using jQuery before you have imported it. 在您的情况下，您在导入jQuery之前就开始使用jQuery。 Therefore, always have jQuery CDN at the top before the other javaScript code or files. 因此，在其他javaScript代码或文件之前，始终将jQuery CDN放在顶部。

This should go first: 首先应该这样做：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

Second: 第二：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

And your javaScript file last: 最后是您的javaScript文件：

<script src="gabsTechSpaceTemplate.js"></script>

Answer 2

Create these 3 files in a folder then copy/paste the code below into each file. 在一个文件夹中创建这3个文件，然后将以下代码复制/粘贴到每个文件中。

index.html index.html
style.css style.css
index.js index.js

index.html index.html

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Website Template 3 with Navbar</title>

  <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css'>

  <link rel="stylesheet" href="style.css">

  <link href="https://fonts.googleapis.com/css?family=Raleway" type="text/css" rel="stylesheet">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>
<div class="main">
  <a href=#><img class="menu-icon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/Ic_menu_36px.svg/2000px-Ic_menu_36px.svg.png"></a>
  <h1 class="text-center">Hello! My name is <span>Gabby</span> and I create beautiful, professional, and responsive websites.</h1>
  <center><a class="button text-center" href="#"><span class="learn-more">Learn More</span></a></center>
</div>

<div class="nav-bar">
  <h3>Gab's Tech <br><span class="space text-center">Space</span></h3>
  <ul class="text-center">
    <li><a href=# class="active">Home</a></li>
    <li><a href=#>About</a></li>
    <li><a href=#>Projects</a></li>
    <li><a href=#>Contact</a></li>
  </ul>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

  <script  src="index.js"></script>

</body>
</html>

style.css style.css

* {
  /*box-sizing: border-box; */
  padding: 0;
  margin: 0;
}

body, html {
  height: 100%;
  overflow: hidden; 
}

.main {
  background-image: url('http://hdimages.org/wp-content/uploads/2016/10/css-background-image-HD6-1.jpg');
  width: 75%;
  height: 100%;
  float: right;
}

.nav-bar {
  background-color:   #4a235a;
  width: 25%;
  height: 100%;
  opacity: 0.9;
}

ul {
  padding: 10% 30%;
}

ul li {
  color: white;
  text-transform: uppercase;
  list-style-type: none;
  padding: 20%;
  border-bottom: solid 1px gray;
  font-size: 1.2em;
}

ul li:hover {
  color: gray;
  font-weight: bold;
}

h3 {
  padding: 3%;
  font-size: 1.3em;
  color: lemonchiffon;
  font-weight: bold;
}

.active {
  color: navy;
  font-weight: bold;
}

h1 {
  font-family: Raleway;
  font-size: 2.6em;
  line-height: 1.4em;
  padding-left: 20%;
  padding-right: 20%;
  padding-top: 14%;
  padding-bottom: 4%;
  color: snow;
}

.button {
  color: white;
  font-size: 1.3em;
  text-align: center;
  border: solid 1px white;
  padding: 0.5em 0.7em;
}

.button:hover {
  color: #2c3e50;
  background-color:  #c39bd3;
  opacity: 0.9;
}

a {
  color: white;
}

a:hover {
  color: gray;
  text-decoration: none;
}


.menu-icon {
  width: 2.5%;
  margin: 1.2%;
  padding: 0.05% 0.02%;
}

img:hover {
  border: solid 1px #17202a;
  border-radius: 0.5em;
}

.hide-nav {
  display: none;
}

.expand-main {
  float: none;
  width: 100%;
}

index.js index.js

$(document).ready(function() {
  $('a').on('click', function() {
    $(this).parents().siblings().children().removeClass('active');
    $(this).addClass('active');
  });

 $('.menu-icon').on('click', function() {
    $('.nav-bar').toggleClass('hide-nav');
    $('main').toggleClass('expand-main');
 });
});

如何使我的网页显示与在Codepen上显示的方式相同？

问题描述

2 个解决方案

解决方案1
1 2017-10-29 19:39:45

解决方案2
1 已采纳 2017-10-30 01:37:54

如何使我的网页显示与在Codepen上显示的方式相同？

问题描述

2 个解决方案

解决方案1 1 2017-10-29 19:39:45

解决方案2 1 已采纳 2017-10-30 01:37:54

解决方案1
1 2017-10-29 19:39:45

解决方案2
1 已采纳 2017-10-30 01:37:54