Question

我试图将此注册内容放入记事本中。我无望，无论我尝试什么都行不通。如果有人可以查看代码并解释每个代码文件的外观（html，css等），我将不胜感激。

以下是该网站的链接：http://codepen.io/jack-doyle/pen/XXYXWp

下面你会看到我到目前为止所复制的内容。

感谢您对此进行调查。

(function() {
    var signup = $('.container--static .button--signup');
    var login = $('.container--static .button--login');
    var signupContent = $('.container--sliding .slider-content.signup');
    var loginContent = $('.container--sliding .slider-content.login');
    var slider = $('.container--sliding');

    signup.on('click', function() {
        loginContent.css('display', 'none');
        signupContent.css('display', 'initial');
        slider.animate({
            'left': '30%'
        }, 350, 'easeOutBack');
    });

    login.on('click', function() {
        signupContent.css('display', 'none');
        loginContent.css('display', 'initial');
        slider.animate({
            'left': '70%'
        }, 350, 'easeOutBack');
    });
})();

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,700);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);


body {
  background: url(https://images.unsplash.com/photo-1443890923422-7819ed4101c0?crop=entropy&fit=crop&fm=jpg&h=650&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1375) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  font-family: 'Montserrat';
  overflow: auto;
}

a,
a:focus,
a:visited,
a:active {
  text-decoration: none;
  color: inherit;
}

.container {
  padding: 5%;
  border-radius: 3px;
}

.container.container--static {
  width: 80%;
  min-width: 600px;
  height: 40%;
  min-height: 250px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #000;
  color: #eee;
  opacity: 0.6;
}

.container.container--sliding {
  width: 35%;
  height: 50%;
  min-height: 300px;
  background-color: #fefefe;
  position: absolute;
  top: 50%;
  left: 65%;
  transform: translate(-50%, -50%);
  box-shadow: 3px -2px 6px 0px rgba(0, 0, 0, 0.4);
}
.container.container--sliding .slider-content.signup {
  display: none;
}

.info-box {
  width: 40%;
  margin: 5% auto;
}

.info-box.left {
  float: left;
}

.info-box.right {
  float: right;
}

.heading {
  font-family: 'Montserrat';
  font-size: 1.2em;
}

.heading.alt {
  margin-bottom: 10%;
  text-transform: uppercase;
  color: #E26A6A;
}

.info-text {
  font-family: 'Roboto';
  font-size: 0.7em;
  font-weight: 300;
  letter-spacing: 1px;
}

.info-text.alt {
  color: #aaa;
}

.button {
  width: 35%;
  margin-top: 15px;
  padding: 2% 5%;
  background-color: transparent;
  color: #eee;
  border: 2px solid #ccc;
  border-radius: 3px;
  font-family: 'Montserrat';
  font-size: 0.7em;
  text-transform: uppercase;
  cursor: pointer;
}

.button.alt {
  margin-bottom: 15px;
  background-color: #E26A6A;
  border: 0;
}

.button:focus {
  outline: 0;
}

form {
  margin-bottom: 10%;
}

form input {
  display: block;
  width: 100%;
  margin-bottom: 15px;
  padding: 5px;
  border: 0;
  border-bottom: 2px solid #ddd;
  font-family: 'Montserrat';
}
form input:focus {
  outline: 0;
}

<html>
<head>
<script type="text/javascript" src="hey.js"></script>
<link rel="stylesheet" href="css.css">
</head>
<body>
<!-- Static container -->
<div class="container container--static">
    <!-- Signup prompt -->
    <div class="info-box left">
        <h2 class="heading">Don't have an account?</h2>
        <p class="info-text">Ethical celiac hashtag taxidermy squid. Wayfarers distillery narwhal, kombucha jean shorts selvage meggings.</p>
        <button class="button button--signup">Sign up</button>
    </div>
    <!-- Login prompt -->
    <div class="info-box right">
        <h2 class="heading">Have an account?</h2>
        <p class="info-text">Ethical celiac hashtag taxidermy squid. Wayfarers distillery narwhal, kombucha jean shorts selvage meggings.</p>
        <button class="button button--login">Login</button>
    </div>
</div> 

<!-- Sliding container -->
<div class="container container--sliding">
    <!-- Login -->
    <div class="slider-content login">
        <h2 class="heading alt">Log In</h2>
        <form id="login">
            <input class="email" type="text" placeholder="Email">
            <input class="password" type="password" placeholder="Password">
        </form>
        <button class="button button--login alt">Log In</button>
        <p class="info-text alt"><a href="">Forgot password?</a></p>
    </div>
    
    <!-- Signup -->
    <div class="slider-content signup">
        <h2 class="heading alt">Sign Up</h2>
        <form id="signup">
            <input class="name" type="text" placeholder="Full Name">
            <input class="email" type="text" placeholder="Email">
            <input class="password" type="password" placeholder="Password">
        </form>
        <button class="button button--signup alt">Sign Up</button>
    </div>
</div>

Answer 1

首先将html，js和css代码放在同一目录中。如果要将文件从codepen移动到记事本，则需要导入jQuery，jQuery UI并最后加载javascript文件。

在你的html文件中，将这些脚本放在最后一个div之后：

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
    <script type="text/javascript" src="hey.js"></script>
</body>
</html>

Codepen注册/登录

1 个答案: