DatoriProgrammēšana

Padarīt horizontālu izvēlni vietni pats

Horizontālā izvēlne ir gandrīz jebkurā vietā, - tā ir svarīga sastāvdaļa, jo tas var ar savu izskatu un lietojamību, lai piesaistītu vai, gluži otrādi, atbaidīt apmeklētājiem. Let 's uzzināt, kā izveidot elementāru horizontālu izvēlni: padarīt to "skeletu" HTML, apgūt pamata prasmes radīt. Jūs noteikti var atrast gatavu ēdienkarti, bet daudz jaukāk, lai uzzinātu, kā attīstīt to pats. Tas ir diezgan jautri.

Uzziniet, kā padarīt izvēlni

Mēs cenšamies nenovirzīties no semantiku, kas stingri jāievēro vadošajām figūrām izkārtojumu. Vispirms jums ir, lai "skelets", mūsu izvēlņu HTML, apgūt pamatiemaņas, lai padarītu savus horizontālās izvēlnes. Un tad tas būs rotā, izmantojot stila lapas. Ļaujiet mūsu horizontālā izvēlne satur 5 pozīcijas. Pirmais punkts tiks novirzīts uz sākumlapu. Otrais punkts - "Par mums". Trešais - "Mūsu balvas". Ceturtais - "Tas ir jautri." Piektais - "Sazināties ar mums".

HTML kods izskatās šādi:

Kurš nezina: ul tags izmanto lodi, tā elementi sākas ar li. Li tags mantot stilus, kas ir piemēroti, lai ul.

Ul - saraksta bloka elements, tas tiks izstiepts platumu. Li ir arī bloks.

Tātad, izveidot index.html. Mēs apkopojam mūsu kodu. Šajā brīdī, pārlūkprogramma parāda vertikāla, nevis horizontāla izvēlnē. Bet mēs ar jums mērķi - veikt horizontālu izvēlni vietā. Lai to izdarītu mums ir nepieciešams CSS.

Kas ir CSS?

Ja jums ir vēl apgūt attīstību vietām, ir nepieciešams iepazīties ar jēdzienu Cascading Style Sheets. Patiesībā, tie ir noteikumi par formatēšanas, apstrādei, kas ir piemēroti dažādiem elementiem lapām tīmekļa vietnē. Ja mēs raksturotu elementiem standarta HTML, jums nāksies atkārtot vairākas reizes, jūs saņemsiet to pašu gabalu koda dublēšanos. lapas ielādes laiks uz lietotāja datora augs. Lai no tā izvairītos, ir CSS. Pietiek aprakstīt tikai vienu reizi noteiktu elementu, un pēc tam vienkārši norāda, kur izmantot īpašības konkrētā stilā. Ir iespējams veikt aprakstu ne tikai teksta pašas lapas, bet arī kādā citā failā. Tas ļaus piemērot aprakstu dažādu stilu visās vietnes lapās. Tas ir arī ērti mainīt dažas lapas, modificējot CSS-failu. Stilu lapas ļauj jums strādāt ar fontiem par labāku līmenī nekā HTML, palīdzot izvairīties pasliktinot grafikas lapas vietā.

Izmantojot Style Sheets uz izvēlnes attīstībai

CSS-kods izvēlni:

  1. # My_1menu {list-style: none; padding: 6; platums: 800 x; margin: auto;}
  2. # My_1menu li {float: left; font: italic 18px Arial;}
  3. # My_1menu ir ietvertas {color: # 756; display: block; augstums: 55px; line-augstums: 55px; padding: 0px 15px 0px 15px; fons: #dfc; text-decoration: none;}
  4. # My_1menu a: hover {krāsa: #foa; fons: # 788;}

Tagad aplūkosim iegūto horizontālā CSS izvēlnes.

# My_1menu - tā ir stils cesija UL- elements ar id = my_1menu, saraksta stila: nav - tas komandu, lai novērstu preču zīmes, ko atstāj plānoto posteņiem.

platums: 800px - platums Ēdienkartē ir 800 pikseļi.

padding: 0 - tas novērš polsterējums iekšpusē.

margin: auto - vyravnivnie horizontālo izvēlni centrā mūsu lapā.

# My_1menu li - piešķirot stilu Li-elementiem.

augstums: 55px - menu augstums.

# My_1menu a: hover - piešķirot stilus elementu, un, kad tas tiek izraisīta pele.

Mēs ne detalizēti aprakstīt katru līniju, jo katrs izstrādātājs var norādīt savus parametrus šeit. Šis pamats izmantošanai stilu izvēlnē mājas lapā. Jūs varat dot tai vēl gatavo un skaistu izskatu, izmantojot attēlus. Piešķirt elements, bet, piemēram, fona: url (img1.png) atkārtot-x. Pieņemsim, ka ir fons: url (img2.png) atkārtot-x, lai: karāšanās.

Izmantojiet savu iztēli, radošajām vēlmēm. Tad, balstoties uz šīm zināšanām par to, kā izveidot vienkāršu izvēlni mājas lapā, jūs varat izveidot lapu ar savu unikālo dizainu.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 lv.atomiyme.com. Theme powered by WordPress.