Nwlapcug.com


Come utilizzare Blueprint CSS quadro



Blueprint CSS è un framework di layout basati su griglia che viene eseguito su fogli di stile CSS. Il foglio di stile principale contiene stili di "reset", le impostazioni di base tipografia e una griglia complicata, 24 colonne. È possibile utilizzare questa griglia per disporre DIVs come colonne di contenuti su pagine Web. Gli sviluppatori Web che utilizzano Blueprint CSS lo fanno perché si tira fuori gran parte del lavoro di scrittura del codice CSS per posizionare div su pagine Web. Poiché controllo del layout di div presenta una sfida per programmatori alle prime armi, è anche un ottimo strumento per principianti.

Istruzioni

1

Visitare il sito web Blueprint CSS e scaricare il file ZIP per il framework. Decomprimere il file e inserire i seguenti tre file CSS nella cartella del tuo sito Web: CSS, Print e IE. Il file CSS è il tuo file quadro principale, mentre Print gestisce il layout di stampa del tuo sito Web e IE include alcune correzioni per browser meno recenti di Internet Explorer (IE).

2

Aggiungere il seguente codice tra ogni set di < head > e < / head > tag nel tuo sito Web:

< link rel = "stylesheet" href="css/blueprint/screen.css" type = "text/css" media = "schermo, proiezione" / >

< link rel = "stylesheet" href="css/blueprint/print.css" type = "text/css" media = "stampa" / >

<!-[se lt IE 8] >

< link rel = "stylesheet" href="css/blueprint/ie.css" type = "text/css" media = "schermo, proiezione" / >

<! [endif]-->

Questo codice collega tutti e tre i file Blueprint CSS alle pagine Web. Il file IE specifico carica solo per le versioni sotto IE 8.

3

Avvolgere un DIV con un nome di classe di "contenitore" intorno a tutto il contenuto di ogni pagina nel tuo sito Web. Questo DIV dovrebbe iniziare subito dopo il tag di apertura < body > e fine appena prima della chiusura < / body > tag. Ecco un semplice esempio:

< corpo >

< div class = "container" >

Testo del tuo sito Web, immagini e altri DIVs andare qui.

< / div >

< / body >

4

Creare un DIV per ogni colonna che si desidera. Dare quel DIV un nome di classe di "span-X," dove "X" è il numero di colonne della griglia Blueprint che vuoi tua colonna contenuta span. La griglia di Blueprint è divisa in 24 colonne, ogni 40 pixel di larghezza. Ad esempio, per creare tre colonne uguali dimensioni del contenuto sulla tua pagina Web, dare ogni DIV un nome di classe di "span-8."

5

Aggiungere il nome della classe "ultimo" all'ultima colonna contenuto per ogni riga della pagina Web. Ecco come appare il codice per un DIV che contiene i nomi delle due classi, una per l'arco e per "ultimo":

< div class = "ultima campata-10" >

Qualsiasi DIV dato il nome della classe stessa, Cancella "ultima" così qualsiasi DIV dopo si inizia su una nuova riga.

6

Aggiungere le classi di "anteporre-X" o "append-X" al div quando si desidera aggiungere uno spazio vuoto aggiuntivo davanti o dietro di loro. Anteponendo colonne aggiunge spazio a sinistra del div, mentre aggiungendo colonne aggiunge spazio a destra del div. Anteposto e aggiunte colonne contano per il generale 24 colonne disponibili nella griglia Blueprint.

Consigli & Avvertenze

  • Utilizzare il file di Photoshop, incluso nel pacchetto Blueprint CSS ZIP come modello per la progettazione di siti Web. Approfitta delle linee orizzontali, tutti distanziati 18 pixel a pezzi, quando l'immissione di testo.
  • Utilizzo di troppi file CSS separati rallenterà il tuo sito Web.
  • Eseguire il backup i file HTML e CSS prima di modificarli.