0

こんにちは、私は次のゲームのためにすぐに来るサイトを作っています、そして私はこれに何時間も苦労しています！http://endlessreturn.com/はサイトですが、基本的に、「トレーラーをチェックしてください」を実際のトレーラーに少し近づけることができますか？

    IMG.logo {
    display: block;
    margin-left: auto;
    margin-right: auto }

IMG.copyright {
    display: block;
    margin-left: auto;
    margin-right: auto }

.center
{
margin-left:auto;
margin-right:auto;
width:100%;
display: block;
background-image:url('/images/trailer.png');
background-repeat:no-repeat;

background-position:right; 
}

img.floatLeft { 
    float: left; 
    margin: 4px; 
}

body
{
background-image:url('/images/bg.gif');
background-repeat:repeat-x;
}


#wrapper {
    width: 467px;
    margin: 29px auto;
    }
#logo {
    height: 397px;
    text-indent: -10000px;
    margin-bottom: -135px;
    }

#form {
    width: 700px;
    margin: 25px auto 15px auto;
    }
form {
    background: url(/images/newsletter.png) no-repeat;
    height: 90px;
    }
input {
    background: none;
    border: none;
    outline: 0;
}
input.text {
    width: 400px;
    height: 75px;
    padding: 0px 0px 30px 90px;
    color: #505050;
    font-size: 16px;
    float: left;
    }
input.submit {
    width: 165px;
    height: 60px;
    padding: 50px 0 13px 10px;
    float: right;
    cursor: pointer;
    }.center iframe {
    text-align: center;
    float: none;
}



<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Endless Return - 2D MMORPG</title>
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
</head>
<body>

<IMG class="logo" src="/images/logo.png" alt="logo">
<div class="center">
<center><iframe src="http://www.youtube.com/embed/2IMOh6JAJkY" width="640" height="360" frameborder="0" allowfullscreen></iframe></center>

</div>
</div>
<IMG class="copyright" src="/images/copyright.png" alt="logo">
</body>
</html>
4

2 に答える 2

0

あなたはイメージし、CSS調整する必要があります。

div画像を少し大きくして、現在の背景として中央に配置し、ビデオの横に矢印とテキストを配置できるようにする必要があります。

1280px の画像を使用したこの例を参照してください。 ここに画像の説明を入力

この例では、ビデオの幅に対して十分な幅の画像を使用しています。

更新された CSS:

.center {
    background-image: url("/images/trailer.png")
    background-position: center center;
    background-repeat: no-repeat;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

そして、 1280pxの画像へwidthのリンク。

于 2012-05-22T22:55:27.287 に答える
0

右中央の代わりに x% y% を使用します。最初の値は水平位置で、2 番目の値は垂直位置です。左上隅は 0% 0% です。右下隅は 100% 100% です。1 つの値のみを指定すると、もう 1 つの値は 50% になります。. デフォルト値: 0% 0%

于 2012-05-22T22:57:20.403 に答える