Facebook utilizza un paio di diverso tipi di notifiche, incluse le barre che si attacchino al fondo della pagina. Questo trucco non è difficile da implementare sul proprio sito Web, anche se ci vorrà supplementare di codifica di là delle CSS (Cascading Style Sheets) per creare il testo per le notifiche se stessi. Tutto ciò che serve è qualche semplice HTML per creare la casella, lo styling della casella stessa, quindi una sola riga di CSS per rendere la casella appiccicoso.

Istruzioni

1

Aprire la pagina Web in blocco note o un editor di codice e scorrere verso il basso da qualche parte sopra la chiusura tag "< / body >", sopra qualsiasi tag "< script >" possono trovare qui. Creare un div nel codice HTML e dargli un nome ID di "notifica". Aggiungere a questa un Rubrica div e un paragrafo:

< div id = "notifica" >
Notifica di < h3 > < / h3 >
< p > testo per la notifica va. </p >
< / div >

2

Aprire il foglio di stile per il tuo sito in blocco note o un editor di codice. Su una nuova riga, aggiungere selettori per il div, l'intestazione e il testo del paragrafo:

Notify () {

}

Notify () {h3

}

notificare p {

}

3

Stile in primo luogo la casella notifica. Se si desidera abbinare lo stile di Facebook, utilizzare uno sfondo bianco con un bordo grigio chiaro e dare testo grigio scuro. Impostare una larghezza per la scatola così:

Notify () {

sfondo: bianco;
colore: #555;
font-family: Arial, sans-serif;
font-size: 12px;
border: 1px solid #ccc;
Larghezza: 200px;
}

4

Stile il titolo con testo bianco su sfondo blu, poi aggiungere qualche imbottitura. È inoltre necessario disattivare i margini impostando loro a zero:

Notify () {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à in stile i tipi di carattere per l'intera scatola all'interno, la regola di stile "{#notify}", non è necessario applicare loro uno stile in questa regola.

6

Tornare alla regola di stile "#notify {}" e aggiungere alcuni posizionamento:

Posizione: assoluta;
fondo: 0;
destra: 0;

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

7

Una sola riga di codice CSS risolverà la casella in luogo:

Posizione: fisso;

Cambiare il "assoluto" è usata per il posizionamento prima a "fisso". Ora la casella si attacchi all'angolo inferiore.

Consigli & 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. Provare uno script jQuery per tutte le animazioni che vuoi e consegnare i singoli messaggi agli utenti tramite uno script server-side. PHP è un esempio di un linguaggio di scripting lato server.
• "Posizione: fisso" non funziona in Internet Explorer 6, ma funziona nelle versioni 7 e fino.