-2

私は友人のために小さなプロジェクトに取り組んでいます。最近、Codecademy で jQuery を学びましたが、これを Web ページに組み込むのはこれが初めてです。しかし、それは機能せず、その理由はわかりません。また、下のリンクの画像のようにテキスト ボックスを中央に配置する方法などを教えていただける場合は、お知らせください。

ログインフォームのスクリーンショット

ここに私のindex.htmlがあります:

<!DOCTYPE html>
<html>
    <head>
    <title>DNA Translator</title>
    <link rel="stylesheet" type="text/css" href="stylesheet.css"/>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <script> type="text/javascript" src="script.js"</script>
    <script></script>
    </head>
    <body>
        <div id="content">
            <form>
                DNA: <input type="text" name="dna" placeholder="DNA"><br>
                mRNA: <input type="text" name="mrna" placeholder="mRNA"><br>
                tRNA: <input type="text" name="trna" placeholder="tRNA"<br>
                Amino Acids: <input type="text" name="aminoAcids" placeholder="Amino Acids"<br>
            </form>
            <button id="button" type="button">Tanslate</button>
        </div>
    </body>
</html>

ここに私のstylesheet.cssがあります:

h2 {
    font-family:arial;
}

form {
    display: inline-block;
}

#content {
  margin-top: 200px;
  margin-left: auto;
  margin-right: auto;
}

#button{
    opacity: 0.7;
    display: inline-block;
    height:25px;
    width:300px;
    background-color:#293FE3;
    font-family:arial;
    font-weight:bold;
    color:#ffffff;
    border-radius: 5px;
    text-align:center;
    margin-top:2px;
    /*display: block;*/
    margin: 30px auto;
}

input[type="text"] {
    display:/*block;*/ inline-block;
    height:20px;
    padding:4px 6px;
    margin-bottom:10px;
    font-size:14px;
    line-height:20px;
    color:#555;
    vertical-align:middle;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px
    background-color:#fff;
    border:1px solid #ccc;
    -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
    -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
    box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);
    -webkit-transition:border linear .2s,box-shadow linear .2s;
    -moz-transition:border linear .2s,box-shadow linear .2s;
    -o-transition:border linear .2s,box-shadow linear .2s;
    transition:border linear .2s,box-shadow linear .2s
}

script.js は次のとおりです。

$(document).ready(function() {
    $('#button').mouseenter(function() {
        $('#button').fadeTo('slow', 1);
    });
    $('#button').mouseleave(function() {
        $('#button').fadeTo('slow', 0.7);
    });
});
4

4 に答える 4

6

jQuery を含める必要があります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
于 2013-08-08T17:55:48.130 に答える
3

jQuery ライブラリへのリンクを含めます。

<script src="http://code.jquery.com/jquery-latest.min.js"
    type="text/javascript"></script>

.js ファイルを呼び出す前に、必ずこれを行ってください。

于 2013-08-08T17:56:21.363 に答える