CSS -webwerfuitleg
Webwerfuitleg
'n Webwerf word dikwels verdeel in koptekste, spyskaarte, inhoud en 'n voetskrif:
Daar is tonne verskillende uitlegontwerpe om van te kies. Die struktuur hierbo is egter een van die algemeenste, en ons sal dit in hierdie tutoriaal van nader bekyk.
Opskrif
'n Kopskrif is gewoonlik bo-aan die webwerf (of reg onder 'n boonste navigasiekieslys). Dit bevat dikwels 'n logo of die webwerf se naam:
Voorbeeld
.header {
background-color: #F1F1F1;
text-align:
center;
padding: 20px;
}
Resultaat
Header
Navigasiebalk
'n Navigasiebalk bevat 'n lys skakels om besoekers te help om deur jou webwerf te navigeer:
Voorbeeld
/* The navbar container */
.topnav {
overflow: hidden;
background-color: #333;
}
/* Navbar links */
.topnav a {
float:
left;
display: block;
color:
#f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* Links - change color on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
Resultaat
Inhoud
Die uitleg in hierdie afdeling hang dikwels van die teikengebruikers af. Die mees algemene uitleg is een (of die kombinasie daarvan) van die volgende:
- 1-kolom (dikwels gebruik vir mobiele blaaiers)
- 2-kolom (dikwels gebruik vir tablette en skootrekenaars)
- 3-kolom uitleg (slegs gebruik vir rekenaars)
1-kolom:
2-kolom:
3-kolom:
Ons sal 'n 3-kolom-uitleg skep en dit verander na 'n 1-kolom-uitleg op kleiner skerms:
Voorbeeld
/* Create three equal columns that float next to each other */
.column {
float: left;
width: 33.33%;
}
/* Clear floats after the
columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive
layout - makes the three columns stack on top of each other instead of next
to each other on smaller screens (600px wide or less) */
@media screen and (max-width:
600px) {
.column
{
width: 100%;
}
}
Resultaat
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Column
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.
Wenk: Om 'n 2-kolom uitleg te skep, verander die breedte na 50%. Om 'n 4-kolom uitleg te skep, gebruik 25%, ens.
Wenk: Wonder jy hoe die @media-reël werk? Lees meer daaroor in ons CSS Medianavrae-hoofstuk .
Wenk: 'n Meer moderne manier om kolomuitlegte te skep, is om CSS Flexbox te gebruik. Dit word egter nie in Internet Explorer 10 en vroeër weergawes ondersteun nie. As jy IE6-10-ondersteuning benodig, gebruik vlotte (soos hierbo getoon).
Om meer te wete te kom oor die Flexible Box-uitlegmodule, lees ons CSS Flexbox-hoofstuk .
Ongelyke kolomme
Die hoofinhoud is die grootste en belangrikste deel van jou werf.
Dit is algemeen met ongelyke kolomwydtes, sodat die meeste van die spasie vir die hoofinhoud gereserveer is. Die sy-inhoud (indien enige) word dikwels gebruik as 'n alternatiewe navigasie of om inligting te spesifiseer wat relevant is tot die hoofinhoud. Verander die breedtes soos jy wil, onthou net dat dit in totaal tot 100% moet optel:
Voorbeeld
.column {
float: left;
}
/* Left and right column */
.column.side {
width: 25%;
}
/* Middle column */
.column.middle
{
width: 50%;
}
/* Responsive layout - makes
the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column.side, .column.middle
{
width: 100%;
}
}
Resultaat
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Main Content
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.
Side
Lorem ipsum dolor sit amet, consectetur adipiscing elit...
Voetskrif
Die voetskrif word onderaan jou bladsy geplaas. Dit bevat dikwels inligting soos kopiereg en kontakinligting:
Voorbeeld
.footer {
background-color: #F1F1F1;
text-align:
center;
padding: 10px;
}
Resultaat
Responsiewe webwerf-uitleg
Deur van die CSS-kode hierbo te gebruik, het ons 'n responsiewe webwerf-uitleg geskep, wat wissel tussen twee kolomme en volwydte kolomme, afhangende van die skermwydte:
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