Come fare un bar galleggiante su CSS

June 30

Creazione di un bar galleggiante è un metodo per mantenere il contenuto in una posizione fissa nella pagina Web. È possibile utilizzare un bar galleggiante per mantenere un menu di navigazione a portata di mano per i visitatori o, è possibile infastidire con una pubblicità che rimane sul loro schermo, non importa dove essi scorrono su una pagina lunga. Indipendentemente dal tipo di motivazione, il codice CSS per creare un bar galleggiante è semplice e può essere aggiunto al tuo sito in pochi minuti.

istruzione

1 Definire la barra CSS galleggiante nella sezione <head> del codice HTML. Inizia con un tag <style> e definire un <div> per tenere la barra mobile:

<Style>
div.floating bar
{
position: fixed; background: # 808080; border: 1px solid # 000000; Larghezza 100%; z-index: 100;
}

2 Assegnare i membri all'elemento <div> e posizionare la barra sullo schermo con il codice:

div.floating bar h3
{
blocco di visualizzazione; margin: 0 0.5 em;
}
</ Style>

3 Inserire il bar galleggiante nella sezione <body> del codice e mettere un po 'di testo nella barra:

<Div class = "floating-bar">
<H3> Floating Bar </ h3>
</ Div>

Consigli e avvertenze

  • Questo codice crea un bar galleggiante con il testo "bar galleggiante." Creare un menu inserendo i tag di ancoraggio appropriati. È anche possibile utilizzare la barra per visualizzare le immagini, testo o un mix di tutti e tre.
  • Impostare la "z-index" per 100 mantiene la barra visualizzata in cima a qualsiasi altra pagina come un utente scorre in basso nella pagina.
  • "Position: fixed" Impostazione mantiene la barra in posto relativo allo schermo dell'utente per creare un effetto fluttuante.