0 
<div style="width: 600px;">  
    <div class="header">
    <img src="logo.png"/>
</div>


<div class="container">
    <div class="div1">Div 1</div>
    <div class="div2">Div 2</div>
    <div class="div3">Div 3</div>
    <div class="div4">Div 4</div>
    <div class="div5">Div 5</div>
</div>


.header
{
    height:200px;
    background-image: url('http://www.imgur.com/YLVpI.png');
    margin:0;
    width:100%;
    background-position:left;  
}
.header img
{
    margin-left:auto;
    margin-right:auto;
}
.container .div1
{
    background-color: black;
    background-position:left;  
    float:left;
    width:20%;
    margin: 0px;

}
.container .div2
{
    background-image: url('http://www.imgur.com/YLVpI.png');
    background-position:left;  
    float:left;
    width:100px;
    margin:0; padding:0;
    border-bottom-left-radius: 20px;
}
.container .div3
{
    background-image: url('http://www.imgur.com/YLVpI.png');
    background-position:left;  
    float:left;
    margin:0; padding:0;
}
.container .div4
{
    background-image: url('http://www.imgur.com/YLVpI.png');
    background-position:left;  
    float:left;
    width:100px;
    margin:0; padding:0;
    border-bottom-right-radius: 20px;
}
.container .div5
{
    background-color: black;
    float:left;
    display:inline-block; width:90px;
    width:20%;
    margin:0;
}

同時に仕事をすることができないことがいくつかあります。

  1. ヘッダースパンをページ幅の100％にします。
  2. div2と4をそれぞれ30pxの設定幅にします。
  3. div3を400pxの設定幅にします。
  4. ウィンドウの大きさに関係なく、div1と5が残りのスペースを埋めるようにします。
  5. すべてを中央に配置して、見栄えを良くします。
  6. 背景を正しく揃えます。

誰かがこれを行う方法を知っていますか？http://jsfiddle.net/jaTuu/

4

2 に答える 2

0

私の知る限り、あなたは自分で5を解決しました。私が知る限り、余分なものがなければ、4番を実行するにはJavascriptが必要です。あなたの画像にアクセスせずに6を試すことはできません。それでも、自分で解決できると思います。

以下は私があなたのコードを与えられて思いついた解決策です：

<div id="header_container" style="width: 600px;">

    <div class="header">
    <img src="logo.png"/>
</div>


<div class="container"><div class="div1">Div 1</div><div class="div2 width30">Div 2</div><div class="div3 width300">Div 3</div><div class="div4 width30">Div 4</div><div class="div5">Div 5</div>
</div> 
*
{
    padding:0;
    margin:0;
}

#header_container {
    background-color: #000;
    min-width: 100%;
}

.width30 {
    width: 30px;
}

.width300 {
    width: 300px;
}

.header
{
    height:200px; 
    background-image: url('http://www.imgur.com/YLVpI.png'); 
    margin:0;
    background-position:left;  
}
.header img
{
    margin-left:auto; 
    margin-right:auto;
}
.container
{
    text-align:center;
}
.container .div1
{
    background-image: url('http://www.imgur.com/YLVpI.png');
    background-position:left;  
    display:inline-block; 
    background-color: yellow;
    width:90px;
    border-bottom-left-radius: 20px;
}
.container .div2
{
    background-image: url('http://www.imgur.com/YLVpI.png');
    background-position:left;  
    background-color: purple;
    display:inline-block; 
    /*width:90px;*/
    margin:0; padding:0;
}
.container .div3
{
    background-image: url('http://www.imgur.com/YLVpI.png');
    background-position:left; 
    background-color: green;    
    display:inline-block; 
    /*width:90px;*/
}
.container .div4
{
    background-image: url('http://www.imgur.com/YLVpI.png');
    background-position:left; 
    background-color: blue;    
    display:inline-block; 
    /*width:90px;*/

}
.container .div5
{
    background-image: url('http://www.imgur.com/YLVpI.png');
    background-position:left;
    background-color: orange;    
    display:inline-block; 
    width:90px;
    border-bottom-right-radius: 20px;
}

ここで注意すべき点がいくつかあります。

要素名を区別したい場合は、上記のようにサイズを定義するクラスを追加することで、アイテムの幅を変更できます。その場合、私が行ったように、CSSで要素を定義するときに要素の幅を削除する必要があります（これも上に表示されています）。

もう1つの注意：ナビゲーションメニューを実行しようとしているようです。その場合は、リストを使用してアイテムを表す方がよい場合があります。

于 2012-10-05T04:34:49.313 に答える
0

すべての背景画像を中央に配置してみてください。

background: url('http://www.imgur.com/YLVpI.png') center center;

このデモのように：http：//jsfiddle.net/ongisnade/PThcc/

于 2012-10-05T06:57:20.243 に答える