Hi ha dos tipus de disseny del lloc: tabular i bloc. I, tot i que el primer és més convenient per crear pàgines HTML senzilles, el segon és ideal si cal afegir elements individuals en forma de blocs.
Instruccions
Pas 1
Hi ha dues tècniques que us permetran desenvolupar un disseny de blocs vosaltres mateixos: incrustant fulls d’estil en cascada en un document o connectant-los des d’un recurs extern. Tots dos donen el mateix resultat, de manera que no hi ha cap diferència fonamental entre ells. En el primer cas, enganxeu el codi següent a qualsevol lloc del fitxer style.css:
.block1 {
}
Bloc1: el nom del bloc, podeu escriure qualsevol altre. Entre els claus, especifiqueu els paràmetres en el format següent: nom de l’atribut> dos punts> valor> punt i coma (inclòs el que es col·loca abans de la claus). S’utilitzen habitualment els elements següents:
- amplada - amplada (500 px, 100%, etc.);
- alçada - alçada (200 px, 25%, etc.);
- fons - color de fons (groc, vermell, # 000000);
- farciment: farcit al voltant del contingut dins del bloc (0px, 20%);
- marge: marges externs del bloc (15 píxels, 40%);
- vora - marc (vora: negre 0px sòlid;);
- float - alineació (esquerra, dreta);
- border-radi: arrodoniment de cantonades (border-radi: 10px;).
Pas 2
Al segon ús de CSS, afegiu l'estil entre les etiquetes i:
.block1 {
}
I afegiu els paràmetres que vulgueu.
Pas 3
Inseriu el bloc al lloc desitjat del lloc mitjançant l'ordre:
Bloc 1
Deseu i actualitzeu la pàgina, hauria d'aparèixer. Tingueu en compte que l'alineació d'alçada pot variar en funció del grau de contingut. Per exemple, si definiu 300 px, però només escriviu una línia de text, no es mostrarà completament. Això es pot corregir, per exemple, mitjançant una taula amb els paràmetres necessaris, que s’hauria de col·locar dins del bloc, és a dir, entre etiquetes i. I perquè les vores no siguin visibles, inseriu l'atribut
