Informatica
Programare - Software - Web Design
|
Nou pe simpatie:
andreutza43 pe Simpatie
 | Femeie
25 ani
Bacau
cauta Barbat
30 - 80 ani |
|
|
InformaticaInregistrareLoginPozeNu sunteti logat. Lista Forumurilor Pe Tematici
|
| #1 |
 AdminAdministrator
Postari: 315
|
|
Fisa 1
Cascading Style Sheet
#menu a, #menu a:visited
{
text-align:center;
text-decoration:none;
color:#000;
display:block;
width:7em;
height:1.2em;
border:0.5em solid #fff;
}
#menu a:hover
{
color:#fff;
background-color:#b2ab9b;
border-color:#dfd7ca #b2ab9b;
}
xhtml
<div id="menu">
<a href="#nogo">Item 1</a>
<a href="#nogo">Item 2</a>
<a href="#nogo">Item 3</a>
<a href="#nogo">Item 4</a>
<a href="#nogo">Item 5</a>
</div>
Pentru toate linkurile care se afla in interiorul elementelor cu id-ul ”menu”
E vorba de modul de vizualizare a link-urilor inainte de click si dupa click (a:visited)
Textul e pe centru
Nu este subliniat
Culoare neagra
Afisare tip block (vor fi unele sub altele)
Latime 7 em
Inaltime 1.2 em
Bordura desi definita este alba deci nu se vede
Pentru cazul in care mouse-ul este deasupra link-ului
Culoarea este alba
Background-ul este gri
Bordura de sus este gri deschis #dfd7ca iar cea din lateral gri mai inchis #b2ab9b
Menu two
CASCADING STYLE SHEET
#menu a, #menu a:visited
{
position:relative;
text-decoration:none;
text-align:center;
background-color:#9ab;
color:#fff;
display:block;
width:10em;
border:2px solid #fff;
border-color:#def #678 #345 #cde;
padding:0.25em;
margin:0.5em auto;
}
#menu a:hover
{
top:2px;
left:2px;
color:#fff;
border-color:#345 #cde #def #678;
}
XHTML
<div>
<a href="#nogo">Item 1</a>
<a href="#nogo">Item 2</a>
<a href="#nogo">Item 3</a>
<a href="#nogo">Item 4</a>
<a href="#nogo">Item 5</a>
</div>
Position relative - a:hover va fi situat in functie de a si atunci se specifica position relative (a:hover va fi relativ la a)
Nu este subliniat
Textul e pe centru
Culoarea fundalului #9ab
Culoare text neagra
Afisare tip block (vor fi unele sub altele)
Latime 10 em
Bordure 2pixeli neagra
Redefineste culoarea bordurii: sus #def dreapta #678 jos #345 stanga #cde
Spatiul lasat pana la bordura 0.25 em
Spatiul de la bordura in exterior 0.5 em (distanta dintre barele meniului fiind deci 0.5 em)
Pentru cazul in care mouse-ul este deasupra link-ului
2 pixeli mai jos si mai la stanga creaza un efect de buton
Culoare text neagra
Bordura se inverseaza pentru a crea impresia de apasare
|
|
|
| |
|
