⭐ 0
🔍
Tekstas Vaizdas PDF ir dokumentai Garsas Muzika Elektronika Laikas Komunalinės paslaugos Validatoriai Ezoterinis Žaidimai

Šoninė juosta + turinio CSS tinklelio išdėstymas

Sukurkite CSS tinklelio išdėstymą vizualiai: nustatykite stulpelius, eilutes ir tarpus, tada įveskite sričių pavadinimus į langelius, kad sukurtumėte tinklelio šablono sritis – su tiesiogine peržiūra ir kopijuojamu CSS ir HTML.

Įveskite pavadinimą į bet kurį toliau esantį langelį; langeliai tuo pačiu pavadinimu susilieja į vieną tinklelio-šablono sričių sritį.

Apdorojama... 0%

Rezultatas

Šiame puslapyje atidaromas tinklelio generatorius su jau pavadintu dviejų stulpelių vienos eilutės išdėstymu: 200 pikselių šoninės juostos stulpelis šalia lankstaus turinio stulpelio, kuris užima likusią vietą. Abi sritys matomos tiesioginėje peržiūroje iš karto, nuspalvintos ir pažymėtos etiketėmis, kad padalijimas būtų akivaizdus iš pirmo žvilgsnio.

Tai yra labiausiai paplitusi naršymo ir turinio forma žiniatinklyje – nustatymų puslapiai, dokumentacijos svetainės ir administratoriaus prietaisų skydeliai remiasi į fiksuoto pločio bėgelį šalia sklandaus pagrindinio ploto. Kadangi šoninės juostos stulpelyje naudojama pikselio reikšmė, o turinio stulpelyje – 1fr, šoninės juostos plotis išlieka pastovus, o turinio stulpelis sugeria kiekvieną papildomą peržiūros srities pikselį.

Pervardykite bet kurią sritį, pakeiskite stulpelio plotį arba pridėkite daugiau eilučių antraštei virš padalijimo – žemiau esanti CSS ir HTML išvestis stebi kiekvieną pakeitimą realiuoju laiku. Įrankis yra nemokamas ir veikia tik jūsų naršyklėje, neįkeliant ir be paskyros.

🛡️
Vykdoma naršyklėje

Jūsų failai ir įvestis niekada nepalieka šio įrenginio. Apdorojimas vykdomas visiškai neprisijungus. 100% saugus.

Priimami formatai ir taisyklės

  • 1–6 stulpelių ir eilučių skaičių įvestis, taip pat atskiri stulpelių tarpo ir eilučių tarpo valdikliai, kurie sutampa sujungiami į vieną tarpo reikšmę.
  • Pavadintų sričių režimas: įveskite srities pavadinimą tiesiai į bet kurį tiesioginio tinklelio langelį; įrankis sukuria galiojančią tinklelio šablono sričių eilutę ir įspėja, kai pavadinimai nesudaro švarių stačiakampių.
  • Kopijuojamas CSS blokas (rodymas: tinklelis, tinklelio šablono stulpeliai/eilutės, tarpas, tinklelio šablono sritys) ir atitinkamas HTML skeletas su vienu tinklelio srities div kiekviename pavadintame regione.

Pagrindiniai privalumai

✓ Įveskite pavadinimą tiesiai į bet kurį langelį ir atitinkantys pavadinimai susilieja į vieną tinklelio-šablono sričių sritį – jokio vilkimo pasirinkimo, kabučių eilutės sintaksės atspėjimo ranka.
✓ Tiesioginės peržiūros tinklelio dydis keičiasi ir keičia spalvas kiekvieną kartą pakeitus, todėl prieš nukopijuodami vieną CSS eilutę matote tikslius stulpelių ir eilučių takelius bei kiekvieną pavadintą regioną.
✓ Išankstiniai nustatymai, tokie kaip klasikinis šventojo gralio išdėstymas ir siaura šoninė juosta, suteikia jums tikrą, veikiančią tinklelio-šablono sričių deklaraciją, nuo kurios galite pradėti, o ne nuo tuščios tinklelio.

Naudojimo atvejai

  • • Sukurkite klasikinį Holy Grail puslapio apvalkalą – viso pločio antraštę ir poraštę su naršymo/pagrindine/šaline vidurine eilute – įvesdami sričių pavadinimus, o ne ranka rašydami tinklelio-šablono sritis.
  • • Šalia lankstaus turinio stulpelio išdėstykite nustatymų puslapį arba administratoriaus prietaisų skydelį su fiksuoto pločio šonine juosta ir nukopijuokite tikslų CSS ir HTML, kai tiesioginė peržiūra atrodys tinkama.
  • • Prieš išsiųsdami patikrinkite, ar pavadintų sričių rinkinys iš tikrųjų sudaro tinkamus stačiakampius – įrankis pažymi tikslius pavadinimus, kurie naršyklėje sulaužytų tinklelio šablono sritis.