CSS handleiding

CSS TUIS CSS Inleiding CSS-sintaksis CSS-keurders CSS Hoe om CSS Kommentaar CSS kleure CSS agtergronde CSS-grense CSS-marges CSS Opvulling CSS Hoogte/Breedte CSS Box Model CSS uiteensetting CSS teks CSS lettertipes CSS-ikone CSS skakels CSS-lyste CSS-tabelle CSS vertoon CSS maksimum breedte CSS posisie CSS Z-indeks CSS oorloop CSS Float CSS Inline-blok CSS Belyn CSS-kombineerders CSS Pseudo-klas CSS Pseudo-element CSS Deursigtigheid CSS-navigasiebalk CSS-aftrekkies CSS Beeldgalery CSS Beeld Sprites CSS Attr keurders CSS-vorms CSS-tellers CSS-webwerfuitleg CSS-eenhede CSS Spesifisiteit CSS !belangrik CSS Wiskunde funksies

CSS Gevorderd

CSS afgeronde hoeke CSS-randbeelde CSS agtergronde CSS kleure CSS-kleur sleutelwoorde CSS Gradiënte CSS Shadows CSS-tekseffekte CSS Web Fonts CSS 2D-transformasies CSS 3D-transformasies CSS-oorgange CSS-animasies CSS Tooltips CSS-stylbeelde CSS-beeldrefleksie CSS-objekpas CSS voorwerp-posisie CSS-maskering CSS-knoppies CSS-paginering CSS veelvuldige kolomme CSS-gebruikerskoppelvlak CSS veranderlikes CSS-boksgrootte CSS-medianavrae CSS MQ Voorbeelde CSS Flexbox

CSS reageer

RWD Inleiding RWD Uitsigpoort RWD-roosteraansig RWD Media Navrae RWD beelde RWD-video's RWD-raamwerke RWD-sjablone

CSS -rooster

Grid Intro Roosterhouer Rooster item

CSS SASS

SASS Tutoriaal

CSS voorbeelde

CSS-sjablone CSS voorbeelde css vasvra CSS Oefeninge CSS-sertifikaat

CSS Verwysings

CSS Verwysing CSS-keurders CSS-funksies CSS Verwysing Gehoor CSS Web veilige lettertipes CSS Animateerbaar CSS-eenhede CSS PX-EM-omskakelaar CSS kleure CSS-kleurwaardes CSS verstekwaardes CSS-blaaierondersteuning

CSS Horisontale Navigasiebalk


Horisontale navigasiebalk

Daar is twee maniere om 'n horisontale navigasiebalk te skep. Gebruik inlyn- of drywende lysitems.

Inlyn lysitems

Een manier om 'n horisontale navigasiebalk te bou, is om die <li>-elemente as inlyn te spesifiseer, bykomend tot die "standaard"-kode van die vorige bladsy:

Voorbeeld

li {
  display: inline;
}

Voorbeeld verduidelik:

  • display: inline;- By verstek is <li>-elemente blokelemente. Hier verwyder ons die reëlbreuke voor en na elke lysitem om dit op een reël te vertoon

Swaailys-items

Nog 'n manier om 'n horisontale navigasiebalk te skep, is om die <li>-elemente te laat dryf, en 'n uitleg vir die navigasieskakels te spesifiseer:

Voorbeeld

li {
  float: left;
}

a {
  display: block;
  padding: 8px;
  background-color: #dddddd;
}

Voorbeeld verduidelik:

  • float: left; - Gebruik float om blokelemente langs mekaar te laat dryf
  • display: block; - Laat ons toe om vulling te spesifiseer (en hoogte, breedte, kantlyne, ens. as jy wil)
  • padding: 8px;- Spesifiseer 'n mate van opvulling tussen elke <a>-element om hulle goed te laat lyk
  • background-color: #dddddd;- Voeg 'n grys agtergrond-kleur by elke <a> element

Wenk: Voeg die agtergrondkleur by <ul> in plaas van elke <a>-element as jy 'n volle breedte agtergrondkleur wil hê:

Voorbeeld

ul {
  background-color: #dddddd;
}

Horisontale navigasiebalk voorbeelde

Skep 'n basiese horisontale navigasiebalk met 'n donker agtergrondkleur en verander die agtergrondkleur van die skakels wanneer die gebruiker die muis daaroor beweeg:

Voorbeeld

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
  background-color: #111;
}

Aktiewe/huidige navigasieskakel

Voeg 'n "aktiewe" klas by die huidige skakel om die gebruiker te laat weet op watter bladsy hy/sy is:

Voorbeeld

.active {
  background-color: #04AA6D;
}

Regs-belyn skakels

Belyn skakels regs deur die lysitems na regs te laat dryf ( float:right;):

Voorbeeld

<ul>
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li style="float:right"><a class="active" href="#about">About</a></li>
</ul>

Grensverdelers

Voeg die border-righteiendom by <li> om skakelverdelers te skep:

Voorbeeld

/* Add a gray right border to all list items, except the last item (last-child) */
li {
  border-right: 1px solid #bbb;
}

li:last-child {
  border-right: none;
}

Vaste navigasiebalk

Laat die navigasiebalk bo- of onderaan die bladsy bly, selfs wanneer die gebruiker die bladsy blaai:

Vaste Top

ul {
  position: fixed;
  top: 0;
  width: 100%;
}

Vaste onderkant

ul {
  position: fixed;
  bottom: 0;
  width: 100%;
}

Let wel: Vaste posisie sal dalk nie behoorlik op mobiele toestelle werk nie.

Grys ​​horisontale navigasiebalk

'n Voorbeeld van 'n grys horisontale navigasiebalk met 'n dun grys rand:

Voorbeeld

ul {
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

li a {
  color: #666;
}

Plakkerige navigasiebalk

Voeg position: sticky;by <ul> om 'n taai navigasiebalk te skep.

'n Taai element wissel tussen relatief en vas, afhangende van die rolposisie. Dit word relatief geposisioneer totdat 'n gegewe offsetposisie in die viewport bereik word - dan "plak" dit in plek (soos posisie:vas).

Voorbeeld

ul {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

Let wel: Internet Explorer ondersteun nie taai posisionering nie. Safari vereis 'n -webkit- voorvoegsel (sien voorbeeld hierbo). topJy moet ook ten minste een van , right, bottomof spesifiseer leftvir taai posisionering om te werk.


Meer voorbeelde

Responsiewe Topnav

Hoe om CSS-medianavrae te gebruik om 'n responsiewe topnavigasie te skep.

Responsiewe Sidenav

Hoe om CSS-medianavrae te gebruik om 'n responsiewe synavigasie te skep.

Aftreklys Navbar

Hoe om 'n aftreklys in 'n navigasiebalk by te voeg.

Al ooit gehoor van W3Schools Spaces ? Hier kan jy jou webwerf van nuuts af skep of 'n sjabloon gebruik en dit gratis aanbied.

Begin gratis ❯

* geen kredietkaart benodig nie