1

このページに nivo スライダーを統合したいリンクスライドは、ページの一番上にある画面に移動する必要があります。現時点では、スライダーの画像を画面の画像に入れるのに苦労しています。

HTML:

<div class="top" >
<img src="screen.png" style="margin-top: 0px; margin-bottom: 10px; " /> 
        <div class="slider">
            <img src="slide-1.png" alt=""  />
            <img src="slide-2.png" alt=""  />
            <img src="slide-3.png" alt=""  />
    </div>              
</div>

CSS:

#content { height: 800px; width: 1000px; float: left; display: block; margin-top: 20px; }
#content .top { width: 1000px; height: 300px; display: block; float: left; position: relative; margin-left: 20px; margin-top: 20px; }
#content .text3 { width: 200px; display: inline-block; margin-left: 20px; }
#content .text4 { width: 300px; height: 90px;margin-bottom: 10px; }
#content .face { width: 300px; height: 300px; display: block; float: left; position: relative; margin-top: 20px; }
#content .bottom { width: 1000px; height: 400px; display: block; float: left; position: relative; margin-left: 0px; margin-top: 45px; }
#content .box1 { width: 236px; height: 350px; background:url(box1.png) no-repeat; display: block; float: left; position: relative; margin-left: 0px; margin-top: 20px; }
#content .box2 { width: 236px; height: 350px; background:url(box2.png) no-repeat; display: block; float: left; position: relative; margin-left: 17px; margin-top: 20px; }
#content .box3 { width: 236px; height: 350px; background:url(box3.png) no-repeat; display: block; float: left; position: relative; margin-left: 17px; margin-top: 20px; }
#content .box4 { width: 236px; height: 350px; background:url(box4.png) no-repeat; display: block; float: left; position: relative; margin-left: 17px; margin-top: 20px; }
#content .slider { width: 360px; height: 235px; margin-left: 60px; margin-top: 40px; overflow: hidden; }

ここに私のコード全体があります：

HTML:リンク

CSS:リンク

nivo スライダーを正しく動作させるにはどうすればよいですか?

このサイトのリンクから Javascript と CSS を使用しました

4

2 に答える 2

1

ヘッダーで初期化#sliderしていますが、div はclass="slider" ID に変更するか、ID を適切なクラスに切り替えます

/ **編集済み** /

CSS を次のように変更します。

#content .slider {
width: 350px;
height: 235px;
margin-left: 60px;
margin-top: 40px;
overflow: hidden;
position: absolute;
top: 12px;
right: 133px;
}
于 2013-07-22T18:23:03.897 に答える