WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS   Ingyenes elektronikus tananyag interaktív
weboldalak készítéséhez.
Custom Search
 
vissza VISSZA    
menü MENÜ    
ismét ISMÉT    
tovább TOVÁBB    

Link elem csinosítása



A link elemet a menüben inline-block elemként formázzuk. Ízlés szerint kap szegélyt és árnyékot.

A 2. példánál a link elem egyes állípotainak megkülönböztetéséről gondoskodunk.

1. Példa:

Forráskód


...<style type="text/css"> 
 /* A link elem csinosítása  */
  #menu li a { display: inline-block; background-color:#662210; 
    width: 110px; height: 24px; border-radius: 1px  1px 15px 1px; 
    text-align:center; border-right:1px solid #ccbbaa; 
    border-bottom:1px solid #ffaaaa; border-top:1px solid #bb8866; 
    box-shadow: 3px 3px 5px 0px #441108;} 
</style>   ....
<body>
...  
</body> 

Eredmény*

2. Példa:

Forráskód


...<style type="text/css"> 
/* A link felírat csinosítása  */
  #menu  li a:link,  #menu  li a:visited {color:#ffddcc;
    font:  14px/24px Verdana, Geneva, sans-serif; 
    text-decoration:none; }

/* A link állapotainak megkülönböztetése  */
  #menu  li a:hover {color:#ffeedd; background-color:#883218; 
    text-decoration:none;} 
  #menu  li a:active {color:#ffeedd; background-color:#883218;
    border-bottom:2px; border-top:2px; padding-top:1px; font-size:13px; }
</style>   ....
<body>

....
</body> 

Eredmény*


* Az eredmény megjelenítése az Ön által használt böngészőtől függ.
A példakód külön ablakban is megtekinthető: webshop_menu_5.html