Come posizionare un piè di pagina Utilizzando i CSS

April 19

Come posizionare un piè di pagina Utilizzando i CSS


Web designer implementare delle pagine e del sito stili utilizzando HTML e fogli di stile CSS. Tutti gli elementi in una pagina web può essere uno stile usando i CSS, incluse le intestazioni, piè di pagina e contenuti. Utilizzando un progetto che comprende alcuni degli stessi elementi nella stessa posizione su ogni pagina - per esempio con piè di pagina - crea un aspetto costante durante un sito e infine rende più utilizzabile. Posizionamento di un piè di pagina usando i CSS è in genere un'attività semplice, anche per i principianti.

istruzione

1 Crea la tua pagina HTML. Aprire un nuovo file in un editor di testo e inserire il seguente codice di markup, che include un collegamento a un foglio di stile esterno e alcuni elementi HTML, tra cui il piè di pagina:

<Html>

<Head>

<Link rel = "stylesheet" type = "text / css" href = "sitestyle.css" />

</ Head>

<Body>

<Div id = "container">

<Div id = "header"> Intestazione </ div>

<Div id = "content"> contenuto della pagina principale </ div>

<Div id = "footer"> Piè di pagina </ div>

</ Div>

</ Body>

</ Html>

Un layout tipico pagina Web implica avere una zona di intestazione che corre lungo la parte superiore e un piè di pagina nella parte inferiore, con il contenuto della pagina in mezzo.

2 Creare il file CSS. Aprire un nuovo file in un editor di testo e salvarlo "sitestyle.css" per abbinare il link nella sezione testa HTML. Per posizionare il vostro elemento piè di pagina in modo efficace, è necessario prima per lo stile suo elemento genitore, che è il contenitore "div".

Inserire il seguente codice:

contenitore {

width: 80%;

margin: auto;

background-color: # CCCCCC;}

Questa specifica la larghezza totale delle pagine come l'elemento "contenitore" contiene tutti il ​​contenuto della pagina. L'intestazione, contenuti e piè di pagina saranno assegnate le proprietà di stile relativi a questo. Il colore di sfondo è stato incluso puramente in modo che si possono vedere i limiti di ogni elemento, mentre si sta sviluppando la vostra pagina.

3 Aggiungere regole di stile per il vostro elemento piè di pagina. Immettere la seguente, che definisce la posizione del piè di pagina:

footer {

width: 90%;

margin: auto;

text-align: center;

clear: both;

background-color: #FFFFCC;}

Il piè di pagina è definita come occupare una percentuale del suo elemento genitore, con la proprietà margine dichiarando che essa dovrebbe trovarsi all'interno del centro del genitore. Il testo all'interno del piè di pagina è anche centrato, che, a sua volta, centrare tutti gli altri elementi all'interno di esso, come le immagini. L'elemento è impostato per eliminare entrambi i lati, il che significa che nessun altro elemento appariranno sulla stessa linea orizzontale come. Salvare i file e visualizzare la pagina in un browser Web.

4 Stile il resto dei tuoi elementi della pagina e assicurarsi che il piè di pagina è ancora in stile il modo in cui avete bisogno di essere. Quando si creano regole CSS, si può a volte trovare che essi hanno inaspettato styling "knock-in" effetti, sconvolgendo creato in precedenza. Il codice di esempio seguente detta lo stile per l'intestazione e il contenuto sezioni della pagina:

intestazione, #content {

width: 90%;

margin: auto;

clear: both;

background-color: #FFCCFF;}

Salvare le modifiche e visualizzare la pagina in un browser.

5 Esperimento con le regole CSS per ottenere la posizione si desidera che il piè di avere. I browser Web possono essere notoriamente varia quando si tratta di rendere i contenuti CSS stile, così si dovrebbe idealmente verificare la pagina nel maggior numero possibile di browser. Potreste scoprire che è necessario aggiungere o modificare le regole CSS per far rispettare il vostro disegno in tutti i browser, le versioni precedenti di particolare Internet Explorer.

Consigli e avvertenze

  • Utilizzando "auto" come la proprietà margine CSS può solo centrare un elemento se il suo genitore ha una larghezza specificata.
  • Mai dare per scontato tutti gli utenti saranno in grado di vedere le tue pagine il modo di fare, in quanto questo dipende interamente da quale browser che stanno utilizzando.

Articoli Correlati