She*_*rri 5 html javascript css jquery css3
这是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标签中,使用JS代码周围的标记"script".
我有什么想法我做错了吗？
太无能了!
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 ="YOURCSSFILENAME.css"包含所有正确的文件夹!
祝大家好.
您链接的CodePen使用jQuery; 但是,当使用文本编辑器并写入空白HTML文件时,您需要链接到jQuery库 - 你做到了吗？
如果不是,将外部源链接到谷歌托管的jQuery脚本文件中之间<head>和</head>使用下列内容:
<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文件中,然后保存您正在处理的所有工作表.一切都应该工作 - 请告诉我这是否解决了您的问题!