Esistono due tipi di layout del sito: tabulare e a blocchi. E mentre il primo è più conveniente per creare semplici pagine html, il secondo è l'ideale se è necessario aggiungere singoli elementi sotto forma di blocchi.
Istruzioni
Passo 1
Esistono due tecniche che ti permetteranno di sviluppare da solo un design a blocchi: incorporando fogli di stile a cascata in un documento o collegandoli da una risorsa esterna. Entrambi danno lo stesso risultato, quindi non c'è differenza fondamentale tra loro. Nel primo caso, incolla il seguente codice in qualsiasi punto del file style.css:
.blocco1 {
}
Block1 - il nome del blocco, puoi scriverne un altro. Tra le parentesi graffe, specificare i parametri nel seguente formato: nome attributo> due punti> valore> punto e virgola (incluso posto prima della parentesi graffa). I seguenti elementi sono comunemente usati:
- larghezza - larghezza (500px, 100%, ecc.);
- altezza - altezza (200px, 25%, ecc.);
- sfondo - colore di sfondo (Giallo, Rosso, # 000000);
- padding - padding attorno al contenuto all'interno del blocco (0px, 20%);
- margine - margini esterni dal blocco (15px, 40%);
- bordo - cornice (bordo: nero solido 0px;);
- float - allineamento (sinistra, destra);
- border-radius - arrotondamento degli angoli (border-radius: 10px;).
Passo 2
Nel secondo utilizzo dei CSS, aggiungi lo stile tra i tag e:
.blocco1 {
}
E aggiungi i parametri che desideri.
Passaggio 3
Inserisci il blocco nel punto desiderato del sito utilizzando il comando:
Blocco 1
Salva e aggiorna la pagina, dovrebbe apparire. Tieni presente che l'allineamento dell'altezza può variare a seconda di quanto è pieno il contenuto. Ad esempio, se imposti 300 px, ma hai scritto solo una riga di testo, non verrà visualizzata per intero. Questo può essere corretto, ad esempio, utilizzando una tabella con i parametri richiesti, che dovrebbe essere posizionata all'interno del blocco, ad es. tra tag e. E in modo che i bordi non siano visibili, inserisci l'attributo
