使用外部。js和css文件的失敗

-1

我試圖設計一個網站引導和我下載的代碼的註冊頁面使用外部。js和css文件的失敗

有3個文件：

HTML，CSS 和。 JS

registration.html

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8"> 
    <title>Code </title> 
    <link href="css/my.css" rel="stylesheet"> 
    <script src="js/b.js"></script> 
    </head> 
<body> 
<div class="form"> 

     <ul class="tab-group"> 
     <li class="tab active"><a href="#signup">Sign Up</a></li> 
     <li class="tab"><a href="#login">Log In</a></li> 
     </ul> 

     <div class="tab-content"> 
     <div id="signup"> 
      <h1>Sign Up for Free</h1> 

      <form action="/" method="post"> 

      <div class="top-row"> 
      <div class="field-wrap"> 
       <label> 
       First Name<span class="req">*</span> 
       </label> 
       <input type="text" required autocomplete="off" /> 
      </div> 

      <div class="field-wrap"> 
       <label> 
       Last Name<span class="req">*</span> 
       </label> 
       <input type="text"required autocomplete="off"/> 
      </div> 
      </div> 

      <div class="field-wrap"> 
      <label> 
       Email Address<span class="req">*</span> 
      </label> 
      <input type="email"required autocomplete="off"/> 
      </div> 

      <div class="field-wrap"> 
      <label> 
       Set A Password<span class="req">*</span> 
      </label> 
      <input type="password"required autocomplete="off"/> 
      </div> 

      <button type="submit" class="button button-block"/>Get Started</button> 

      </form> 

     </div> 

     <div id="login"> 
      <h1>Welcome Back!</h1> 

      <form action="/" method="post"> 

      <div class="field-wrap"> 
      <label> 
       Email Address<span class="req">*</span> 
      </label> 
      <input type="email"required autocomplete="off"/> 
      </div> 

      <div class="field-wrap"> 
      <label> 
       Password<span class="req">*</span> 
      </label> 
      <input type="password"required autocomplete="off"/> 
      </div> 

      <p class="forgot"><a href="#">Forgot Password?</a></p> 

      <button class="button button-block"/>Log In</button> 

      </form> 

     </div> 

     </div><!-- tab-content --> 

</div> <!-- /form --> 
</body>

my.css

@import "compass/css3"; 

$body-bg: #c1bdba; 
$form-bg: #13232f; 
$white: #ffffff; 

$main: #1ab188; 
$main-light: lighten($main,5%); 
$main-dark: darken($main,5%); 

$gray-light: #a0b3b0; 
$gray: #ddd; 

$thin: 300; 
$normal: 400; 
$bold: 600; 
$br: 4px; 

*, *:before, *:after { 
    box-sizing: border-box; 
} 

html { 
    overflow-y: scroll; 
} 

body { 
    background:$body-bg; 
    font-family: 'Titillium Web', sans-serif; 
} 

a { 
    text-decoration:none; 
    color:$main; 
    transition:.5s ease; 
    &:hover { 
    color:$main-dark; 
    } 
} 

.form { 
    background:rgba($form-bg,.9); 
    padding: 40px; 
    max-width:600px; 
    margin:40px auto; 
    border-radius:$br; 
    box-shadow:0 4px 10px 4px rgba($form-bg,.3); 
} 

.tab-group { 
    list-style:none; 
    padding:0; 
    margin:0 0 40px 0; 
    &:after { 
    content: ""; 
    display: table; 
    clear: both; 
    } 
    li a { 
    display:block; 
    text-decoration:none; 
    padding:15px; 
    background:rgba($gray-light,.25); 
    color:$gray-light; 
    font-size:20px; 
    float:left; 
    width:50%; 
    text-align:center; 
    cursor:pointer; 
    transition:.5s ease; 
    &:hover { 
     background:$main-dark; 
     color:$white; 
    } 
    } 
    .active a { 
    background:$main; 
    color:$white; 
    } 
} 

.tab-content > div:last-child { 
    display:none; 
} 


h1 { 
    text-align:center; 
    color:$white; 
    font-weight:$thin; 
    margin:0 0 40px; 
} 

label { 
    position:absolute; 
    transform:translateY(6px); 
    left:13px; 
    color:rgba($white,.5); 
    transition:all 0.25s ease; 
    -webkit-backface-visibility: hidden; 
    pointer-events: none; 
    font-size:22px; 
    .req { 
    margin:2px; 
    color:$main; 
    } 
} 

label.active { 
    transform:translateY(50px); 
    left:2px; 
    font-size:14px; 
    .req { 
    opacity:0; 
    } 
} 

label.highlight { 
    color:$white; 
} 

input, textarea { 
    font-size:22px; 
    display:block; 
    width:100%; 
    height:100%; 
    padding:5px 10px; 
    background:none; 
    background-image:none; 
    border:1px solid $gray-light; 
    color:$white; 
    border-radius:0; 
    transition:border-color .25s ease, box-shadow .25s ease; 
    &:focus { 
     outline:0; 
     border-color:$main; 
    } 
} 

textarea { 
    border:2px solid $gray-light; 
    resize: vertical; 
} 

.field-wrap { 
    position:relative; 
    margin-bottom:40px; 
} 

.top-row { 
    &:after { 
    content: ""; 
    display: table; 
    clear: both; 
    } 

    > div { 
    float:left; 
    width:48%; 
    margin-right:4%; 
    &:last-child { 
     margin:0; 
    } 
    } 
} 

.button { 
    border:0; 
    outline:none; 
    border-radius:0; 
    padding:15px 0; 
    font-size:2rem; 
    font-weight:$bold; 
    text-transform:uppercase; 
    letter-spacing:.1em; 
    background:$main; 
    color:$white; 
    transition:all.5s ease; 
    -webkit-appearance: none; 
    &:hover, &:focus { 
    background:$main-dark; 
    } 
} 

.button-block { 
    display:block; 
    width:100%; 
} 

.forgot { 
    margin-top:-20px; 
    text-align:right; 
}

b.js

$('.form').find('input, textarea').on('keyup blur focus', function (e) { 

    var $this = $(this), 
     label = $this.prev('label'); 

     if (e.type === 'keyup') { 
      if ($this.val() === '') { 
      label.removeClass('active highlight'); 
     } else { 
      label.addClass('active highlight'); 
     } 
    } else if (e.type === 'blur') { 
     if($this.val() === '') { 
      label.removeClass('active highlight'); 
      } else { 
      label.removeClass('highlight'); 
      } 
    } else if (e.type === 'focus') { 

     if($this.val() === '') { 
      label.removeClass('highlight'); 
      } 
     else if($this.val() !== '') { 
      label.addClass('highlight'); 
      } 
    } 

}); 

$('.tab a').on('click', function (e) { 

    e.preventDefault(); 

    $(this).parent().addClass('active'); 
    $(this).parent().siblings().removeClass('active'); 

    target = $(this).attr('href'); 

    $('.tab-content > div').not(target).hide(); 

    $(target).fadeIn(600); 

});

我下載了它，並把HTML文件中的文件夾中的網站 &的CSS和JS文件中的CSS和JS分別夾。

然後我試圖把這些外部文件：

<link href="css/my.css" rel="stylesheet"> 
<script src="js/b.js"></script>

，但失敗了。

我認爲CSS規則的原因或使用外部「的.js」文件& css文件

來源

2015-07-21 smile

您在my.css有代碼的代碼沒有CSS - 這是SCSS，這需要編譯進入CSS。你可以閱讀更多關於SASS/SCSS這裏：

http://sass-lang.com/guide

來源

2015-07-21 23:58:58

所以我應該怎麼辦？安裝它！？ – smile

在安裝它！然後！？？ – smile

從你的shell中獲取my.scss my.css。您必須位於包含my.scss的文件夾中，或者在運行上述命令時包含其路徑。 –

使用外部。js和css文件的失敗

回答

相關問題