logó WEBFEJLESZTÉS, WEBÁRUHÁZ KÉSZÍTÉS
Ingyenes elektronikus tananyag interaktív weboldalak készítéséhez.
visszaVISSZA   
menüMENÜ   

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 állapotainak 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


Ahogy a legtöbb honlap, ez a webhely is használ sütiket a weboldalain.