[ Jaunas vēstules · Dalībnieki · Foruma noteikumi · Meklēšana · RSS ]
  • Lappuse 1 no 1
  • 1
Iizveide spīdīga CSS izvēlni
groawnDatums: Sestdiena, 2012-02-18, 6:04 PM | Numurs # 1
Pakāpe: Moderators
Entries: 7
Balvas: 1
Reputācija: 0

Ēdienkarte ir svarīga daļa no web dizaina, tā vienkāršā iemesla dēļ, ka, ja nav izvēlnes, apmeklētāji gandrīz nevar darīt kaut ko uz vietas. Ir svarīgi, ka ēdienkarte izskatījās labi un bija pieejams apmeklētājiem jūsu vietnē, visticamāk, jūs nevēlaties, lai būtu Flash izvēlni kā galveno izvēlni, jo, ja šāds lietotājam nebūs Flash Player uzstādīta, viņš neredzēs to).

Par laimi, tur ir CSS, ar kuru jūs varat izveidot skaistas pilnībā pārrobežu pārlūku izvēlnē.

Vispirms jums nepieciešams Lejupielādēt šo arhīvu!

CSS Izvēlne, kuras pamatā:
Code
# Navigācija {  
platums: 950px;  
augstums: 50px;  
margin: 0;  
padding: 0;  
fona bildi: url (attēlu skaits navigation_bar.jpg);  
background-repeat: no-repeat;  
Fona-position: kreisā augšējā;  
}  
# navigācija ul {  
list-style: none;  
margin: 0;  
padding: 0;  
}  
# navigācija ul li {  
displejs: inline;  
margin: 0px;  
}  
# navigācija ul li {  
augstums: 28px;  
display: block;  
float: left;  
krāsa : # 333.333;  
teksta noformējums: none;  
font-family: Arial;  
font-size: 12px;  
font-weight: bold;  
fona bildi: url (attēlu skaits menu_separatorline.jpg);  
background-repeat: no-repeat;  
Fona pozīciju: labi centrs;  
padding-top: 17px; polsterējumu labo: 15px;  
polsterējumu-bottom: 0;  
padding-left: 15px;  
}      
# navigācija ul li: hover {  
color: # FFF;  
fona bildi: url ( attēlu skaits button_hover.jpg);  
Background-atkārtojiet: Atkārtotu x;  
Fona-position: kreisā augšējā;  
}      
# navigācija ul li # aktīvs {  
color: # FFF;  
fona bildi: url (attēlu skaits button_hover.jpg);  
Pamatinformācija -repeat: Atkārtotu x;  
Fona-position: kreisā augšējā;  
}


Tas ir pamats izvēlnē. Atcerieties, ka pienācīgai darbībai vajadzīgās izvēlnes nepieciešams lejupielādēt nepieciešamo izobrazheniya.Teper mums vienkārši ir jānorāda div id = "Navigācijas" mūsu html.

[Tabula] Piezīme no tulkotāja:
Viss nepieciešamais attēls, kuru var iegūt, lejupielādējot pirmkods šo pamācību. Ir iekļauti arī attēli faili style.css un index.html satur nepieciešamo kodu. Autors min Uz apmācību, tikai par to, ka html kodu, jums jānorāda div id = "Navigācijas", bet gan visu izvēlni, html kods ir šāds: [/ Galda]
Code
<div id="navigation">  
<ul>  
<li> <a href= "#"> Sākums </ a> </ li>  
<li id="active"> <a href="#"> Par mums < /> </ li>  
<li> <a href="#"> Serviss </ a> </ li>  
<li> <a href="#"> Portfolio </> </ li>  
<li> <a href="#"> Klienti </> </ li>  
<li> <a href="#"> Jaunumi un Notikumi </> </ li>  
<li> <a href="#"> sazinieties </> </ li>  
</ ul>  
</ div>


Tā rezultātā, jums ir skaists spīdīgs CSS menu.


  • Lappuse 1 no 1
  • 1
Meklēšana: