1

次のコードを html、css、javascript に分割していますが、それらをメモ帳で組み合わせる方法がわからないので、自分の Web サイトに埋め込むことができます。(画像ソースとテキストは一例です。)

HTML

<div id="wrapper">
<div id="text">
    <h3>Geneva International Motor Show</h3>
    <p>The Geneva International Motor Show will open to the public from 03 to       13 March, presenting more than 260 exhibitors and more than 175 world and European premieres. 02 March 2011.<br />
        <small>Source: <a href="http://gigapica.geenstijl.nl/2011/03/geneva_international_motor_sho.html" target="_blank">gigapica.geenstijl.nl</a></small></p>
</div>
<div id="images">
    <div id="a">
        <img src="img/car1.jpg" alt="car1" width="275" height="200" />
        <span>The new Swiss Sbarro TwoFort100 Concept car is shown during the press day at the 81st Geneva International Motor Show in Geneva, Switzerland, on 01 March 2011. </span>
    </div>
    <div>
        <img src="img/car2.jpg" alt="car2" width="275" height="200" />
        <span>The new Toyota FT-86 II Concept car on display during the press day at the 81st Geneva International Motor Show in Geneva, Switzerland, 02 March 2011. </span>
    </div>
    <div>
        <img src="img/car3.jpg" alt="car5" width="275" height="200" />
        <span>The new Renault Dezir Concept car is on display during the press day at the 81st Geneva International Motor Show in Geneva, Switzerland, 02 March 2011. </span>
    </div>
    <div>
        <img src="img/car4.jpg" alt="car6" width="275" height="200" />
        <span>The new Dodge Challenger SRT8 392 is on display during the press day at the 81st Geneva International Motor Show in Geneva, Switzerland, 02 March 2011.</span>
    </div>
    <div>
        <img src="img/car5.jpg" alt="car8" width="275" height="200" />
        <span>The new Nissan Esflow Concept car is on display during the press day at the 81st Geneva International Motor Show in Geneva, Switzerland, 02 March 2011. </span>
    </div>
    <div>
        <img src="img/car6.jpg" alt="car9" width="275" height="200" />
        <span>A study of Volkswagen named Bulli is on display at International Geneva Motor Show at the Palexpo fairground in Geneva, Switzerland, 03 March 2011</span>
    </div>
</div>
</div>

CSS

 html, body {
    height: 100%;
    padding: 0;
    margin: 0;
    }
    body {
    min-height: 650px;
}
    body * {
    font-family: Arial, Geneva, SunSans-Regular, sans-serif;
    font-size: 14px;
    color: #333;
    line-height: 22px;
}

    #wrapper {
    width: 825px;
    margin: 0 0 0 -412px;
    position: absolute;
    left: 50%;
    top: 30px;
}
    #text h3 {
    font-size: 26px;
}
    #text small, #text small * {
    font-size: 12px;
    color: #666;
}
    #images {
    width: 900px;
    overflow: hidden;
}
    #images div, #images img {
    display: block;
    float: left;
    width: 275px;
    height: 200px;
}
    #images span {
    background-color: black;
    color: #ccc;
    display: block;
    float: left;
    width: 215px;
    height: 160px;
    padding: 40px 30px 0 30px;
    }

Javascript

$(function() {
    $('#images > div').each(function() {
        var $cfs = $(this);
        $cfs.carouFredSel({
            direction: 'up',
            circular: false,
            infinite: false,
            auto: false,
            scroll: {
                queue: 'last'
            },
            items: {
                visible: 1,
                width: 275,
                height: 200
            }
        });
        $cfs.hover(
            function() {
                $cfs.trigger('next');
            },
            function() {
                $cfs.trigger('prev');
            }
        );
    });
    });

これについての助けは大歓迎です!!!

4

4 に答える 4

9 
<!DOCTYPE html>
<html lang"en">
  <head>
    <meta charset="utf-8">
    <title>...</title>
    <link rel="stylesheet" type="text/css" href="path/to/your.css" />
    <script src="path/to/your.js"></script>
  </head>
  <body>
   ...your html
  </body>
</html>

charset 属性や lang 属性など、通常は HTML ドキュメントの head に入る要素をいくつか追加しました。また、この doctype は html5 用です。

于 2013-02-28T16:03:35.927 に答える
3

コードをインラインで参照することも、ファイルにリンクすることもできます。

すべてをインラインで参照するには、HTML の上に CSS を配置します。

<style>

</style>

次に、JavaScriptを間に入れます：

<script>

</script>

また

CSS をドキュメントに保存します。たとえば、slider.css

JavaScriptをslider.jsというファイルに保存します

次に、それらにリンクします。

<link href="slider.css" type="text/css" rel="stylesheet" />

と

<script src="slider.js" type="text/javascript></script>

上記の 2 つのコード スニペットは、<head></head>タグ内に配置する必要があることに注意してください。

于 2013-02-28T16:04:37.017 に答える
1

<head>これをhtml ファイルのセクションに追加します。

<link rel="stylesheet" href="yourcssfilename.css"/>
<script type="text/javascript" src="yourjsfilename.js"/>
于 2013-02-28T16:03:01.647 に答える
0 
<head>
<script type="text/javascript" src="<Location and filename of Javascript file including file extension>"></script>
<link rel="stylesheet" type="text/css" href="<Location and filename of CSS file including file extension>">
</head>

スタッフをサーバー/マシン上の実際のファイルの場所に置き換えます。

于 2013-02-28T16:05:39.857 に答える