Naudojame slapukus, kad pagerinti vartotojų patirtį svetainėje. Siekdami laikytis naujosios e. privatumo direktyvos, turime paprašyti jūsų sutikimo nustatyti slapukus. Sužinoti daugiau.
Svetainėje suprogramuoti stiliai
Tyrinėk ir naudok suprogramuotus svetainės stilius
Developed Typography elements
Explore developed styling theme posibilities
Šioje svetainėje yra sudėti visi suprogramuoti pagrindiniai HTML tekstiniai elementai, kokie stiliai yra pritaikyti tam tikriems elementams pačios svetainės stilistikos programavime. Kurdami naujus tekstus ir programuodami HTML kodą savo naujų puslapių elementų atvaizdavimui pasinaudokite šiais sutrumpinimais ir taip gausite atitinkamai vienodą vaizdą visuose naujai sukurtuose elementuose ir dar sutaupysite savo laiko programavimui (klasių sudėjimui). Žemiau galima rasti jau suprogramuotus pagal tam tikrą stilistiką elementus: įvairūs variantai antraščių, teksto bei mygtukų stiliai.
HTML
ELEMENTAI
Naudotini pavadinimų
stiliai
Šiame skyriuje galima matyti kaip atrodo tam tikros antraštės, tekstai bei mygtukai. Kiekvienas jų apžvelgiamas atskirai.
Heading2
Heading2 subtext komentarui
Tikros antraštės, tekstai, mygtukai bei blogo antraščių stiliai. Kiekvienas jų apžvelgiamas atskirai. Tikros antraštės, tekstai, mygtukai bei blogo antraščių stiliai. Kiekvienas yra geriausias
<h2 class="htitle">Title</h2>
<p class="hsubtitle">Subtitle</p>
Tekstai
Pagrindinis naudojamas tekstas
Po kiekviena antrašte tekstas atrodo kitaip. Žemiau atvaizduojama kaip atrodo tekstas bei kokiai antraštei jis skirtas. Taip pat nurodytos klasės pritaikytos paragrafui.
<p class="main-text">Pagrindinis naudojamas tekstas.</p>
Antraštės
Standartinės antraštės su heading elementais
Heading 1
<h1>Heading 1</h1>
Heading 2
<h2>Heading 2</h2>
Heading 3
<h3>Heading 3</h3>
Heading 4
<h4>Heading 4</h4>
Heading 5
<h5>Heading 5</h5>
Heading 6
<h6>Heading 6</h6>
Antraštės su naudojamomis klasėmis
Standartinės antraštės su heading elementais
Programinio kodo rezultatas
Matomas rezultatas, kuris gaunamas parašius html kodą tokia tvarka, kaip numatyta dešinėje pusėje.
Programinio kodo rašymo pavyzdys
Rašant html kodą numatyta tvarka bus matomas suprogramuotas kodas, kuris yra atvaizduotas kaip kairėje pusėje.
H1 Heading
HTML susideda iš daugybės elementų, kurie naudojami skirtingoms turinio dalims įterpti arba apipavidalinti, kad jos tinkamai atrodytų arba veiktų tam tikru būdu. Pridedamos žymos gali sukurti žodžio ar vaizdo nuorodą į kažkur kitur, rašyti žodžius kursyvu, paryškinti šriftą arba jį sumažinti ir pan.
<h1>H1 Heading</h1>
<p>HTML susideda ... <a href="#">nuorodą</a> ... <em>rašyti žodžius kursyvu</em>, <strong>paryškinti šriftą</strong> arba <small>jį sumažinti</small>
H2 Heading
Antraštės elementas apima visus šrifto pakeitimus, pastraipos lūžius prieš ir po bei bet kokį tuščią tarpą, reikalingą antraštei pateikti.
<h2 class="mb-15">H2 Heading</h2>
<p class="ls-0">Antraštės elementas apima...</p>
H3 Heading
Antraštės elementai yra H1, H2, H3, H4, H5 ir H6, kur H1 yra aukščiausias (arba svarbiausias) lygis, o H6 – mažiausias.
<h3 class="ls-n-50 mb-05">H3 Heading</h3>
<p class="pic-category-info mb-1">Antraštės elementai yra...</p>
H4 Heading
Jei norite, kad dokumento hierarchinė struktūra būtų aiški, naudokite elementą DIV kartu su antraštės elementais.
<h4 class="review-name">H4 Heading</h4>
<p class="quotes mb-0">Jei norite, kad...</p>
H5 Heading
Antraštės elementai turi tą patį turinio modelį kaip ir pastraipos, tai yra teksto ir simbolių lygio žymėjimas, pvz., simbolių paryškinimas, įterptieji vaizdai, formos laukai ir matematika.
<h5 class="sec-text mb-0">H5 Heading</h5>
<p class="text-h5">Antraštės elementai turi...</p>
H6 Heading
Antraštės vaidina susijusį vaidmenį su sąrašais struktūrizuojant dokumentus, taip pat įprasta numeruoti antraštes arba įtraukti grafiką, kuris sąrašuose veikia kaip ženklelis.
<h6>H6 Heading</h6>
<p class="category-info category-info-prop category-info-type">Antraštės vaidina susijusį vaidmenį su...</p>
Pagrindinio puslapio slider antraštės
Standartinės antraštės su heading elementais
Paveikslėlio dydis (desktop)
Pagrindinio puslapio foninio paveikslėlio / sliderio gabaritai (desktop versijai) turi būti:
1920px x 800px
Paveikslėlio dydis (mobile)
Pagrindinio puslapio foninio paveikslėlio / sliderio gabaritai (mobile versijai) turi būti:
414px x 800px
Kategorijų puslapių paveikslėlio dydis
Standartinė kategorija
Paveikslėlio dydis (desktop)
Kategorijos puslapio foninio paveikslėlio gabaritai (desktop versijai) turi būti:
1396px x 400px
H2 Heading
<h2 class="slider-heading color-white">H2 Heading</h2>
<p class="slider-subheading color-white text center">Subtext komentarui</p>
H2 Heading
<h2 class="slider-heading color-black">H2 Heading</h2>
<p class="slider-subheading color-black text center">Subtext komentarui</p>
Tekstinių elementų atitraukimai
Atitraukimai iš viršaus ir apačios
Tekstinių elementų atitraukimui iš viršaus su 0 px naudojama klasė - top-0
<p class="text-center top-0 main-text">Tekstinių elementų atitraukimui iš viršaus su 0 px naudojama klasė - top-0</p>
Tekstinių elementų atitraukimui iš viršaus su 25 px naudojama klasė - top-25
<p class="text-center top-25 main-text">Tekstinių elementų atitraukimui iš viršaus su 25 px naudojama klasė - top-25</p>
Tekstinių elementų atitraukimui iš apačios su 25 px naudojama klasė - bottom-25
<p class="text-center bottom-25 main-text">Tekstinių elementų atitraukimui iš apačios su 25 px naudojama klasė - bottom-25</p>
Tekstinių elementų atitraukimui iš apačios su 0 px naudojama klasė - bottom-0
<p class="text-center bottom-0 main-text">Tekstinių elementų atitraukimui iš apačios su 0 px naudojama klasė - bottom-0</p>
Paveikslėliai
Atvaizduotas į tekstinį lauką įkeltas paveikslėlis.
Paveikslėlis pridedamas įprastu būdu:
<img src="paveikslėlio-vieta" alt="pavadinimas"/>
Neradote reikiamo stiliaus?
Programuotojų kontaktai
Pritaikant nurodytas klases tam tikriems elementams gali būti gaunamas reikiamas rezultatas su atitinkamai suprogramuotu stiliumi, kaip matoma aukščiau šiame puslapyje nurodytuose ir užprogramuotuose html kodo elementuose. Jeigu reikia daugiau variantų ir papildomų elementų stilių kreiptis į programuotojus https://dimax.lt/.