0

私は自分の例を大きくするのが好きです。1つを大きくして、div1、div2、div3、およびdiv4の下に2つ以上の画像を並べて配置できるようにします。今のところ、例の幅は固定されているようで、幅を入れようとするたびにページが台無しになります。私はこれを理解することはできません。どんな助けでも大歓迎です。

css：

#example-one {
    background: inherit;
    padding: 10px;

    -moz-box-shadow: 0 0 5px #666;
    -webkit-box-shadow: 0 0 5px #666;
    margin: auto;

}

#example-one .nav {
    overflow: hidden;
    margin: 0 0 0 0;


}

    #example-one .nav li { width: 97px; float: left; margin: 0 10px 0 0; }
    #example-one .nav li.last { margin-right: 0; }
    #example-one .nav li a { display: block; padding: 5px; background: #959290; color: white; font-size: in; text-align: center; border: 0; }
    #example-one .nav li a:hover { background-color: #111; }

    #example-one ul { list-style: none; }
    #example-one ul li a { display: block; border-bottom: 1px solid #666; padding: 4px; color: #666; }
    #example-one ul li a:hover { background: #fe4902; color: white; }
    #example-one ul li:last-child a { border: none; }

    #example-one ul li.nav-one a.current, #example-one ul.featured li a:hover { background-color: #0575f4; color: white; }
    #example-one ul li.nav-two a.current, #example-one ul.core li a:hover { background-color: #d30000; color: white; }
    #example-one ul li.nav-three a.current, #example-one ul.jquerytuts li a:hover { background-color: #8d01b0; color: white; }
    #example-one ul li.nav-four a.current, #example-one ul.classics li a:hover { background-color: #FE4902; color: white; }

これはhtmlです：

<div id="example-one" style="margin: 0 auto;">

<ul class="nav" style="margin:auto;">
    <div id="tab-section" style="position:absolute;left:50%;">
    <li class="nav-one"><a href="#div1" class="current">Content1</a></li>
    <li class="nav-two"><a href="#div2">Content2</a></li>
    <li class="nav-three"><a href="#div3">Content3</a></li>
    <li class="nav-four last"><a href="#div4">Content4</a></li>
    </div>
</ul>
<ul id="div1">
    <li id="section1></li>
    <li id="section2></li>
    <li id="section3></li>
    <li id="section4></li>
</ul>
<ul id="div2" class="hide">
</ul>
<ul id="div3" class="hide">
</ul>
<ul id="div4" class="hide">
</ul>

4

2 に答える 2

1

HTML が無効です。uls はli子のみを持つ必要があり、lis はulorol親のみを持つ必要があります。

さらに、タグ</div2>を閉じるために使用しようとしましたが、閉じ引用符がありません。<div><div id="section1>

ネストされたリストは次のようになります。

<ul>
    <li>some optional text here
        <ul>
            <li>some more text</li>
            <li>some more text</li>
        </ul>
    </li>
</ul>

ulとはブロック レベルの要素であるためli、通常は . と組み合わせる必要はありませんdiv。スタイルをulまたはliに直接適用するだけです。

于 2013-02-27T16:52:07.413 に答える
0

あなたが何を探しているのか正確にはわかりませんが、私は次のことを行いました：

ここにフィドルがあります

最初に私はあなたのHTMLを変更しました - sould always close the " の
ようないくつかのエラーがありました - divの場所を変更したので、それらはタグ内にネストされ ません選択したので、背景画像のものを追加しました。<li id="section1></li><li id="section1"></li>
<ul>

ここでHTML：

<div id="example-one" style="margin: 0 auto;">

    <div id="tab-section" style="position:absolute;left:50%;">
        <ul class="nav" style="margin:auto;">  
            <li class="nav-one"><a href="#div1" class="current">Content1</a></li>
            <li class="nav-two"><a href="#div2">Content2</a></li>
            <li class="nav-three"><a href="#div3">Content3</a></li>
            <li class="nav-four last"><a href="#div4">Content4</a></li>
        </ul>
    </div>
    <ul id="div1" class="hide">
        <li id="section1">One</li>
        <li id="section2">Two</li>
        <li id="section3">Three</li>
        <li id="section4">Four</li>
    </ul>
    <div id="div2" class="hide" style="background-image:url('http://dribbble.s3.amazonaws.com/users/31348/screenshots/961313/dkng_shirt_2_1x.jpg')"></div>
    <div id="div3" class="hide" style="background-image:url('http://dribbble.s3.amazonaws.com/users/52758/screenshots/962057/new_york_ptiii_j_fletcher_1x.jpg')"></div>
    <div id="div4" class="hide" style="background-image:url('http://dribbble.s3.amazonaws.com/users/62174/screenshots/961388/aliens.jpg')" ></div>
</div>

そして、:targetセレクターを使用してエフェクトを有効にしていると想定したので、CSS を次のように変更しました。

#example-one {
    background: inherit;
    padding: 10px;
    height:300px;

    -moz-box-shadow: 0 0 5px #666;
    -webkit-box-shadow: 0 0 5px #666;
    margin: auto;
}

#example-one .nav {
    overflow: hidden;
    margin: 0 0 0 0;
}

#example-one .nav li { 
    width: 97px; 
    float: left; 
    margin: 0 10px 0 0;
}
#example-one .nav li.last { 
    margin-right: 0; 
}
#example-one .nav li a {
    display: block; 
    padding: 5px; 
    background: #959290; 
    color: white; 
    font-size: in; 
    text-align: center; 
    border: 0; 
}
#example-one .nav li a:hover { 
    background-color: #111; 
}

#example-one ul {
     list-style: none; 
}
#example-one ul li a { 
    display: block; 
    border-bottom: 1px solid #666; 
    padding: 4px; 
    color: #666; 
}
#example-one ul li a:hover { 
    background: #fe4902; 
    color: white; 
}
#example-one ul li:last-child a { 
    border: none; 
}
#example-one ul li.nav-one a.current,
#example-one ul.featured li a:hover { 
    background-color: #0575f4; 
    color: white; 
}
#example-one ul li.nav-two a.current, 
#example-one ul.core li a:hover { 
    background-color: #d30000; 
    color: white; 
}
#example-one ul li.nav-three a.current, 
#example-one ul.jquerytuts li a:hover { 
    background-color: #8d01b0; 
    color: white; 
}
#example-one ul li.nav-four a.current, 
#example-one ul.classics li a:hover { 
    background-color: #FE4902; 
    color: white; 
}

.hide{
    width:300px;
    height:300px;
    background-size:cover;
    background-position:center center;
    display:none;
}

#div1:target ,#div2:target, #div3:target, #div4:target{
    display:inline-block;
}

それが必要でない場合は、効果、 Js Fiddle、または Paint Brush の生の画像について、より詳細なフィードバックをお寄せください。

乾杯。

于 2013-02-27T17:45:10.947 に答える