hujung hadapan web
tutorial css
CSS Tidak Sukar(Anda Hanya Hilang Asas Ini)- Menguasai Asas (Bahagian 2)
CSS Tidak Sukar(Anda Hanya Hilang Asas Ini)- Menguasai Asas (Bahagian 2)
Terima kasih semua atas komen pada artikel lepas, ia sangat bermakna. Saya harap anda belajar satu atau dua perkara daripada artikel ini.
Dalam artikel ini, kami akan meneroka dua konsep asas dalam CSS—kedudukan dan reka letak. Kedudukan dan reka letak adalah nadi dalam mencipta halaman web yang menarik dan berfungsi secara visual. Menguasai konsep ini membolehkan anda menghasilkan reka bentuk responsif yang meningkatkan pengalaman pengguna. Pada akhirnya, anda akan tahu cara menggunakan teknik ini untuk menstruktur halaman web anda seperti profesional.
- Kedudukan dan Susun Atur
Penedudukan CSS mengawal cara elemen diletakkan atau diletakkan pada halaman web. Kedudukan dipengaruhi oleh nilai offset Atas, Bawah, Kiri dan Kanan apabila berkenaan. Terdapat 5 nilai Kedudukan CSS utama;
1. Statik: Semua elemen HTML diletakkan statik secara lalai. Ini bermakna elemen tidak berubah dan tidak bergerak serta tidak dipengaruhi oleh nilai offset Atas, Bawah, Kiri dan Kanan.
2. Relatif: Elemen diletakkan relatif kepada kedudukan normalnya.
3. Mutlak: Elemen diletakkan secara relatif kepada nenek moyang terdekat (ibu bapa) atau port pandangan.
4. Dibetulkan: Elemen diposisikan relatif kepada port pandangan dan kekal tetap semasa menatal.
5. Melekit: Kedudukan melekit membolehkan elemen bertukar antara kedudukan relatif dan tetap berdasarkan kedudukan tatal dan mengimbangi nilai Atas, Bawah, Kiri dan Kanan.
Di bawah ialah ilustrasi yang menerangkan kedudukan CSS.
Berikut ialah kod yang membantu menghidupkan ilustrasi itu. Jangan ragu untuk menyalin dan mengubah suai anda sendiri.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Positioning</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<pre class="brush:php;toolbar:false">*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Arial, sans-serif;
background-color: #f2f2f2;
display: grid;
place-content: center;
min-height: 100vh;
}
.container{
width: 100%;
max-width: 1200px;
height: auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
border: 1px solid red;
gap: 20px;
padding: 20px;
}
.static{
background-color: #ccc;
padding: 20px;
border: 1px solid black;
width: 300px;
position: static;
}
.relative{
background-color: #ccc;
padding: 20px;
border: 1px solid black;
width: 300px;
position: relative;
top:30px;
right: 30px;
}
.absolute{
background-color: #ccc;
padding: 20px;
border: 1px solid black;
width: 300px;
position: absolute;
top: 30px;
right: 100px;
}
.fixed{
background-color: #ccc;
padding: 20px;
border: 1px solid black;
width: 300px;
position: fixed;
bottom: 0;
right: 0;
}
.sticky{
background-color: #ccc;
padding: 20px;
border: 1px solid black;
width: 300px;
position: sticky;
top: 0;
right: 0;
}
— Jeda, Tarik nafas dalam-dalam, dan kemudian teruskan!!—
- Reka Letak CSS
1. Flexbox: Ini ialah kaedah susun atur satu dimensi yang digunakan untuk meletakkan item dalam satu paksi (mendatar dan menegak).
Ciri flexbox
- paparan: flex - Ini mencipta kotak flex untuk bekas.
- align-item: tengah - Ini mengawal penjajaran menegak bekas.
- justify-content: space-between - Ini mengawal penjajaran mendatar bekas.
- jurang: menambah jarak antara item fleksibel tanpa memerlukan jidar.
Berikut ialah sebelum dan selepas Bar Navigasi ringkas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Navigation Bar using CSS Flexbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<pre class="brush:php;toolbar:false">* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: white;
}
nav {
background-color: #333;
color: #fff;
padding: 10px;
}
ul {
display: flex;
align-items: center;
gap: 2rem;
}
Keputusan:
2. Grid: Ini ialah kaedah reka letak 2 dimensi yang digunakan dalam mencipta baris dan lajur.
Ciri
- paparan: grid - Ini mencipta Grid untuk bekas.
- grid-template-columns/grid-template-rows - Ini mentakrifkan baris atau lajur untuk bekas.
- repeat(2, 1fr) - Ini menghasilkan 2 lajur yang sama lebar.
- jurang: 10px- Menambah jarak antara item grid.
Berikut ialah sebelum dan selepas beberapa foto kucing yang saya temui di Unsplash.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Positioning</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<pre class="brush:php;toolbar:false">*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: Arial, sans-serif;
background-color: #f2f2f2;
display: grid;
place-content: center;
min-height: 100vh;
}
.container{
width: 100%;
max-width: 1200px;
height: auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
border: 1px solid red;
gap: 20px;
padding: 20px;
}
.static{
background-color: #ccc;
padding: 20px;
border: 1px solid black;
width: 300px;
position: static;
}
.relative{
background-color: #ccc;
padding: 20px;
border: 1px solid black;
width: 300px;
position: relative;
top:30px;
right: 30px;
}
.absolute{
background-color: #ccc;
padding: 20px;
border: 1px solid black;
width: 300px;
position: absolute;
top: 30px;
right: 100px;
}
.fixed{
background-color: #ccc;
padding: 20px;
border: 1px solid black;
width: 300px;
position: fixed;
bottom: 0;
right: 0;
}
.sticky{
background-color: #ccc;
padding: 20px;
border: 1px solid black;
width: 300px;
position: sticky;
top: 0;
right: 0;
}
Keputusan:
Jadual Perbandingan
| Feature | Flexbox | Grid |
|---|---|---|
| Axis | One-dimensional | Two-dimensional |
| Alignment | Horizontal/Vertical | Rows and columns |
| Best for | Navigation Bars | Layouts like dashboards |
| Flexibility | Better for small components | Better for page layouts |
Kedudukan dan Reka Letak ialah asas CSS. Memahami masa dan cara menggunakannya bukan sahaja akan menjadikan pengalaman penggayaan anda lebih mudah tetapi juga lebih menyeronokkan dan cekap. Walaupun artikel ini membolehkan anda bermula dengan Flexbox dan Grid, saya akan menerbitkan panduan yang lebih mendalam yang meneroka ciri, petua dan helah lanjutan mereka tidak lama lagi. Nantikan untuk itu!
Dan itu adalah penutup Menguasai Asas CSS! Saya harap anda seronok membaca ini sama seperti saya seronok menulisnya. Tetapi sebelum kita berpisah, saya ingin mendengar daripada anda:
Kaedah susun atur CSS yang manakah anda lebih suka untuk projek anda—Flexbox atau Grid? Dan kenapa?
Jangan ragu untuk berkongsi pendapat anda dalam ulasan di bawah.
Selamat tinggal sekarang!!!!
Atas ialah kandungan terperinci CSS Tidak Sukar(Anda Hanya Hilang Asas Ini)- Menguasai Asas (Bahagian 2). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1665
14
1423
52
1321
25
1269
29
1249
24
Bukti konsep untuk menjadikan sass lebih cepat
Apr 16, 2025 am 10:38 AM
Pada permulaan projek baru, kompilasi SASS berlaku dalam sekejap mata. Ini terasa hebat, terutamanya apabila ia dipasangkan dengan BrowserSync, yang dimuat semula
Perbandingan pembekal bentuk statik
Apr 16, 2025 am 11:20 AM
Mari kita cuba menyusun istilah di sini: "Penyedia Borang Statik." Anda membawa html anda
Berita Platform Mingguan: Atribut Memuat HTML, Spesifikasi ARIA Utama, dan Bergerak Dari IFRAME ke Shadow Dom
Apr 17, 2025 am 10:55 AM
Pada minggu ini, berita platform, Chrome memperkenalkan atribut baru untuk memuatkan, spesifikasi aksesibiliti untuk pemaju web, dan gerakan BBC
Perjanjian dengan elemen seksyen
Apr 12, 2025 am 11:39 AM
Dua artikel diterbitkan pada hari yang sama:
Beberapa tangan dengan elemen dialog HTML
Apr 16, 2025 am 11:33 AM
Ini saya melihat elemen HTML untuk kali pertama. Saya telah menyedarinya untuk seketika, tetapi Haven ' t mengambilnya untuk putaran lagi. Ia mempunyai cukup keren dan
Slider Multi-Thumb: Kes Umum
Apr 12, 2025 am 10:52 AM
Bahagian pertama siri dua bahagian ini terperinci bagaimana kita boleh mendapatkan slider dua thumb. Sekarang kita akan melihat kes multi-thumb umum, tetapi dengan yang berbeza dan
Bagaimana kami menandakan font Google dan mencipta goofonts.com
Apr 12, 2025 pm 12:02 PM
Goofonts adalah projek sampingan yang ditandatangani oleh isteri pemaju dan suami pereka, kedua-duanya peminat besar tipografi. Kami telah menandakan Google
Ia ' s di kepala: Menguruskan Ketua Dokumen Tapak Berteakona dengan Helmet React
Apr 15, 2025 am 11:01 AM
Ketua dokumen mungkin bukan bahagian paling glamor dari laman web, tetapi apa yang masuk ke dalamnya boleh dikatakan sama pentingnya dengan kejayaan laman web anda sebagai
