Question

以下是codepen：http://codepen.io/BrandonJF/pen/KGwyC

如果无法访问该页面，则会在下面提供该代码的副本。

现在，我一直在做的是使用Brackets，并在Brackets中打开一个包含完全空白 style.css页面的文件夹，完全空白 init.js页面，以及几乎空白的index.html页面（此页面至少包含以下代码：

<!DOCTYPE html>
<!--

-->
<html lang="en">
    <head>

    </head>
    <body>



    </body>
</html>

我将CodePen HTML粘贴到index.html的body标签中。我将CodePen CSS粘贴到style.css中。我将CodePen Javascript粘贴到init.jss中我还尝试将CodePen Javascript粘贴到index.html的body标签中，使用标签＆＃34; script＆＃34;围绕JS代码。

任何想法我做错了什么？

太无能了！

CodePen HTML：

<div id="container">
    <header>
         <h1>Task List</h1>
      <a href="#" id="clear">Clear all</a>

    </header>
    <section id="taskIOSection">
        <div id="formContainer">
            <form id="taskEntryForm">
                <input id="taskInput" placeholder="What would you like to do today?" />
            </form>
        </div>
        <ul id="taskList"></ul>
    </section>
</div>

CodePen CSS：

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 300, 600);
 * {
    padding:0;
    margin:0;
}
body {
  background:url('http://dribbble.com/images/attachments/attachments-bg.png?1');
    background-color:#2a2a2a;
    font-family:'Open Sans', sans-serif;
}
#container {
    background-color: #111216;
    color:#999999;
    width:350px;
    margin: 50px auto auto auto;
    padding-bottom:12px;
}
#formContainer {
    padding-top:12px
}
#taskIOSection {
}
#taskInput {

    font-size:14px;
    font-family:'Open Sans', sans-serif;
    height:36px;
    width:311px;
    border-radius:100px;
    background-color:#202023;
    border:0;
    color:#fff;
    display:block;
    padding-left:15px;
   -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
}
#taskInput:focus{
  box-shadow: 0px 0px 1pt 1pt #999999;
 background-color:#111216; 
  outline:none;
}
::-webkit-input-placeholder {
    color: #333333;
    font-style:italic;
    /* padding-left:10px; */
}
:-moz-placeholder {
    /* Firefox 18- */
    color: #333333;
    font-style:italic;
}
::-moz-placeholder {
    /* Firefox 19+ */
    color: #333333;
    font-style:italic;
}
:-ms-input-placeholder {
    color: #333333;
    font-style:italic;
}
header {
    margin-top:0;
    background-color:#F94D50;
    width:338px;
    height:48px;
    padding-left:12px;
}
header h1 {
    font-size:25px;
    font-weight:300;
    color:#fff;
    line-height:48px;
  width:50%;
  display:inline;
}
header a{

  width:40%;
  display:inline;
  line-height:48px;
}
#taskEntryForm {
    background-color:#111216;
    width:326px;
    height: 48px;
    border-width:0px;
    padding: 0px 12px 0px 12px;
    font-size:0px;
}
#taskList {
    width: 350px;
    margin:auto;
    font-size:19px;
    font-weight:600;
}
ul li {
    background-color:#17181D;
    height:48px;
    width:314px;
    padding-left:12px;
    margin:0 auto 10px auto;
    line-height:48px;
    list-style:none;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

CodePen Javascript：

$(document).ready(function () {
    var i = 0;
    for (i = 0; i < localStorage.length; i++) {
        var taskID = "task-" + i;
        $('#taskList').append("<li id='" + taskID + "'>" + localStorage.getItem(taskID) + "</li>");
    }
    $('#clear').click(function () {
        localStorage.clear();
    });
    $('#taskEntryForm').submit(function () {
        if ($('#taskInput').val() !== "") {
            var taskID = "task-" + i;
            var taskMessage = $('#taskInput').val();
            localStorage.setItem(taskID, taskMessage);
            $('#taskList').append("<li class='task' id='" + taskID + "'>" + taskMessage + "</li>");
            var task = $('#' + taskID);
            task.css('display', 'none');
            task.slideDown();
            $('#taskInput').val("");
            i++;
        }
        return false;
    });

    $('#taskList').on("click", "li", function (event) {
        self = $(this);
        taskID = self.attr('id');
        localStorage.removeItem(taskID);
        self.slideUp('slow', function () {
            self.remove();
        });

    });


});

编辑：对于任何偶然发现这篇文章的人来说，以下是使我的代码工作的事情。根据jswebb的建议，我在index.html的头部引用了我需要的内容。

所以head标签现在看起来像这样：

<head>
    <link type="text/css" rel="stylesheet" href="css/styleok.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>



</head>

确保在编写链接标记时，href =＆＃34; YOURCSSFILENAME.css＆＃34;包括所有正确的文件夹！

祝愿所有人。

Answer 1

您链接的CodePen使用jQuery;但是，当使用文本编辑器并写入空白HTML文件时，您需要链接到jQuery库 - 你做过这个吗？

如果没有，请使用以下内容在<head>和</head>之间的Google托管的jQuery脚本文件中放置外部源链接：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

如果能为您解决问题，请与我联系！

编辑：要解决您遇到的CSS问题，您需要对外部工作表执行相同的步骤;通常，沙箱允许功能而不链接不同的文件，但在文本编辑器中工作时，必须提供样式表，JS文件和HTML页面之间的连接。

要链接到外部CSS表格，请将以下内容放在<head>和</head>之间：

<link type="text/css" rel="stylesheet" href="style.css" />

这是添加外部CSS链接的标准过程。如果工作表在Brackets编辑器中打开，当您开始输入时，它应该为您提供'style.css'。

完成上述操作后，将CodePen中的CSS放入该CSS文件中，然后保存您正在处理的所有工作表。一切都应该有效 - 让我知道这是否解决了您的问题！

Answer 2

我在这里有相同的答案：

How do I take code from Codepen, and use it locally?

右键点击result框架，然后选择View Frame source。您可以复制源代码并将其粘贴到您自己的文本编辑器中。

如何从Codepen获取此代码？

2 个答案: