dl+ol aplikasi analisis_pertukaran pengalaman-tutorial css-php.cn

dl+ol aplikasi analisis_pertukaran pengalaman

WBOY

Lepaskan： 2016-05-16 12:08:37

asal

1799 orang telah melayarinya

Tajuk: Latihan dl+ol
Pengarang: Aoao

Kali lepas li simulasi dl~dl tak tahu nak buat apa~Saya minta ol buat senarai kompaun bersama-sama~

Ini Selain berlatih css, saya juga menggunakan beberapa JS
Mari kita lihat demo hodoh dahulu kerana saya terlalu malas baru-baru ini dan tidak membuat gaya yang cantik

dt  
{  
    width:120px;  
    height: 32px;  
    line-height: 32px;  
    text-align: center;  
}  
dt a  
{  
    display: block;  
    text-decoration: none;  
}  
dt.ing a  
{  
    background:#efefef;  
}  
dd  
{  
    position: absolute;  
    display: none;      
    width:280px;  
    background-color: #fff;

}  
dd li  
{  
    line-height: 16px;  
    list-style-type: none;  
    text-align:right;  
    color:#999;  
}  
dd li a  
{  
float:left;  
display:inline;  
padding-left:5px;  
}  
dd.ing  
{  
    display: block;  
}  
dd.no  
{  
    display:none;  
}  
dd#d1  
{  
    margin-top:-32px;  
    margin-left:120px;  
}  
dd#d2  
{  
    margin-top:-64px;  
    margin-left:120px;  
}  
dd#d3  
{  
    margin-top:-96px;  
    margin-left:120px;

}  
dd#d4  
{  
    margin-top:-128px;  
    margin-left:120px;  
}  
</style>

<dl>
<dt id="t1">
    <a href="#" onmouseover="return show('1');"></a>Menu Ujian 1</dt>
<dd id="d1">
    <ol>
        <li>
            <a href="#"></a>Kandungan ujian (Menu 1)</li>1-24<li>
            <a href="#"></a>Kandungan ujian (Menu 1)</li>1-24<li>
            <a href="#"></a>Kandungan ujian (Menu 1)</li>1-24<li>
            <a href="#"></a>Kandungan ujian (Menu 1)</li>1-24<li>
            <a href="#"></a>Kandungan ujian (Menu 1)</li>1-24<li>
            <a href="#"></a>Kandungan ujian (Menu 1)</li>1-24<li>
            <a href="#"></a>Kandungan ujian (Menu 1)</li>1-24<li>
            <a href="#"></a>Kandungan ujian (Menu 1)</li>1-24</ol>
        </dd>

<dt id="t2" class="ing">
    <a href="#" onmouseover="return show('2');"></a>Menu Ujian 2</dt>
<dd id="d2" class="ing">
    <ol>
        <li>
            <a href="#"></a>Kandungan ujian (menu 2)</li>1-24<li>
            <a href="#"></a>Kandungan ujian (menu 2)</li>1-24<li>
            <a href="#"></a>Kandungan ujian (menu 2)</li>1-24<li>
            <a href="#"></a>Kandungan ujian (menu 2)</li>1-24<li>
            <a href="#"></a>Kandungan ujian (menu 2)</li>1-24<li>
            <a href="#"></a>Kandungan ujian (menu 2)</li>1-24<li>
            <a href="#"></a>Kandungan ujian (menu 2)</li>1-24<li>
            <a href="#"></a>Kandungan ujian (menu 2)</li>1-24</ol> </dd>
    <dt id="t3">
    <a href="#" onmouseover="return show('3');"></a>Menu ujian tiga</dt>
<dd id="d3">
    <ol>
        <li>
            <a href="#"></a>Kandungan ujian (menu tiga)</li>1-24<li>
            <a href="#"></a>Kandungan ujian (menu tiga)</li>1-24<li>
            <a href="#"></a>Kandungan ujian (menu tiga)</li>1-24<li>
            <a href="#"></a>Kandungan ujian (menu tiga)</li>1-24<li>
            <a href="#"></a>Kandungan ujian (menu tiga)</li>1-24<li>
            <a href="#"></a>Kandungan ujian (menu tiga)</li>1-24<li>
            <a href="#"></a>Kandungan ujian (menu tiga)</li>1-24<li>
            <a href="#"></a>Kandungan ujian (Menu 3)</li>1-24</ol> </dd>
    <dt id="t4">
    <a href="#" onmouseover="return show('4');"></a>Menu ujian empat</dt>
<dd id="d4">
    <ol>
        <li>
            <a href="#"></a>Kandungan ujian (Menu 4)</li>1-24<li>
            <a href="#"></a>Kandungan ujian (Menu 4)</li>1-24<li>
            <a href="#"></a>Kandungan ujian (Menu 4)</li>1-24<li>
            <a href="#"></a>Kandungan ujian (Menu 4)</li>1-24<li>
            <a href="#"></a>Kandungan ujian (Menu 4)</li>1-24<li>
            <a href="#"></a>Kandungan ujian (Menu 4)</li>1-24<li>
            <a href="#"></a>Kandungan ujian (Menu 4)</li>1-24<li>
            <a href="#"></a>Kandungan ujian (Menu 4)</li>1-24</ol> </dd>
    </dl>