Rāmji, kas izvietoti ap attēliem vai tekstu, rotā vietni un piešķir tās dizainam daudzveidību. Ja robežu izveidošanai izmantojat tabulas, katras apmales kods aizņem pārāk daudz vietas. Turklāt šajā gadījumā jums būs jāpārraksta HTML kods katram kadram. Izmantojot CSS, jūs varat viegli izveidot jebkura veida biezumu un krāsu robežu, vienreiz uzrakstot vienkāršu kodu visiem elementiem, kurus ieskauj šī apmale. Šī tehnoloģija ļaus vajadzības gadījumā pāris minūšu laikā mainīt vietnes rāmju tipu.
Tas ir nepieciešams
- - ir sava vietne;
- - zināt, kas ir CSS un kur šie stili ir rakstīti vietnē.
Instrukcijas
1. solis
Lai izveidotu apmali, vispirms CSS ierakstiet šādu kodu:
ramka {}
2. solis
Lai apmali padarītu par vajadzīgo izmēru, izmantojiet parametru border-width, kas līnijas platumu nosaka pikseļos. Piemēram, ja rāmja līnijai jābūt 3 pikseļu platai, ieraksts izskatīsies šādi:
ramka {apmales platums: 3 pikseļi;}
3. solis
Tagad definējiet apmales stilu, izmantojot robežas stila parametru. Ja vēlaties izveidot apmali, kuras malas ir regulāras cietas līnijas, ievietojiet kodu starp cirtainajām lencēm - border-style: solid.
4. solis
Punktu apmali var iegūt, rakstot to šādi: apmales stils: punktots. Pārbaudot apmales stilu: ar pārtraukumiem jūs iegūsiet punktētu robežu.
5. solis
Apmali var padarīt par dubultu stabilu līniju šādi: apmales stils: dubultā. Izmantojiet robežu stilu: gropi vai apmales stilu: gredzens, lai tekstu vai attēlus rāmjos ar 3D blakusparādībām. Atšķirība starp šīm divām iespējām ir tāda, ka pirmajā gadījumā rāmis sastāv no ievilktām līnijām, bet otrajā - izliektām.
6. solis
Izmantojiet šo kodu: border-style: inset, lai izveidotu ieliktņa efektu ar vietnes elementa robežu. Lai padarītu robežas saturu kopā ar apmali, gluži pretēji, izliektu, uzrakstiet border-style: outset.
7. solis
Jūs varat pievienot vēlamo krāsu rāmim, izmantojot apmales krāsas parametru, kas arī novietots starp cirtainajām lencēm. Ja vēlaties padarīt apmali sarkanu, tad uzrakstiet apmales krāsu: sarkanu, zilu - apmales krāsu: zilu, oranžu - apmales krāsu: oranžu.
8. solis
CSS robežas kods, ieskaitot visas opcijas, izskatās šādi:
ramka {apmales platums: 3px; robežas stils: ciets; apmales krāsa: zila;}
9. solis
Tagad HTML rakstiet:
Rāmja saturs Frāzes "Rāmja saturs" vietā ievietojiet vajadzīgā attēla tekstu vai kodu.
10. solis
Tādējādi vietnē varat izveidot neierobežotu elementu skaitu. Lai mainītu rāmja izskatu, jums jāmaina tikai CSS kods.
