 |
|
 |
 |
| Subiectul anterior :: Subiectul urmator |
| Autor |
Mesaj |
Admin
Administrator
Data inscrierii: 07/Dec/2013
Mesaje: 44
|
 Trimis: 22/01/2017 18:24 Titlul subiectului: Meniuri 2 |
|
|
| Citat: |
Fisa 2
Menu 3 neon
dl#artist dt
{
display:none;
}
dl#artist dd
{
padding:0;
margin:0;
}
a.xmenu, a.xmenu:visited
{
width:5em;
height:3em;
background:#000;
text-decoration:none;
text-align:center;
color:#aaa;
float:left;
}
a.xmenu span, a.xmenu:visited span
{
display:block;
width:3em;
height:0.5em;
border-top:0.5em solid #000;
border-left:1em solid #000;
border-right:1em solid #000;
border-bottom:0.5em solid #000;
background:#050;
overflow:hidden;
}
a.xmenu:hover
{
color:#ff0;
}
a.xmenu:hover span
{
background:#0f0;
}
xhtml
<dl id="artist">
<dt>Artists menu</dt>
<dd>
<a class="xmenu" href="#nogo">
<span></span>
Matisse
</a>
</dd>
<dd>
<a class="xmenu" href="#nogo">
<span></span>
Cezanne</a>
</dd>
<dd>
<a class="xmenu" href="#nogo">
<span></span>
Turner
</a>
</dd>
<dd>
<a class="xmenu" href="#nogo">
<span></span>
Monet
</a>
</dd>
<dd>
<a class="xmenu" href="#nogo">
<span></span>
Lowry
</a>
</dd>
</dl>
Meniul e creat cu susținerea dl (definition list)ce contine dt (definition term) urmat de dd(definition description) – se asemana putin cu tabelul
Se ascunde termenul definitiei (dt) (este unul singur)
Pot fi mai numeroase dd-uri pentru un acelasi dt.
Elementul de descriere a definitiei (dd) va avea padding 0 si margin 0, acesta va fi si tab-ul meniului
Link-urile din meniu care vor fi continute de dd-uri vor fi de clasa xmenu
Latime 5em, inaltime 3 em (dimensiunile tab-urilor)
Fundal negru
Text nesubliniat si centrat
Culoare text alba
Pozitionare spre stanga lucru care face ca tab-urile sa fie pe aceeasi linie orizontala (meniu orizontal)
Incercati sa scoateti proprietatea float: left sa vedeti ce effect are
Efectul neon este dat de un dreptunghi care este colorat neon in interiorul link-ului a cu ajutorul tag-ului span
Ca sa fie vizibil are display block (altfel ar dispare)
Latime si inaltime 3em si 0.5 em
Bordura este tot neagra si are rol de margin adica lasa un spatiu in jurul lui span.
Fondul lui span este un verde care se potriveste cu neon-ul
Daca span e mai inalt cu overflow:hidden ascundem porțiunea care e mai mare
Un galben pentru text
Si neon pentru span
 |
|
|
| 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
|
|
 |
|
|
 |
|
