Tabelle HTML forniscono agli sviluppatori del sito Web con un modo per formattare il layout del sito. Nelle tabelle sono difficili da gestire, così \"tableless\" layout hanno sostituito il vecchio HTML gli stili di programmazione. Tableless layout CSS implica la sostituzione di ogni riga della tabella e della colonna con un \"div\" tag. Divs sono elementi che creano uno spazio praticabile in una pagina web. Per esempio, un div può contenere un paragrafo delle informazioni nel centro di una pagina. La creazione di un formato tableless richiede un layout div che sostituisce la proprietà di una tabella.
Istruzioni
1
Creare i tag div principale che definiscono il layout. In questo esempio, viene creato un modello di sito Web con un div superiore che contiene la navigazione e logo aziendale, un piè di pagina e una barra laterale sinistra. Il codice seguente crea la struttura tableless div:
< corpo >
<div id=\"header\"> </div>
<div id=\"sidebar\"> </div>
<div id=\"main\"> </div>
<div id=\"footer\"> </div>
< / body >
2
Creare l'intestazione di stile CSS. Gli stili CSS posizionare i tag div nel browser dell'utente. La seguente classe CSS viene inserita nei tag head del vostro template HTML:
intestazione () {
position: fixed
VAI
width: 100%
VAI
height: 15%
VAI
top: 0
VAI
right: 0
VAI
bottom: auto
VAI
left: 0
VAI
}
Il \ "#\" prefisso indica che la classe corrisponde all'ID del tuo div. Questo significa che non è necessario specificare la classe per il div, e automaticamente viene utilizzato quando la pagina viene caricata.
3
Posizione div barra laterale a sinistra della finestra del browser. La barra laterale sinistra div viene utilizzata per la navigazione o informazioni per i tuoi utenti. Classe CSS seguente posizioni il vostro div sidebar:
Sidebar () {
position:fixed
VAI
width:11em
VAI
height:auto
VAI
top:15%
VAI
right:auto
VAI
bottom:100px
VAI
left:0
VAI
}
È inoltre possibile inserire questo div a destra del browser modificando i valori per \"right\" e \"left.\" \"Left\" è impostata su 0, quindi è collocato all'estrema sinistra. Modifica questo valore a \"auto\" e cambiare il \"right\" valore a 0 sposta il div a destra.
4
Impostare la posizione per il contenuto del div principale. Questo div viene utilizzato per il contenuto principale come prodotto elenchi o testo del blog. Questo è dove il titolare del sito posti il \"meat\ principale" del sito Web. Il codice seguente posiziona il div principale:
Main {
position:fixed
VAI
width:auto
VAI
height:auto
VAI
top:15%
VAI
right:0
VAI
bottom:100px
VAI
left: 10em
VAI
}
5
Posizione il piè di pagina nella parte inferiore della pagina. Il piè di pagina è comunemente usato per gli avvisi di copyright e link ad una mappa del sito. Il codice seguente inserisce il div del piè di pagina:
piè di pagina () {
position:fixed
VAI
width:100%
VAI
height:100px
VAI
top:auto
VAI
right:0
VAI
bottom:0
VAI
left:0
VAI
}