Paprasti vieno stulpelio svetainės maketai CSS
Šioje pamokoje praktikuosimės kurti paprastus vieno stulpelio svetainės maketus. Pavyzdžiui, sukurkime tokį maketą:
Pradėkime įgyvendinti. Kiekvienas maketas
paprastai prasideda bendru div su pavadinimu
wrapper, kuriame yra visa likusi svetainė:
<div id="wrapper">
</div>
Mūsų atveju wrapperis bus centruotas ekrano centre:
#wrapper {
width: 800px;
margin: 50px auto;
}
Jis taip pat turės rėmelį:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Dabar sukurkime pagrindinę puslapio struktūrą. Ji sudarys iš meniu ir pagrindinio turinio - kontento:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Pridėkime mūsų blokų turinį:
<div id="wrapper">
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
Dabar galime pridėti stilius mūsų blokams. Pridėkime stilių meniu:
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
O dabar pridėkime stilius turinio elementams:
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
Dabar galime sudėti visą kodą kartu:
<div id="wrapper">
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
Patarimas 1
Patogiausia atitraukimus duoti iš viršaus į apačią.
Pavyzdžiui, mes turime meniu ir turinį,
o tarp jų - tuščia erdvė. Akivaizdu,
kad ši erdvė gali būti padaryta apatiniu
meniu atitraukimu, viršutiniu turinio atitraukimu,
arba jų vienu metu. Šiuo atveju
geriau nustatyti apatinį meniu atitraukimą, o turiniui
pašalinti viršutinį padding ir margin pagal nutylėjimą
h1 elementui.
Patarimas 2
Paveldėtojai neturėtų formuoti atitraukimo tarp
tėvinių elementų. Pavyzdžiui, mes turime meniu.
Apatinį šio meniu atitraukimą galima suformuoti
arba margin div su meniu, arba margin
nuorodų. Geriau pasirinkti pirmąjį variantą, nes
nuorodos neturėtų veikti per tėvo galvą.
Patarimas 3
Tarkime, tarp dviejų elementų yra atitraukimas
ir šiuo atveju vizualiai nėra skirtumo,
ką pasirinkti atitraukimui - margin ar padding.
Šiuo atveju pasirinkite margin, nes
būtent jis turėtų kurti atitraukimus tarp
elementų.
