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

Responsiewe webontwerp - roosteraansig


Wat is 'n roosteraansig?

Baie webblaaie is gebaseer op 'n roosteraansig, wat beteken dat die bladsy in kolomme verdeel is:


Die gebruik van 'n roosteraansig is baie nuttig wanneer u webblaaie ontwerp. Dit maak dit makliker om elemente op die bladsy te plaas.


'n Responsiewe roosteraansig het dikwels 12 kolomme, en het 'n totale breedte van 100%, en sal krimp en uitbrei soos jy die grootte van die blaaiervenster verander.

Voorbeeld: Responsiewe roosteraansig



Bou 'n responsiewe roosteraansig

Kom ons begin 'n responsiewe roosteraansig bou.

Maak eers seker dat alle HTML-elemente die box-sizingeienskap op gestel het border-box. Dit maak seker dat die vulling en rand by die totale breedte en hoogte van die elemente ingesluit is.

Voeg die volgende kode by jou CSS:

* {
  box-sizing: border-box;
}

Lees meer oor die box-sizingeiendom in ons CSS Box Sizing- hoofstuk.

Die volgende voorbeeld toon 'n eenvoudige responsiewe webblad, met twee kolomme:

25%
75%

Voorbeeld

.menu {
  width: 25%;
  float: left;
}
.main {
  width: 75%;
  float: left;
}

Die voorbeeld hierbo is goed as die webblad slegs twee kolomme bevat.

Ons wil egter 'n responsiewe roosteraansig met 12 kolomme gebruik om meer beheer oor die webblad te hê.

Eerstens moet ons die persentasie vir een kolom bereken: 100% / 12 kolomme = 8,33%.

Dan maak ons ​​een klas vir elk van die 12 kolomme, class="col-"en 'n getal wat definieer hoeveel kolomme die afdeling moet strek:

CSS:

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

 Al hierdie kolomme moet na links sweef en 'n opvulling van 15px hê:

CSS:

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

Elke ry moet toegedraai word in 'n <div>. Die aantal kolomme binne 'n ry moet altyd 12 optel:

HTML:

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

Die kolomme binne 'n ry sweef almal na links, en word dus uit die vloei van die bladsy geneem, en ander elemente sal geplaas word asof die kolomme nie bestaan ​​nie. Om dit te voorkom, sal ons 'n styl byvoeg wat die vloei skoonmaak:

CSS:

.row::after {
  content: "";
  clear: both;
  display: table;
}

Ons wil ook 'n paar style en kleure byvoeg om dit beter te laat lyk:

Voorbeeld

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color :#33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}

Let daarop dat die webblad in die voorbeeld nie goed lyk as jy die grootte van die blaaiervenster na 'n baie klein breedte verander nie. In die volgende hoofstuk sal jy leer hoe om dit reg te stel.