July 28
Blueprint è un insieme di fogli di stile CSS scritti da norvegese Olav Web designer Bjørkøy. Blueprint rende facile creare rapidamente una pagina Web diviso in sezioni e colonne che è compatibile con tutti i principali browser web. Blueprint formatta anche sul suo sito web opportunamente per la stampa. Con Blueprint si evita il fastidio di creazione di una nuova pagina da zero, permettendo di concentrarsi di più sul suo contenuto.
1 Scarica Blueprint da blueprintcss.org.
2 Fare clic sul file scaricato in Windows Explorer e selezionare "Estrai tutto." Fai clic su "Extract".
3 Aprire la cartella rivelato. Carica la cartella "progetto" al suo interno al server Web, nella stessa directory dei documenti HTML delle pagine Web o in una directory speciale CSS.
4 Creare un nuovo documento HTML, e inserire il codice seguente tra i tag "testa".
<Link rel = "stylesheet" href = "progetto / screen.css" type = "text / css" media = "screen, proiezione">
<Link rel = "stylesheet" href = "progetto / print.css" type = "text / css" media = "print">
<! - [If IE 8 lt]>
<Link rel = "stylesheet" href = "progetto / ie.css" type = "text / css" media = "screen, proiezione">
<! [Endif] ->
Correggere il "href" attributi, se necessario, in modo da riflettere il percorso corretto per la directory "modello" sul vostro server.
5 Aggiungere un div con la classe "contenitore" per tra i tag body del documento HTML utilizzando il seguente codice.
<Div class = "contenitore">
</ Div>
Tutto il resto del corpo del codice dovrebbe andare tra questi due tag.
6 Creare tre colonne sulla pagina aggiungendo div div all'interno del "contenitore". Utilizzare classi "span" di Blueprint. Digitare il seguente codice immediatamente dopo il tag che si apre il div "contenitore".
<Div class = "arco-8"> Colonna di Sinistra </ div> <div class = "arco-8"> colonna centrale </ div> <div class = "arco-8 ultimo"> Colonna a destra </ div>
La larghezza della pagina è di 24 unità di Blueprint, in modo che i numeri utilizzati aggiungere fino a 24. Assicurarsi che l'ultima colonna, in ogni set appartiene anche all ' "ultimo" di classe. Mettere qualsiasi contenuto HTML che ti piace in questi div per creare la tua pagina Web.
7 Aggiungere il seguente codice dopo l'ultima colonna di inserire un piè di pagina sotto le colonne che comprende l'intera pagina.
<Div class = "arco-24"> Piè di pagina </ div>
È possibile aggiungere il numero di sezioni in questo modo come ti piace, ognuno contenente div con le classi "span" i cui numeri aggiungere fino a 24.
8 Utilizzare il "anteporre" e classi "aggiungere" per aggiungere colonne in più vuoti prima o dopo una determinata colonna, rispettivamente. Ad esempio, digitare il seguente codice.
<Div class = "arco-8"> Colonna di Sinistra </ div> <div class = "arco-6 prepend-2"> colonna centrale con spazio extra alla sua sinistra </ div> <div class = "arco-8 scorso "> Colonna a destra </ div>
Si noti che i numeri, tra cui quello della classe "prepend", ancora aggiungere a 24.
9 Stilizza contenuti di una colonna associandolo con una o più delle seguenti classi.
"Piccola" - testo di piccole dimensioni
"Grande" - testo di grandi dimensioni
"Tranquilla" - colore del testo disattivato
"Forte" - forte colore del testo (nero)
"Highlight" - sfondo giallo
"Aggiunto" - sfondo verde
"Rimosso" - sfondo rosso