Layout Laman Satu Lajur Mudah dalam CSS
Dalam pelajaran ini, kita akan berlatih mencipta layout laman satu lajur yang mudah. Mari kita, sebagai contoh, buat layout seperti ini:
Mari kita mulakan pelaksanaannya. Setiap layout
biasanya bermula dengan div umum bernama
wrapper, yang mengandungi keseluruhan laman web:
<div id="wrapper">
</div>
Dalam kes kami, wrapper akan diselaraskan di tengah skrin:
#wrapper {
width: 800px;
margin: 50px auto;
}
Ia juga akan mempunyai sempadan:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Sekarang mari kita buat struktur utama halaman. Ia akan terdiri daripada menu dan kandungan utama - kandungan:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Mari tambahkan kandungan untuk blok kami:
<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>
Sekarang kita boleh menambah gaya kepada blok kami. Mari tambah gaya untuk menu:
#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;
}
Dan sekarang mari tambah gaya untuk elemen kandungan:
#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;
}
Sekarang kita boleh kumpulkan semua kod bersama:
<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;
}
Petua 1
Paling mudah untuk memberikan jarak dari atas ke bawah.
Sebagai contoh, kita ada menu dan kandungan,
dan di antara mereka - ruang kosong. Jelas sekali,
ruang ini boleh dibuat dengan jarak bawah
menu, jarak atas kandungan,
atau pengaruh serentak mereka. Dalam kes ini
lebih baik tetapkan jarak bawah untuk menu, dan untuk kandungan
buang padding dan margin secara lalai
untuk h1.
Petua 2
Anak elemen tidak sepatutnya membentuk jarak antara
elemen induk. Sebagai contoh, kita ada menu.
Jarak bawah menu ini boleh dibentuk
sama ada dengan margin div dengan menu, atau margin
pautan. Lebih baik pilih pilihan pertama, kerana
pautan tidak sepatutnya bertindak melalui kepala
induk.
Petua 3
Katakan antara dua elemen ada jarak
dan dalam kes ini secara visual tiada bezanya,
apa yang perlu dipilih untuk jarak - margin atau padding.
Dalam kes ini pilih margin, kerana
ia sepatutnya mencipta jarak antara
elemen.
