Facebook utilizza un paio di diversi tipi di notifiche, compresi i bar che si attaccano alla parte inferiore della pagina. Questo trucco non è difficile da implementare sul proprio sito web, anche se ci vorrà più di codifica sopra e al di là di CSS (Cascading Style Sheets) per creare il testo per le notifiche stesse. Tutto ciò che serve è qualche semplice HTML per creare la scatola, stile della scatola stessa, poi una sola riga di CSS per rendere la casella appiccicoso.

istruzione

1 Aprire la pagina Web in Blocco note o un editor di codice e scorrere verso il basso per qualche parte sopra la chiusura tag "</ body>", di sopra di ogni "<script>" tag si possono trovare lì. Creare un div nel codice HTML e assegnategli il nome di ID Aggiungi a questo div un titolo e un paragrafo "notifica.":

<Div id = "notifica">
<H3> Notifica </ h3>
<P> Testo per la notifica va qui. </ P>
</ Div>

2 Aprire il foglio di stile per il tuo sito in Blocco note o un editor di codice. In una nuova riga, aggiungere selettori per il div, il suo titolo e il testo del paragrafo:

notificare {

}

notificare h3 {

}

notificare p {

}

3 Stile casella di notifica prima. Se si vuole abbinare lo stile di Facebook, usare uno sfondo bianco con un bordo grigio chiaro e dargli il testo di colore grigio scuro. Impostare una larghezza per la casella pure:

notificare {

sfondo: bianco;
color: # 555;
font-family: Arial, sans-serif;
font-size: 12px;
border: 1px #ccc solido;
width: 200px;
}

4 Lo stile del titolo con testo bianco su sfondo blu, quindi aggiungere un po 'di imbottitura. È inoltre necessario disattivare i margini impostandole a zero:

notificare h3 {

background: # 899ecb;
colore bianco;
font-size: 12px;
border-bottom: 1px solid # 6d8bc9;
padding: 5px 20px;
margin: 0;
}

5 Dare qualche imbottitura al paragrafo all'interno della notifica:

notificare p {

padding: 10px 20px;
}

Dal momento che già dallo stile i caratteri per l'intera scatola all'interno della "#notify {}" regola di stile, non è necessario per lo stile di loro in questa regola.

6 Torna al "#notify {}" regola di stile e aggiungere un po 'di posizionamento:

position: absolute;
in basso: 0;
a destra: 0;

Questo codice metterà la casella di notifica in basso a destra della schermata del browser. Se si prova il pagina in un browser e si tenta di scorrere verso il basso, la casella non si attacchi a quell'angolo.

7 Una riga di codice CSS fisserà la scatola al suo posto:

position: fixed;

Modificare il "assoluto" è stato utilizzato per il posizionamento prima di "fisso". Ora la scatola si attacchi nell'angolino in basso.

Consigli e avvertenze

• Le istruzioni qui coprono solo la creazione della finestra di notifica in CSS e non coprono le animazioni, l'aggiornamento o la consegna delle notifiche. Prova uno script jQuery per le animazioni che si desidera e consegnare singoli messaggi agli utenti tramite uno script lato server. PHP è un esempio di un linguaggio di scripting server-side.
• "Position: fixed" non funziona in Internet Explorer 6, ma funziona nelle versioni 7 e fino.