这是codepen:http://codepen.io/BrandonJF/pen/KGwyC

如果无法访问页面,则下面是代码的副本.

现在,我一直在做的是使用Brackets,并在Brackets中打开一个文件夹,其中包含一个完全空白的 style.css页面,完全空白的 init.js页面,以及一个几乎空白的index.html页面(此页面至少包含以下内容)码:

我将CodePen HTML粘贴到index.html的body标签中.我将CodePen CSS粘贴到style.css中.我将CodePen Javascript粘贴到init.jss中我还尝试将CodePen Javascript粘贴到index.html的body标签中,使用JS代码周围的标记"script".

我有什么想法我做错了吗？

太无能了!

CodePen HTML:

    
         
Task List
      Clear all

    
    

        

            
                
            
        
        

    

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.getItem(taskID) + "");
    }
    $('#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("
" + taskMessage + "
");
            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标签现在看起来像这样:

确保在编写链接标记时,href ="YOURCSSFILENAME.css"包含所有正确的文件夹!

祝大家好.

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

如果不是,将外部源链接到谷歌托管的jQuery脚本文件中之间和使用下列内容:

如果能为您解决问题,请告诉我!

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

要链接到外部CSS表,把下面之间和:

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

完成上述操作后,将CodePen中的CSS放入该CSS文件中,然后保存您正在处理的所有工作表.一切都应该工作 - 请告诉我这是否解决了您的问题!