Informatica
Programare - Software - Web Design
|
Nou pe simpatie:
Alexandra21 pe Simpatie
 | Femeie
24 ani
Calarasi
cauta Barbat
24 - 53 ani |
|
|
InformaticaInregistrareLoginPozeNu sunteti logat. Lista Forumurilor Pe Tematici
|
| #1 |
 AdminAdministrator
Postari: 315
|
|
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 realizat cu ajutorul 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 multe 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 partea care e mai mare
Un galben pentru text
Si neon pentru span
|
|
|
| |
|
