A volte uno sfondo pagina Web lone, centrato può creare un effetto drammatico che migliora lo stato d'animo di un sito Web. Ad esempio, un'immagine della terra galleggiante contro un fondale nero potrebbe affascinare i visitatori di un sito di astronomia. Molti sviluppatori utilizzano fogli di stile per controllare la posizione e l'aspetto di ogni oggetto in una pagina Web. Questo include sfondi. Esperimento con sfondi centrati scegliendo una delle vostre immagini preferite e lo styling sulla tua pagina Web.
Istruzioni
• Aprire il blocco note. Aggiungere il seguente testo per creare un documento HTML vuoto:
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional / / EN" "l'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns = "l'http://www.w3.org/1999/xhtml" >
< head >
< title > centro un Test Web pagina < / title >
<!-inserto stile sezione * *-->
< / head >
< corpo >
< h1 > Questa pagina ha un'immagine di sfondo centrato < / h1 >
< id di input = "Button1" type = "button" value = "button" / >< id di input = "Text1" tipo = "testo" / >
< / body >
< / html >
Questo codice crea un titolo, un pulsante e una casella di testo.
• Aggiungere il seguente codice di foglio di stile qui sotto "inserire stile sezione qui:"
< style >
body {background: url('xyz.jpg') non fissata centro-repeat;}
< / stile >
Questa definizione di stile centra l'immagine di sfondo del corpo della pagina. Sostituire "xyz.jpg" con una delle tue immagini.
• Premere "Ctrl + S" per aprire la finestra di blocco note "Salva con nome". Immettere "Center_Web_Page_Test.html" nella casella "Nome File" e fare clic su "Salva". Blocco note salverà il file HTML.
• Aprire un browser e premere "CTRL + O" per aprire la finestra "Apri File". Individuare il file HTML e fare doppio clic su esso. Il browser visualizzerà. Verificare che il browser centra l'immagine di sfondo.
Consigli & Avvertenze
- L'opzione di "no-repeat" nella dichiarazione del foglio di stile impedisce di ripetere l'immagine. L'opzione «fisso» impedisce che l'immagine di sfondo in movimento quando si scorre la pagina Web. Rimuovere questa opzione se si desidera che l'immagine di sfondo a muoversi come un visitatore del sito fa scorrere la pagina.