Creați caseta pe pagina web

  • 34 acțiuni
  • Facebook
  • Stare de nervozitate
  • pinterest

Deși știm că sunt mulți care astăzi folosesc managerii de conținut pentru a-și întreține site-ul web, mai există webmasteri care fac muncă personalizată. Paginile site-ului dvs. au o notă personală. Poate fi atractiv pentru vizitator să vadă o parte din conținutul dvs. încadrată. Pentru a face acest lucru, este necesar să creați o casetă care, în cazul pe care o să-l explic, să folosească un tabel care este susținut de o clasă creată ca stil CSS.

Pentru a face acest lucru, este mai întâi necesar să creați o clasă care va fi salvată, așa cum am spus, ca stil CSS. Această clasă ar avea următoarea structură:

.caseta { background-color: White; chenar: 1px solid #c0c0c0; umplutură: 2px 2px 2px 2px; }

Numele clasei este cutie. În ea sunt definiți trei parametri:

  1. culoare de fundal: culoarea de fundal a cutiei, care în acest caz este albă.
  2. frontieră: marginea casetei care are o grosime de un pixel și o culoare de cod hexazecimal #c0c0c0 (gri deschis).
  3. căptușeală: indică separarea dintre chenar și interior, zona în care merge conținutul. În cazul nostru este de 2 pixeli pe toate cele patru laturi.

Pentru a apela această clasă putem folosi două metode. Intrarea în zonă

din document, definiția după cum urmează:

.caseta { background-color: White; chenar: 1px solid #c0c0c0; umplutură: 2px 2px 2px 2px; }

Sau creați o foaie de stil, dacă nu aveți una deja creată, și introduceți definiția clasei în ea cutie. Dacă foaia respectivă este numită stiluri.css și rămâne în folder stiluri, trebuie să-l numești în documentul tău, tot în zonă

Ceea ce trebuie să faci acum este să folosești stilul din pagina sau paginile tale. Pentru aceasta vom crea un tabel care servește la păstrarea conținutului. Ceva de genul următor:

Iată conținutul

Valoarea lățimii, care în acest caz este de 100%, poate fi adaptată nevoilor noastre. Putem folosi valori relative (100%, 90%

) sau absolută (750px, 400px

).

Da, personalizăm Iată conținutul, am putea obține ceva ca ceea ce este arătat în imaginea de la începutul articolului. Adaptează-l la nevoile tale. Rețineți că pe aceeași pagină puteți crea mai multe casete folosind o singură definiție a clasei.

  • 34 acțiuni
  • Facebook
  • Stare de nervozitate
  • pinterest

Lasă Un Comentariu

Please enter your comment!
Please enter your name here