El molt bàsic d’un lloc web basat en Div: 7 passos

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:18

Aquest instructiu us mostrarà els conceptes bàsics sobre com crear un lloc web amb divs. Perquè les taules que s’utilitzen per al disseny són malèfiques!: pPer entendre això instructiu, haureu de conèixer html i css bàsics. Si no enteneu alguna cosa, no dubteu a preguntar-ho. La meva pàgina web personal també utilitza aquest tipus d’estructura div.

Pas 1: creeu els fitxers bàsics

Primer creeu el fitxer html. Hi afegirem els conceptes bàsics. El fitxer css estarà buit per ara. El fitxer ara conté: prova Deseu el fitxer html com a algo.html Podeu triar el nom vosaltres mateixos. El vostre fitxer css s'ha de desar com a.css. Assegureu-vos de posar-li el mateix nom que l’esmentat al fitxer html. En aquest cas, "style.css". Ara tenim una pàgina HTML buida senzilla quan es visualitza prèviament al nostre navegador.

Pas 2: Editeu l'etiqueta del cos per a colors bàsics, tipus de lletra, …

Deixarem el fitxer html tal qual i editarem només el fitxer css. Afegiu el codi següent al fitxer css: body {background: # 444444; font-family: verdana, arial, sans-serif; color: # 444444; mida de la lletra: 12 px; margin: 0px;} Amb aquest bit de codi definirem totes les propietats de l'etiqueta del cos. Com que tot el contingut es troba a l’etiqueta del cos, aquesta configuració afectarà tota la pàgina. El fons i el color de la lletra (color) s’han definit en gris fosc. La família de tipus de lletra (font-family) s’ha definit a verdana. Si l'ordinador que s'utilitza per veure el nostre lloc web no té el tipus de lletra "verdana", mostrarà el nostre lloc amb el tipus de lletra "arial". Podeu afegir més tipus de lletra a la llista. El "sans-serif" és el tipus genèric que s'utilitzarà quan no hi hagi cap font disponible. La mida de la font (font-size) s'ha definit a 12 píxels. Es tracta d’un valor absolut. Si voleu editar altres mides de tipus de lletra (com ara capçaleres, paràgrafs, elements de menú, …) podeu utilitzar la unitat relativa "em" en lloc de "px". D’aquesta manera, si voleu canviar la mida del vostre lloc web, només haureu de canviar la mida del tipus de lletra del cos. El marge s’ha definit a 0 px per a les quatre cares de l’etiqueta del cos. Això es fa per assegurar-se que el lloc s’adherirà a la part superior de la finestra.

Pas 3: afegir un contenidor amb capçalera i contingut

Ara afegirem el contenidor. Es tracta simplement d’una divisió centrada que contindrà tot el nostre lloc web. En aquest contenidor afegirem dos divs més; un div de contingut i una capçalera div. El nostre fitxer html ara tindrà aquest aspecte: prova de capçalera de contingut Afegirem el següent codi al nostre fitxer css: div # container {width: 800px; marge: 0 px automàtic; antecedents: #FFFFFF; farciment: 0px;} div # content {width: 800px; tapa de farciment: 100 px; fons: groc;} div # header {width: 800px; alçada: 100 px; fons: blau; posició: absoluta; top: 0px;}. clearfix: després de {content: "."; pantalla: bloc; alçada: 0; clar: tots dos; visibilitat: oculta;}. clearfix {display: inline-block;} / * Amaga de IE Mac / * /. clearfix {display: block;} div # container significa que tenim una etiqueta div amb l'identificador "container". Afegirem alguns colors i un "margin: 0px auto;" per assegurar-nos que el nostre contenidor estigui centrat a la pàgina. Hem de donar al contingut una tapa de farciment i a la capçalera un valor absolut amb un "top: 0px" per assegurar-nos que la capçalera estigui situada per sobre de l'altre contingut. els lletjos colors. És només per facilitar la lectura dels colors i per veure els diferents div. Necessitarem aquest estrany codi de correcció per assegurar-nos que els divs de navegació i contingut (afegits al següent pas) no caiguin del div del voltant.

Pas 4: feu dos divs al Div de contingut per a la navegació i el contingut real

Ara afegirem dos divs més al contingut div. Un per a la navegació i un per al contingut real. Entre l’etiqueta de contingut; afegiràs el nou codi:

Navegació Contingut principal Afegirem un codi CSS per mostrar els divs de navegació i contingut principal; div # nav {width: 200px; flotador: esquerra; fons: taronja;} div # maincontent {width: 600px; flotador: dret; fons: rosa;} Tingueu en compte que aquests dos divs floten. Si no haguéssim posat el codi clearfix addicional al pas anterior, els divs flotarien fora del div circumdant. Amb el mètode clearfix, ens assegurarem que això no passi.

Pas 5: afegiu divisions addicionals per a l'estructura a la navegació

Ara afegirem alguns divs addicionals al div "nav" per crear algun tipus d'estructura a la nostra pàgina web. Canvieu el bit de codi següent:

• Foo
• Bar

Ara farem un fragment de codi per definir com s’ha de mostrar el div "bloc de navegació". Tingueu en compte que el bloc de navegació té una classe, no un identificador. El motiu d’això és senzill; els divs amb un identificador només es mostren una vegada (el bloc de navegació, la capçalera, el peu de pàgina, …). Els divs amb classes es poden mostrar més d'una vegada. Aquí utilitzarem una classe. Per si de cas voldríem afegir un altre bloc de navegació més endavant.div.navblock {width: 180px; marge: 5 px automàtic; vora: 1 px vermell continu;} Si volem afegir un altre bloc de navegació, només haureu d'afegir una nova … estructura. El vostre codi ara serà així;

• Foo
• Bar
• Boo
• Lluny

Pas 6: afegiu divisions addicionals per a l'estructura al contingut principal

Ara farem el mateix per al div de maincontent. El codi ara té aquest aspecte:

Lorem ipsum dolor sit amet, …

De nou, afegirem un tros de codi al nostre fitxer css per determinar com s'ha de mostrar el div: div.contentblock {width: 580px; marge: 5 px automàtic; vora: 1 px blanc massís;} Ara podem afegir un altre bloc de contingut afegint un altre "…" al div de contingut principal així;

Lorem ipsum dolor sit amet, …

No curs, justo element element dictum, …

Pas 7: feu que el lloc sigui una mica menys lleig

Ara la part divertida; colors. Ara que tenim l’estructura principal de div, podem canviar els colors per una mica menys caòtic / lleig / … Simplement jugueu amb els colors del fitxer css. Aquí teniu el fitxer html complet de la pàgina web que es mostra a la imatge: prova

• Foo
• Bar
• Boo
• Lluny

Lorem ipsum dolor sit amet, …

No curs, justo element element dictum, …

Capçalera I aquest és el fitxer css complet: body {background: # 444444; font-family: verdana, arial, sans-serif; color: # 444444; mida de la lletra: 12 px; marge: 0px;} div # contenidor {width: 800px; marge: 0 px automàtic; antecedents: #FFFFFF; farciment: 0px;} div # content {width: 800px; tapa de farciment: 100 px; fons: #FFFFFF;} div # header {width: 800px; alçada: 100 px; fons: # 888888; posició: absoluta; top: 0px;} div # nav {width: 200px; flotador: esquerra; fons: #FFFFFF;} div # maincontent {width: 600px; flotador: dret; fons: #DDDDDD;} div.navblock {width: 180px; marge: 5 px automàtic; vora: 1px sòlid #DDDDDD;} div.contentblock {width: 580px; marge: 5 px automàtic; border: 1px solid #FFFFFF;}. clearfix: després de {content: "."; pantalla: bloc; alçada: 0; clar: tots dos; visibilitat: oculta;}. clearfix {display: inline-block;} / * Oculta de IE Mac / * /. clearfix {display: block;} Així que ara teniu els conceptes bàsics. Per descomptat, encara hi ha molt per editar, com ara colors, mides de tipus de lletra, un bloc de navegació amb millor aspecte … Però aquest instructable només tracta de l'estructura div. Si voleu veure altres instruccions relacionades, sempre podeu preguntar-ho. Veuré si trobo el temps.