Aspect HTML - Elemente de dispunere HTML diferite cu exemple

Cuprins:

Anonim

Introducere în formatul HTML

În timp ce proiectăm o pagină web, este important să aranjăm elementele paginii web într-un mod elegant. Acestea ar trebui să fie ușor de navigat pentru utilizator și simple. Aspectul HTML oferă o modalitate de a aranja aceste elemente într-o manieră bine structurată. Aspectul HTML oferă un aspect foarte bun paginii web și oferă un mod ușor de proiectat, de asemenea. Aspectul HTML este un mod simplu prin care putem proiecta elemente web folosind etichete HTML standard. HTML oferă diverse elemente de dispunere prin care putem proiecta diferite părți ale paginii web.

Elemente de dispunere HTML

În acest articol, vom vedea diferite elemente de layout HTML împreună cu exemplele lor. Vom proiecta o structură simplă similară ziarului prin utilizarea acestor elemente.

1.

Acest element este utilizat pentru a defini antetul paginii web. Conține titlul paginii sau un logo sau poate un conținut introductiv.

Cod :



EduCba

Header Section



EduCba

Header Section



EduCba

Header Section

Rezultat :

2.

Acest element va conține legături către lista de meniuri. Acest element este ca un container la diferite link-uri de navigație. Linkurile vor fi pe o altă pagină sau aceeași pagină.

Cod :

Să adăugăm un element de navigare chiar sub antetul din ultimul nostru exemplu. Adăugați o parte în element și o parte chiar sub secțiunea antet.


li(
display: inline-flex;
padding: 25px
)
ul(
text-align: center;
)


Navigation Link1
Navigation Link2
Navigation Link3


    li(
    display: inline-flex;
    padding: 25px
    )
    ul(
    text-align: center;
    )


    Navigation Link1
    Navigation Link2
    Navigation Link3


  • li(
    display: inline-flex;
    padding: 25px
    )
    ul(
    text-align: center;
    )


    Navigation Link1
    Navigation Link2
    Navigation Link3


  • li(
    display: inline-flex;
    padding: 25px
    )
    ul(
    text-align: center;
    )


    Navigation Link1
    Navigation Link2
    Navigation Link3


  • li(
    display: inline-flex;
    padding: 25px
    )
    ul(
    text-align: center;
    )


    Navigation Link1
    Navigation Link2
    Navigation Link3


  • li(
    display: inline-flex;
    padding: 25px
    )
    ul(
    text-align: center;
    )


    Navigation Link1
    Navigation Link2
    Navigation Link3


  • li(
    display: inline-flex;
    padding: 25px
    )
    ul(
    text-align: center;
    )


    Navigation Link1
    Navigation Link2
    Navigation Link3


  • li(
    display: inline-flex;
    padding: 25px
    )
    ul(
    text-align: center;
    )


    Navigation Link1
    Navigation Link2
    Navigation Link3


li(
display: inline-flex;
padding: 25px
)
ul(
text-align: center;
)


Navigation Link1
Navigation Link2
Navigation Link3

Rezultat :

3.

Acest element este ca secțiunea principală a paginii web. Poate conține orice fel de informații. Poate conține text, imagini etc.

4.

După cum sugerează și numele, acest element va conține conținut precum un paragraf, orice descriere detaliată a ceva sau orice fel de informații. În general, aceasta va fi partea principală care conține informații pe o pagină web.

5.

Acest element va defini conținutul care va fi de partea conținutului principal, precum secțiunea sau articolul. Acest element informațional este opțional și, în general, va conține informații suplimentare sau conținut publicitar.

Cod :

Să adăugăm toate aceste trei elemente împreună sub bara de navigare.


li ( display: inline-flex;
padding: 25px
)
section(
background-color: #607D8B;
width: 79%;
position: absolute;
height: 150px;
)
article(
width: 79%;
background-color: #607d8b70;
position: absolute;
top: 368px;
height: 150px;
)
aside(
background-color: #607d8b99;
width: 20%;
position: absolute;
left: 80%;
height: 300px;
)
h2, p (
text-align: center;
color: #9c27b0;
)
ul(
text-align: center;
)


Section Part


li ( display: inline-flex;
padding: 25px
)
section(
background-color: #607D8B;
width: 79%;
position: absolute;
height: 150px;
)
article(
width: 79%;
background-color: #607d8b70;
position: absolute;
top: 368px;
height: 150px;
)
aside(
background-color: #607d8b99;
width: 20%;
position: absolute;
left: 80%;
height: 300px;
)
h2, p (
text-align: center;
color: #9c27b0;
)
ul(
text-align: center;
)


Section Part


li ( display: inline-flex;
padding: 25px
)
section(
background-color: #607D8B;
width: 79%;
position: absolute;
height: 150px;
)
article(
width: 79%;
background-color: #607d8b70;
position: absolute;
top: 368px;
height: 150px;
)
aside(
background-color: #607d8b99;
width: 20%;
position: absolute;
left: 80%;
height: 300px;
)
h2, p (
text-align: center;
color: #9c27b0;
)
ul(
text-align: center;
)


Section Part

Unele text



Partea articolului


Un text detaliat


Partea de bara laterală


Aceasta va conține o parte statică sau orice altceva de genul reclamă etc.

Rezultat :

6.

Acest element este utilizat pentru a afișa utilizatorilor detalii suplimentare despre pagina web. Aceasta poate conține informații suplimentare care sunt opționale pentru utilizator. În mod implicit, acest element oferă o caracteristică pentru a afișa sau ascunde detaliile la clic.

7.

Acest element este utilizat împreună cu elementul. Informațiile care urmează să fie ascunse și care vor fi afișate la clic vor fi în această etichetă. Acest element va fi în interiorul elementului de detalii.

Cod :

Să adăugăm elemente de detalii împreună cu elementul sumar din exemplul nostru existent. Nu trebuie decât să adăugați codul de mai jos după ce părțile noastre sunt deoparte, secțiunea și elementele din articol.


Summary: click here to show details

Detalii: La apăsarea elementului sumar, detaliile vor fi afișate utilizatorului


Detalii (
margine de sus: 330px;
latime: 100%;
umplutură: 10px;
căptușire-jos: 50px;
căptușire-stânga: 15px;
culoare de fundal: # 607d8bdb;
)
detalii p (
font-size: 18px;
)
rezumat (
culoare albă;
font-size: 22px;
)

Ieșire1 : Fără a da clic pe elementul de detalii.

Output2: După ce faceți clic pe elementul de detalii.

8.

Pentru fiecare pagină web, va exista o secțiune în partea inferioară a acesteia, care este cunoscută sub numele de subsol. Acest element este utilizat pentru a defini secțiunea de subsol din partea de jos a paginii web. Secțiunea de subsol va conține, în general, informații precum drepturile de autor, anul, informațiile de contact etc. Este o practică standard pentru a avea un subsol în paginile web și va fi în partea de jos a unei pagini web.

Cod :

Haideți să adăugăm un subsol pe pagina noastră web din partea de jos.


Footer Section


Footer Section


Footer Section

© Copyright (An)

Rezultat :

Deci, codul final și ieșirea sa vor arăta astfel,

Cod:



EduCba
li( display: inline-flex;
padding: 25px
)
section(
background-color: #607D8B;
width: 79%;
position: absolute;
height: 150px;
)
article(
width: 79%;
background-color: #607d8bc7;
position: absolute;
top: 368px;
height: 150px;
)
aside(
background-color: #607d8bde;
width: 20%;
position: absolute;
left: 80%;
height: 300px;
)
h2, p (
text-align: center;
color: #fff;
)
ul(
text-align: center;
)
details (
margin-top: 330px;
width: 100%;
padding-top: 10px;
padding-bottom: 50px;
padding-left: 15px;
background-color: #607d8bdb;
)
details p (
font-size: 18px;
)
summary (
color: white;
font-size: 22px;
)


Header Section

Navigation Link1
Navigation Link2
Navigation Link3


Section Part



EduCba
li( display: inline-flex;
padding: 25px
)
section(
background-color: #607D8B;
width: 79%;
position: absolute;
height: 150px;
)
article(
width: 79%;
background-color: #607d8bc7;
position: absolute;
top: 368px;
height: 150px;
)
aside(
background-color: #607d8bde;
width: 20%;
position: absolute;
left: 80%;
height: 300px;
)
h2, p (
text-align: center;
color: #fff;
)
ul(
text-align: center;
)
details (
margin-top: 330px;
width: 100%;
padding-top: 10px;
padding-bottom: 50px;
padding-left: 15px;
background-color: #607d8bdb;
)
details p (
font-size: 18px;
)
summary (
color: white;
font-size: 22px;
)


Header Section

Navigation Link1
Navigation Link2
Navigation Link3


Section Part



EduCba
li( display: inline-flex;
padding: 25px
)
section(
background-color: #607D8B;
width: 79%;
position: absolute;
height: 150px;
)
article(
width: 79%;
background-color: #607d8bc7;
position: absolute;
top: 368px;
height: 150px;
)
aside(
background-color: #607d8bde;
width: 20%;
position: absolute;
left: 80%;
height: 300px;
)
h2, p (
text-align: center;
color: #fff;
)
ul(
text-align: center;
)
details (
margin-top: 330px;
width: 100%;
padding-top: 10px;
padding-bottom: 50px;
padding-left: 15px;
background-color: #607d8bdb;
)
details p (
font-size: 18px;
)
summary (
color: white;
font-size: 22px;
)


Header Section

Navigation Link1
Navigation Link2
Navigation Link3


Section Part


    EduCba
    li( display: inline-flex;
    padding: 25px
    )
    section(
    background-color: #607D8B;
    width: 79%;
    position: absolute;
    height: 150px;
    )
    article(
    width: 79%;
    background-color: #607d8bc7;
    position: absolute;
    top: 368px;
    height: 150px;
    )
    aside(
    background-color: #607d8bde;
    width: 20%;
    position: absolute;
    left: 80%;
    height: 300px;
    )
    h2, p (
    text-align: center;
    color: #fff;
    )
    ul(
    text-align: center;
    )
    details (
    margin-top: 330px;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 50px;
    padding-left: 15px;
    background-color: #607d8bdb;
    )
    details p (
    font-size: 18px;
    )
    summary (
    color: white;
    font-size: 22px;
    )


    Header Section

    Navigation Link1
    Navigation Link2
    Navigation Link3


    Section Part


  • EduCba
    li( display: inline-flex;
    padding: 25px
    )
    section(
    background-color: #607D8B;
    width: 79%;
    position: absolute;
    height: 150px;
    )
    article(
    width: 79%;
    background-color: #607d8bc7;
    position: absolute;
    top: 368px;
    height: 150px;
    )
    aside(
    background-color: #607d8bde;
    width: 20%;
    position: absolute;
    left: 80%;
    height: 300px;
    )
    h2, p (
    text-align: center;
    color: #fff;
    )
    ul(
    text-align: center;
    )
    details (
    margin-top: 330px;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 50px;
    padding-left: 15px;
    background-color: #607d8bdb;
    )
    details p (
    font-size: 18px;
    )
    summary (
    color: white;
    font-size: 22px;
    )


    Header Section

    Navigation Link1
    Navigation Link2
    Navigation Link3


    Section Part


  • EduCba
    li( display: inline-flex;
    padding: 25px
    )
    section(
    background-color: #607D8B;
    width: 79%;
    position: absolute;
    height: 150px;
    )
    article(
    width: 79%;
    background-color: #607d8bc7;
    position: absolute;
    top: 368px;
    height: 150px;
    )
    aside(
    background-color: #607d8bde;
    width: 20%;
    position: absolute;
    left: 80%;
    height: 300px;
    )
    h2, p (
    text-align: center;
    color: #fff;
    )
    ul(
    text-align: center;
    )
    details (
    margin-top: 330px;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 50px;
    padding-left: 15px;
    background-color: #607d8bdb;
    )
    details p (
    font-size: 18px;
    )
    summary (
    color: white;
    font-size: 22px;
    )


    Header Section

    Navigation Link1
    Navigation Link2
    Navigation Link3


    Section Part


  • EduCba
    li( display: inline-flex;
    padding: 25px
    )
    section(
    background-color: #607D8B;
    width: 79%;
    position: absolute;
    height: 150px;
    )
    article(
    width: 79%;
    background-color: #607d8bc7;
    position: absolute;
    top: 368px;
    height: 150px;
    )
    aside(
    background-color: #607d8bde;
    width: 20%;
    position: absolute;
    left: 80%;
    height: 300px;
    )
    h2, p (
    text-align: center;
    color: #fff;
    )
    ul(
    text-align: center;
    )
    details (
    margin-top: 330px;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 50px;
    padding-left: 15px;
    background-color: #607d8bdb;
    )
    details p (
    font-size: 18px;
    )
    summary (
    color: white;
    font-size: 22px;
    )


    Header Section

    Navigation Link1
    Navigation Link2
    Navigation Link3


    Section Part


  • EduCba
    li( display: inline-flex;
    padding: 25px
    )
    section(
    background-color: #607D8B;
    width: 79%;
    position: absolute;
    height: 150px;
    )
    article(
    width: 79%;
    background-color: #607d8bc7;
    position: absolute;
    top: 368px;
    height: 150px;
    )
    aside(
    background-color: #607d8bde;
    width: 20%;
    position: absolute;
    left: 80%;
    height: 300px;
    )
    h2, p (
    text-align: center;
    color: #fff;
    )
    ul(
    text-align: center;
    )
    details (
    margin-top: 330px;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 50px;
    padding-left: 15px;
    background-color: #607d8bdb;
    )
    details p (
    font-size: 18px;
    )
    summary (
    color: white;
    font-size: 22px;
    )


    Header Section

    Navigation Link1
    Navigation Link2
    Navigation Link3


    Section Part


  • EduCba
    li( display: inline-flex;
    padding: 25px
    )
    section(
    background-color: #607D8B;
    width: 79%;
    position: absolute;
    height: 150px;
    )
    article(
    width: 79%;
    background-color: #607d8bc7;
    position: absolute;
    top: 368px;
    height: 150px;
    )
    aside(
    background-color: #607d8bde;
    width: 20%;
    position: absolute;
    left: 80%;
    height: 300px;
    )
    h2, p (
    text-align: center;
    color: #fff;
    )
    ul(
    text-align: center;
    )
    details (
    margin-top: 330px;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 50px;
    padding-left: 15px;
    background-color: #607d8bdb;
    )
    details p (
    font-size: 18px;
    )
    summary (
    color: white;
    font-size: 22px;
    )


    Header Section

    Navigation Link1
    Navigation Link2
    Navigation Link3


    Section Part


  • EduCba
    li( display: inline-flex;
    padding: 25px
    )
    section(
    background-color: #607D8B;
    width: 79%;
    position: absolute;
    height: 150px;
    )
    article(
    width: 79%;
    background-color: #607d8bc7;
    position: absolute;
    top: 368px;
    height: 150px;
    )
    aside(
    background-color: #607d8bde;
    width: 20%;
    position: absolute;
    left: 80%;
    height: 300px;
    )
    h2, p (
    text-align: center;
    color: #fff;
    )
    ul(
    text-align: center;
    )
    details (
    margin-top: 330px;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 50px;
    padding-left: 15px;
    background-color: #607d8bdb;
    )
    details p (
    font-size: 18px;
    )
    summary (
    color: white;
    font-size: 22px;
    )


    Header Section

    Navigation Link1
    Navigation Link2
    Navigation Link3


    Section Part


EduCba
li( display: inline-flex;
padding: 25px
)
section(
background-color: #607D8B;
width: 79%;
position: absolute;
height: 150px;
)
article(
width: 79%;
background-color: #607d8bc7;
position: absolute;
top: 368px;
height: 150px;
)
aside(
background-color: #607d8bde;
width: 20%;
position: absolute;
left: 80%;
height: 300px;
)
h2, p (
text-align: center;
color: #fff;
)
ul(
text-align: center;
)
details (
margin-top: 330px;
width: 100%;
padding-top: 10px;
padding-bottom: 50px;
padding-left: 15px;
background-color: #607d8bdb;
)
details p (
font-size: 18px;
)
summary (
color: white;
font-size: 22px;
)


Header Section

Navigation Link1
Navigation Link2
Navigation Link3


Section Part



EduCba
li( display: inline-flex;
padding: 25px
)
section(
background-color: #607D8B;
width: 79%;
position: absolute;
height: 150px;
)
article(
width: 79%;
background-color: #607d8bc7;
position: absolute;
top: 368px;
height: 150px;
)
aside(
background-color: #607d8bde;
width: 20%;
position: absolute;
left: 80%;
height: 300px;
)
h2, p (
text-align: center;
color: #fff;
)
ul(
text-align: center;
)
details (
margin-top: 330px;
width: 100%;
padding-top: 10px;
padding-bottom: 50px;
padding-left: 15px;
background-color: #607d8bdb;
)
details p (
font-size: 18px;
)
summary (
color: white;
font-size: 22px;
)


Header Section

Navigation Link1
Navigation Link2
Navigation Link3


Section Part



EduCba
li( display: inline-flex;
padding: 25px
)
section(
background-color: #607D8B;
width: 79%;
position: absolute;
height: 150px;
)
article(
width: 79%;
background-color: #607d8bc7;
position: absolute;
top: 368px;
height: 150px;
)
aside(
background-color: #607d8bde;
width: 20%;
position: absolute;
left: 80%;
height: 300px;
)
h2, p (
text-align: center;
color: #fff;
)
ul(
text-align: center;
)
details (
margin-top: 330px;
width: 100%;
padding-top: 10px;
padding-bottom: 50px;
padding-left: 15px;
background-color: #607d8bdb;
)
details p (
font-size: 18px;
)
summary (
color: white;
font-size: 22px;
)


Header Section

Navigation Link1
Navigation Link2
Navigation Link3


Section Part

Unele text



Partea articolului


Un text detaliat


Partea de bara laterală


Aceasta va conține o parte statică sau orice altceva de genul reclamei etc.


Rezumat: faceți clic aici pentru a afișa detalii

Detalii: La apăsarea elementului sumar, detaliile vor fi afișate utilizatorului


Secțiunea de subsol


© Copyright (An)

Rezultat :

Concluzie

Prin urmare, elementele de dispunere HTML sunt foarte utile în timpul proiectării paginii web. Acestea ajută dezvoltatorii să proiecteze pagini web bine structurate. Utilizarea elementelor de format HTML îmbunătățește corect experiența de citire a paginilor web. Am văzut în detaliu cele mai multe elemente principale ale machetei HTML.

Articole recomandate

Acesta este un ghid pentru aspectul HTML. Aici discutăm în detaliu elementul de dispunere HTML, cu exemplu, coduri și ieșiri. Puteți parcurge și alte articole conexe pentru a afla mai multe -

  1. Creați tabele în HTML
  2. Stiluri de fonturi HTML
  3. Etichete de imagine HTML
  4. Rame HTML
  5. Blocuri HTML
  6. Setați o culoare de fundal în HTML cu Exemplu