Cos'è il layout a blocchi? Come creare autonomamente una semplice pagina del sito?
C'è il desiderio di imparare come farlo da solopagine del sito? Quindi impariamo cos'è il layout a blocchi. I novizi-novizi incontrano una serie di difficoltà, hanno molte domande. Considerare quale sia l'aspetto del blocco.
Consiglio importante
Usa un editor visuale per far funzionare tutto.più chiaramente. Chi conosce bene l'HTML, lavora su un quaderno, perché capisce tutto. E i nuovi arrivati possono utilizzare programmi come FrontPage o, per esempio, Dreamweaver.
Tipi di layout del sito
Esistono diversi tipi di layout:
- Tabulare.
- Block.
- Misto.
Siamo interessati alla disposizione dei blocchi. Qual è la sua differenza da tabulare? Il layout dei blocchi utilizzando il tag DIV presenta alcuni vantaggi:
- Il caricamento con blocchi di progettazione è più rapido.
- Il contenuto dei blocchi viene visualizzato (a differenza delle tabelle) durante il download. Come sai, i dati delle tabelle appariranno solo dopo aver visualizzato l'intera tabella.
- Il codice con div è più facile da leggere.
Queste non sono tutte le virtù per cui è famoso il layout.
Come posso cambiare la posizione dei blocchi div?
In questo useremo float - una proprietà che può assumere i seguenti valori:
- Allineamento a sinistra a sinistra.
- Per il giusto allineamento, giusto.
- L'oggetto rimane dov'era, non si muove da nessuna parte se nessuno è specificato. Questo valore sarà il valore predefinito.
Un'altra proprietà importante di cui abbiamo bisogno è chiara. Può avere 4 valori:
- Per impostare l'elemento sotto il precedente, spostato a destra, il blocco è giusto.
- Sinistra imposta l'elemento sotto il precedente, che viene spostato a sinistra.
- Entrambi: installazione sotto il blocco spostato precedente.
- Nessuno dice che non ci sono restrizioni sulla posizione del blocco rispetto a quegli elementi che vengono spostati.
esempio
Considera come appare il layout a blocchi del div. Scrivi il nostro codice:
Come puoi vedere, il layout di blocco del sito è abbastanza semplice. È importante imparare e applicare più funzioni nella pratica, che ti consentiranno di creare una struttura di pagina più flessibile.
Un'altra cosa importante
C'è una proprietà popolare che viene utilizzata nel layout - posizione, viene utilizzata per il posizionamento.
Valori per la proprietà position:
- Relativo: imposta la posizione degli elementi rispetto alle loro posizioni originali. Applicando a sinistra, in alto, a destra, in basso si sposta l'elemento in una determinata direzione.
- Statico: visualizzazione normale dell'elemento. Non ha senso usare destra / sinistra, alto / basso - questo non porterà a nulla.
- Assoluto - posizionamento assoluto dell'elemento.
- Risolto è lo stesso di assoluto. L'elemento è associato a un certo punto sullo schermo, ma non cambia la sua posizione anche se la pagina è capovolta.
Molti truccatori hanno notato che durante l'applicazioneposizionamento fisso, assoluto o relativo, si verifica il blocco. E poi è interessante sapere quale dei blocchi è più basso, che è più alto. Per rispondere a questa domanda, è necessaria la proprietà z-index. Ha portato il layout dei blocchi ad un livello qualitativamente nuovo. Ciò rende possibile il posizionamento non solo sul piano, ma anche con l'aiuto del terzo asse Z. Il valore di tale proprietà può essere positivo e negativo.
Crea 3 blocchi. Successivamente, sperimentiamo il posizionamento assoluto.
Come si può vedere dall'esempio, è facile cambiare posizioneblocchi. Sulla base di ciò che ora sai, chiunque realizzerà un layout a blocchi elementare della pagina del sito. E usando più proprietà, migliorerai le tue abilità.
