Cara menggunakan susun atur Kedudukan CSS untuk mereka bentuk susun atur kad untuk halaman web-tutorial css-php.cn

Rumah

hujung hadapan web

tutorial css

Cara menggunakan susun atur Kedudukan CSS untuk mereka bentuk susun atur kad untuk halaman web

王林

Sep 28, 2023 am 08:17 AM

reka bentuk web susun atur kedudukan css susun atur kad

如何使用CSS Positions布局设计网页的卡片布局

Cara menggunakan susun atur Kedudukan CSS untuk mereka bentuk susun atur kad untuk halaman web

Dalam reka bentuk web, reka letak kad ialah kaedah reka bentuk yang biasa dan popular . Ia membahagikan kandungan kepada kad bebas, setiap kad mengandungi maklumat tertentu, dan boleh mencipta kesan halaman yang kemas dan berlapis dengan mudah. Dalam artikel ini, kami akan memperkenalkan cara menggunakan susun atur Kedudukan CSS untuk mereka bentuk reka letak kad halaman web dan melampirkan contoh kod tertentu.

Buat struktur HTML

Pertama, kita perlu mencipta struktur HTML untuk mewakili reka letak kad. Berikut ialah contoh mudah:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="card-container">
    <div class="card">
      <h2>卡片标题</h2>
      <p>卡片内容...</p>
    </div>
    <div class="card">
      <h2>卡片标题</h2>
      <p>卡片内容...</p>
    </div>
    <div class="card">
      <h2>卡片标题</h2>
      <p>卡片内容...</p>
    </div>
  </div>
</body>
</html>

Salin selepas log masuk

Dalam kod di atas, kami menggunakan div bekas (kelas="kad-bekas") yang mengandungi berbilang kad dan setiap kad ialah Elemen div bebas (class= "kad"), yang mengandungi tajuk dan kandungan.

Gaya CSS

Seterusnya, kita perlu menggunakan gaya CSS untuk mengawal reka letak kad. Kami akan menggunakan sifat CSS Positions untuk meletakkan kad.

.card-container {
  display: flex;
  justify-content: center;
}

.card {
  width: 300px;
  height: 200px;
  background-color: #F2F2F2;
  margin: 10px;
  padding: 20px;
  box-sizing: border-box;
  border-radius: 5px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

Salin selepas log masuk

Dalam kod di atas, kami menggunakan reka letak flex (paparan: flex) untuk memusatkan kad secara mendatar (justify-content: center).

Gaya kad termasuk lebar dan tinggi (lebar dan tinggi), warna latar belakang (warna latar belakang), jidar luar (margin) dan jidar dalam (lapik), dan jejari jidar (jejari sempadan) ) dan bayang (box-shadow), dsb.

Gunakan kedudukan relatif

Jika kita mahu kad diletakkan secara bebas dalam kedudukan berbeza dalam bekas, kita boleh menggunakan kedudukan relatif (kedudukan : relatif ) untuk dicapai.

.card {
  position: relative;
}

.card:first-child {
  top: -100px;
  left: -100px;
}

.card:nth-child(2) {
  top: 50px;
  left: 50px;
}

.card:nth-child(3) {
  top: 200px;
  left: 200px;
}

Salin selepas log masuk

Dalam kod di atas, kami menetapkan atribut kedudukan setiap kad kepada relatif. Kemudian gunakan sifat atas dan kiri untuk menentukan kedudukan setiap kad berbanding bekas.

Sebagai contoh, kad pertama menggunakan pemilih kelas pseudo :first-child untuk menetapkan kedudukannya berbanding bekas untuk berada di atas (atas: -100px) dan kiri (kiri: -100px). Kad kedua menggunakan pemilih kelas pseudo :nth-child(2) untuk menetapkan kedudukannya berbanding bekas ke bawah (atas: 50px) dan kanan (kiri: 50px). Kad ketiga menggunakan pemilih kelas pseudo :nth-child(3) untuk menetapkan kedudukannya berbanding bekas ke bawah (atas: 200px) dan kanan (kiri: 200px).

Gunakan kedudukan mutlak

Jika kita mahu kad diletakkan pada kedudukan tetap dalam bekas tanpa dipengaruhi oleh unsur lain, kita boleh menggunakan Kedudukan mutlak (kedudukan: mutlak) dilaksanakan.

.card-container {
  position: relative;
}

.card {
  position: absolute;
}

.card:nth-child(1) {
  top: 0;
  left: 0;
}

.card:nth-child(2) {
  top: 0;
  right: 0;
}

.card:nth-child(3) {
  bottom: 0;
  right: 0;
}

Salin selepas log masuk

Dalam kod di atas, kami menetapkan sifat kedudukan bekas kepada relatif. Dan tetapkan sifat kedudukan setiap kad kepada mutlak. Kemudian gunakan sifat atas, kanan, bawah dan kiri untuk menentukan kedudukan setiap kad berbanding bekas.

Sebagai contoh, kad pertama menggunakan pemilih kelas pseudo :nth-child(1) untuk menetapkan kedudukannya berbanding bekas di sudut kiri atas (atas: 0, kiri: 0). Kad kedua menggunakan pemilih kelas pseudo :nth-child(2) untuk menetapkan kedudukannya berbanding bekas di penjuru kanan sebelah atas (atas: 0, kanan: 0). Kad ketiga menggunakan pemilih kelas pseudo :nth-child(3) dan menetapkan kedudukannya berbanding bekas di sudut kanan bawah (bawah: 0, kanan: 0).

Ringkasan:

Menggunakan susun atur Kedudukan CSS untuk mereka bentuk reka letak kad halaman web ialah kaedah yang mudah dan berkuasa. Dengan menggunakan kaedah penentududukan yang berbeza, kita boleh mencapai kedudukan bebas atau tetap kad pada halaman. Dengan struktur susun atur dan tetapan gaya yang munasabah, kami boleh mencipta reka letak kad berhierarki yang cantik dengan mudah.

Saya harap contoh kod dalam artikel ini dapat membantu anda lebih memahami dan menggunakan reka letak Kedudukan CSS untuk mereka bentuk reka letak kad, dan membawa lebih banyak inspirasi dan kreativiti kepada reka bentuk web anda.

Atas ialah kandungan terperinci Cara menggunakan susun atur Kedudukan CSS untuk mereka bentuk susun atur kad untuk halaman web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

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

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Berapa lama masa yang diperlukan untuk mengalahkan fiksyen berpecah?

1 bulan yang lalu By DDD

R.E.P.O. Tetapan grafik terbaik

2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

1 minggu yang lalu By DDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

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)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7413

Tutorial CakePHP

1359

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Tunjukkan Lagi

Related knowledge

Mendedahkan kelebihan unik kedudukan mutlak dalam reka bentuk web Jan 23, 2024 am 08:16 AM

Terokai kelebihan unik kedudukan mutlak dalam reka bentuk web Dalam reka bentuk web, kedudukan mutlak ialah kaedah reka letak yang biasa digunakan. Dengan menggunakan kedudukan mutlak, elemen boleh diletakkan dengan tepat pada lokasi tertentu pada halaman web, dan beberapa kesan susun atur khas boleh dicapai dengan mudah. Artikel ini meneroka kelebihan ini dan menggambarkannya dengan contoh kod khusus. Kedudukan elemen yang tepat Kedudukan mutlak membolehkan kawalan tepat ke atas kedudukan elemen pada halaman web. Dengan menentukan atribut atas, kanan, bawah dan kiri elemen, elemen itu boleh

Cara membuat halaman susun atur kad menggunakan HTML dan CSS Oct 27, 2023 pm 12:30 PM

Cara membuat halaman susun atur kad menggunakan HTML dan CSS Dalam reka bentuk web, susun atur kad telah menjadi trend reka bentuk yang sangat popular. Ia memaparkan maklumat dalam bentuk kad, menjadikan halaman kelihatan bersih, intuitif dan mudah dinavigasi. Dalam artikel ini, saya akan memperkenalkan anda kepada cara menggunakan HTML dan CSS untuk mencipta halaman susun atur kad yang mudah, dan memberikan contoh kod khusus. Langkah 1: Buat Struktur HTML Mula-mula, kita perlu mencipta struktur asas HTML. Berikut ialah kod contoh mudah: &

Kemahiran reka bentuk web dan perkongsian pengalaman praktikal berdasarkan CSS3 Sep 08, 2023 pm 07:07 PM

Perkongsian kemahiran reka bentuk web dan pengalaman praktikal berdasarkan CSS3 Dalam era Internet hari ini, reka bentuk web menjadi semakin penting. Dengan kemunculan CSS3, pereka kini boleh menggunakan pelbagai kesan yang menakjubkan untuk melibatkan pengguna. Artikel ini akan berkongsi beberapa kemahiran reka bentuk web dan pengalaman praktikal berdasarkan CSS3, bertujuan untuk membantu pembaca meningkatkan tahap reka bentuk web mereka. 1. Gunakan kesan peralihan. Kesan peralihan boleh menghasilkan kesan animasi yang lancar untuk elemen dari satu keadaan ke keadaan yang lain. Dengan menggunakan sifat peralihan CSS3, kita boleh

Kaji kesan memperkenalkan rangka kerja pihak ketiga CSS pada reka bentuk web Jan 16, 2024 am 10:32 AM

Meneroka kesan pengenalan rangka kerja pihak ketiga ke dalam CSS pada reka bentuk web Pengenalan: Dengan perkembangan pesat Internet, reka bentuk web telah menjadi semakin penting. Untuk meningkatkan pengalaman pengguna dan menyediakan fungsi yang lebih kaya, pembangun selalunya perlu menggunakan rangka kerja pihak ketiga untuk membantu reka bentuk dan pembangunan. Artikel ini akan meneroka kesan memperkenalkan rangka kerja pihak ketiga CSS pada reka bentuk web dan memberikan contoh kod khusus. 1. Apakah rangka kerja pihak ketiga CSS? Rangka kerja pihak ketiga CSS ialah satu set gaya dan komponen CSS yang telah ditetapkan yang boleh dipanggil terus semasa membina halaman web. Rangka kerja ini kaya dengan kandungan,

Cara menggunakan susun atur Kedudukan CSS untuk mereka bentuk susun atur kad untuk halaman web Sep 28, 2023 am 08:17 AM

Cara menggunakan reka letak CSSPositions untuk mereka bentuk reka letak kad untuk halaman web Dalam reka bentuk web, reka letak kad adalah kaedah reka bentuk yang biasa dan popular. Ia membahagikan kandungan kepada kad bebas, setiap kad mengandungi maklumat tertentu, dan boleh mencipta kesan halaman yang kemas dan berlapis dengan mudah. Dalam artikel ini, kami akan memperkenalkan cara menggunakan reka letak CSSPositions untuk mereka bentuk reka letak kad halaman web dan melampirkan contoh kod tertentu. Buat struktur HTML Mula-mula, kita perlu mencipta struktur HTML untuk mewakili susun atur kad.

Panduan ringkas: Cipta rangka kerja CSS yang hebat untuk meningkatkan profesionalisme dan keindahan reka bentuk web anda Jan 16, 2024 am 09:02 AM

Lima langkah untuk mengajar anda cara mencipta rangka kerja CSS yang sempurna: Jadikan reka bentuk web anda lebih profesional dan cantik Mengekalkan reka bentuk web yang profesional dan cantik adalah impian setiap pereka web. Dan mewujudkan rangka kerja CSS yang sempurna adalah kunci untuk mencapai matlamat ini. Rangka kerja CSS ialah satu set helaian gaya dan peraturan yang telah ditetapkan yang membantu pereka bentuk dengan cepat membina reka letak dan gaya halaman web. Hari ini, saya akan memperkenalkan anda kepada kaedah lima langkah untuk membantu anda mencipta rangka kerja CSS yang sempurna. Berikut adalah langkah khusus: Langkah 1: Analisis keperluan dan tentukan struktur rangka kerja pada permulaan

Medan aplikasi pemilih elemen dalam reka bentuk web Jan 13, 2024 am 10:35 AM

Aplikasi pemilih elemen dalam reka bentuk web memerlukan contoh kod khusus Dalam reka bentuk web, pemilih elemen ialah pemilih CSS yang sangat penting, yang boleh membantu kami mengawal dan melaraskan gaya elemen dalam halaman web. Dengan menggunakan pemilih elemen secara fleksibel, pelbagai kesan reka bentuk web yang indah boleh dicapai. 1. Sintaks asas dan penggunaan pemilih elemen Pemilih elemen ialah jenis pemilih CSS yang paling mudah Ia memilih elemen yang sepadan dengan menyatakan nama tag bagi elemen HTML. Sintaks asas pemilih elemen ialah: nama tag {

Apa itu Dreamweaver Jun 13, 2023 pm 02:53 PM

Dreamweaver ialah perisian reka bentuk web yang dilancarkan oleh Adobe Ia menyediakan editor halaman visual dan juga menyokong penyuntingan manual kod HTML, CSS dan JavaScript. Ia mempunyai banyak ciri dan alatan yang membantu pengguna membuat halaman web responsif, apl dan apl mudah alih dengan mudah.

See all articles