Navigační lišta CSS

Navigační panel CSS - horizontální a vertikální.

Horizontální navigační lišta

Kód CSS:

<style>
    #h_nav_bar a {padding: 15px; font-weight: bold; plavat vlevo; }
    #h_nav_bar a: link {color: # d0d0d0; barva pozadí: # 0000a0; }
    #h_nav_bar a: Navštíveno {color: # c0c0c0; barva pozadí: # 0000a0; }
    #h_nav_bar a: hover {color: #ffffff; barva pozadí: # 000060; }
    #h_nav_bar a: active {color: # f0f0f0; barva pozadí: # 00ff00; }
</style>

HTML kód:

<div id = "h_nav_bar">
    <a href="/en/html-link/html-anchor-link"> Anchor link </a>
    <a href = "/ en / web-design / html / html-link / html-link-color "> Barva odkazu </a>
    <a href="/en/html-link/mailto-link"> E-mailový odkaz </a>
    < a href = "/ en / web-design / html / html-link / html-image-link"> Odkaz na obrázek </a>
    <a href = "/ en / web-design / html / html-link / link / html-text-link "> Textový odkaz </a>
</div>

Pohled:

 

#link_bar a je styl pro všechny stavy odkazu.

#link_bar a: link je styl běžného odkazu.

#link_bar a: Navštívené je styl navštíveného odkazu.

#link_bar a: hover je styl odkazu s myší.

#link_bar a: active je styl odkazu při stisknutí myší.

Vertikální navigační lišta

Kód CSS:

<style>
    #v_nav_bar a {padding: 15px; font-weight: bold; displej: blok; šířka: 120px; }
    #v_nav_bar a: link {color: # d0d0d0; barva pozadí: # 0000a0; }
    #v_nav_bar a: Navštíveno {color: # c0c0c0; barva pozadí: # 0000a0; }
    #v_nav_bar a: hover {color: #ffffff; barva pozadí: # 000060; }
    #v_nav_bar a: active {color: # f0f0f0; barva pozadí: # 00ff00; }
</style>

HTML kód:

<div id = "v_nav_bar">
    <a href="/en/html-link/html-anchor-link"> Anchor link </a>
    <a href = "/ en / web-design / html / html-link / html-link-color "> Barva odkazu </a>
    <a href="/en/html-link/mailto-link"> E-mailový odkaz </a>
    < a href = "/ en / web-design / html / html-link / html-image-link"> Odkaz na obrázek </a>
    <a href = "/ en / web-design / html / html-link / link / html-text-link "> Textový odkaz </a>
</div>

Pohled:

 

#link_bar a je styl pro všechny stavy odkazu.

#link_bar a: link je styl běžného odkazu.

#link_bar a: Navštívené je styl navštíveného odkazu.

#link_bar a: hover je styl odkazu s myší.

#link_bar a: active je styl odkazu při stisknutí myší.