为什么我不能直接采用Codepen

Question

我正在尝试使用它并利用它创建一个不同的登录页面。

这是HTML。 其余的在codepen上。

<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Raleway:400,800,700,900,300,100' rel='stylesheet'        type='text/css'>
<div class="overlay">
  <div class="wrap">
   <h1>Scrolling Form</h1>
<input type="text" placeholder="Username">
<input type="email"placeholder="Password">
<input type="submit" value="Sign In">
<a href="#"><i class="fa fa-question"></i>Forgotten Password</a>
    <a href="#"><i class="fa fa-user"></i>Create an Account</a>
  </div>
</div>

我对编码和使用Codepen相当陌生，但是当我将代码复制到Sublime Text 2中时，它不起作用。

为什么会这样，我该怎么做才能解决此问题？

Answer 1

这看起来似乎很明显，但是如果您要完全按照笔上的显示方式复制并粘贴该代码，则由于它的存在，它就无法正常工作。

1）这不是完整的HTML文档。 这只是身体的一小段。 它需要一个doctype，head，body和html标签。 没有完整的HTML结构，浏览器不会将其视为HTML文档。

2）即使您使用示例创建了完整的HTML文档，它也无法在Codepen中按原样工作，因为Codepen会自动将CSS附加到HTML。 您必须在HTML文档的开头链接CSS文件，以使其在本地工作。

<head>
    <title>Copied from Codepen</title>
    <link href="/style-from-codepen.css" rel="stylesheet">
</head>

为什么我不能直接采用Codepen

问题描述

1 个解决方案

解决方案1
2 已采纳 2014-10-01 04:50:02

为什么我不能直接采用Codepen

问题描述

1 个解决方案

解决方案1 2 已采纳 2014-10-01 04:50:02

解决方案1
2 已采纳 2014-10-01 04:50:02