 |
|
 |
 |
| Subiectul anterior :: Subiectul urmator |
| Autor |
Mesaj |
Admin
Administrator
Data inscrierii: 07/Dec/2013
Mesaje: 44
|
 Trimis: 22/01/2017 18:25 Titlul subiectului: Meniuri 1 |
|
|
| Citat: |
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 colorație 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 concluzie de buton
Culoare text neagra
Bordura se inverseaza pentru a crea impresia de apasare
 |
|
|
| Sus » |
|
|
|
|
|
Nu puteti crea un subiect nou in acest forum
Nu puteti raspunde in subiectele acestui forum
Nu puteti modifica mesajele proprii din acest forum
Nu puteti sterge mesajele proprii din acest forum
Nu puteti vota in chestionarele din acest forum
|
|
 |
|
|
 |
|
