El disseny de CSS requereix que penseu en el disseny del vostre lloc web en conjunt, i després prengui les peces i les uniu. Obteniu informació sobre com crear un disseny simple de 3 columnes amb CSS.
01 de 09Dibuixa el teu disseny
Podeu dibuixar el disseny en paper o en un programa de gràfics. Si ja teniu en compte un disseny de filferro o un disseny encara més extens, simplifiqueu-lo als quadres bàsics que formen el lloc. Aquest disseny que acompanya aquest article té tres columnes a l'àrea de contingut principal, així com un encapçalament i un peu de pàgina. Si observeu de prop, podeu veure que les tres columnes no són iguals a l'amplada.
Després d'haver dibuixat el disseny, podeu començar a pensar en les dimensions. Aquest disseny d'exemple tindrà les següents dimensions bàsiques:
- No més de 900 píxels d'ample
- Capçalera de 20 px a l'esquerra
- 10 px entre columnes i files
- Columnes que són de 250px, 300px i 300px d'ample
- La fila superior és de 150 píxels d'alçada
- La fila inferior és de 100 peus d'alçada
Escriure HTML / CSS bàsic i crear un element contenidor
Atès que aquesta pàgina serà un document HTML vàlid, Comenceu amb un contenidor HTML buit
Afegiu els estils CSS bàsics per zero dels marges, les vores i els remenes de la pàgina. Si bé hi ha altres estils CSS estàndard per a documents nous, aquests estils són el mínim necessari per obtenir un disseny net. Afegiu-los al capdavant del document:
Per començar a construir el disseny, poseu-vos en un element contenidor. De vegades passa que podeu eliminar l'envàs més endavant, però per a la majoria de dissenys d'amplada fixa, tenir l'element del contenidor fa que sigui més fàcil de gestionar-lo a través de diferents navegadors web. Així que en el cos posem això: I al full d'estil CSS, poseu: El contenidor defineix l'amplitud del contingut de la pàgina web, així com els marges que hi ha a l'exterior i el farcit a l'interior. Per a aquest document, el contenidor té 870 píxels d'amplada amb una canaleta de 20 píxels a l'esquerra. El canal està configurat amb un estil de marge, però el farciment al contenidor es posa a zero per evitar que qualsevol element sigui tan ampli com el contenidor. #container { ample: 870 px; marge: 0 0 0 20px; / * superior dreta inferior esquerra * / farcit: 0; } Si guardes el document ara, serà difícil veure el contenidor perquè no té res. Si afegiu text de marcador de posició, podreu veure l'element contenidor amb més claredat. La forma en què decideixis d'estil la fila del encapçalament depèn molt del que hi ha. Si la fila de capçaleres només tindrà un logotip gràfic i un títol, aleshores utilitzarà una etiqueta de títol ( L'HTML de la fila de capçalera es troba a la part superior del contenidor i es veu així: Després, per establir els estils en ell, es va afegir una vora vermella a la part inferior, de manera que es podia veure on finalitzava, els marges i el farciment eren zero, l'amplada fixada al 100% i l'alçada a 150px: #container h1 { marge: 0; farcit: 0; ample: 100%; alçada: 150px; flota: esquerra; frontera inferior: # c00 sòlid 3px; } No oblideu flotar aquest element amb el flotador: a l'esquerra; propietat. La clau per escriure dissenys CSS és flotar tot, fins i tot les mateixes que el contenidor. D'aquesta manera, sempre sabràs on estaran els elements a la pàgina. Un selector descendent CSS ha aplicat estils només als elements H1 que hi ha a l'interior de l'element #container. Quan creeu un disseny de tres columnes amb CSS, heu de dividir el disseny en grups de dos. Així doncs, per a aquest disseny de tres columnes, la columna central i dreta s'agrupen i col·loquen al costat de la columna esquerra en un disseny de dues columnes on la columna esquerra té 250 píxels d'ample i la columna dreta és de 610 píxels d'ample (300 cadascun per a les dues columnes , a més de 10px per al canal entre ells). L'HTML es veu així: Excepteu com a conseqüència. Velit esse cillum dolore ut en minimum ad veniam, Lorem ipsum dolor sit amet. En reprehenderit in voluptate quis nostru exercitacio eu fugiat nulla pariatur. Velit esse cillum dolore ullamco laboris nisi ut aliquip ex ea commodo consequat. A mínim el dia de la setmana, no teniu temps d'incidir en aquest moment. Utilitza el treball i la dolore magna aliqua. Velit esse cillum dolore eu fugiat a la parella. El text del marcador de posició a les columnes els fa més visibles quan es prova. El CSS és així: #container # col1 { ample: 250 px; flota: esquerra; } #container # col2outer { ample: 610px; flota: a la dreta; marge: 0; farcit: 0; } La columna de l'esquerra flota cap a l'esquerra, mentre que l'altra flota a la dreta. Com que l'amplada total d'ambdues columnes és de 860 píxels, hi ha un canal de 10 píxels entre ells. Per crear les tres columnes, afegiu dos divs a la segona columna més ample, igual que heu afegit 2 divs a la columna del contenidor a l'últim pas. L'HTML es veu així: A mínim el dia de la setmana, no teniu temps d'incidir en aquest moment. Utilitza el treball i la dolore magna aliqua. Velit esse cillum dolore eu fugiat a la parella. Nam libero tempore, quia voluptas se aspernatur dicta sunt explicabo.Ullam corporis suscipit laboratori, magnam aliquam quaerat voluptatem. A continuació, l'alumne té la possibilitat de tenir un sabent delectus, que no pot tenir cap tipus de dificultat per a cada moment. I el CSS és així: # col2outer # col2mid { ample: 300px; flota: esquerra; } # col2outer # col2side { ample: 300px; flota: a la dreta; } Atès que aquestes dues caixes d'ample de 300px es troben dins d'una caixa ampla de 610px, tornaran a haver-hi una canonada de 10px entre elles. Ara que la resta de la pàgina està dissenyada, podeu afegir-la al peu de pàgina. Utilitzeu una última div amb un identificador de "peu de pàgina" i afegiu el contingut perquè pugui veure-ho. També podeu afegir un límit a la part superior, de manera que sabreu on comença. L'HTML: El CSS: #container #footer {
flota: esquerra;
ample: 870 px;
frontera superior: # c00 sòlid 3px;
} 08 de 09 Ara que teniu acabat el disseny, podeu començar a afegir els vostres propis estils i contingut personals. Recordeu que les vores de la capçalera i del peu de pàgina es van afegir per mostrar les seccions de disseny, no específicament per al disseny. Aquí teniu tot el document, HTML i CSS: Estil del contenidor
Utilitzeu una etiqueta principal per al encapçalament
) té més sentit que utilitzar
My Header Fila
Per obtenir tres columnes, comenceu per construir dues columnes
Afegiu dues columnes a l'interior de la segona columna ampla
Afegiu al peu de pàgina
Afegiu als vostres estils personals i contingut
Final HTML / CSS
