masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

HTML+CSS Mudah Dimulakan dengan Model Terapung

Elemen berbentuk

sangat menonjol sehingga menduduki barisannya sendiri Bagaimana jika kita mahu dua elemen berbentuk blok dipaparkan bersebelahan? Jangan risau, menetapkan elemen terapung boleh mencapai hasrat ini.

Mana-mana elemen tidak boleh terapung secara lalai, tetapi ia boleh ditakrifkan sebagai terapung menggunakan CSS seperti div, p, table, img, dll. boleh ditakrifkan sebagai terapung

Mari kita lakukan. ini Tulis contoh terapung, kodnya adalah seperti berikut 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>流动模式下的内联元素</title>
<style type="text/css">
    #dv1{
      width:100px;
      height:100px;
      background:green;
    }

    #dv2{
      width:100px;
      height:100px;
      background:red;
    }
</style>
</head>
<body>
      <div id="dv1"></div>
      <div id="dv2"></div>
</body>
</html>

Kod di atas ialah elemen blok div menduduki baris eksklusif Sekarang kita perlu meletakkannya pada satu baris untuk dipaparkan, dan kemudian menambah jarak antara kedua-dua div. Sila lihat kod berikut: 

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>流动模式下的内联元素</title>
<style type="text/css">
    #dv1{
      width:100px;
      height:100px;
      background:green;
      float:left;
    }

    #dv2{
      width:100px;
      height:100px;
      background:red;
      float:left;
      margin-left:5px;  /*调节俩个div之间的距离*/
    }
</style>
</head>
<body>
      <div id="dv1"></div>
      <div id="dv2"></div>
</body>
</html>

Dengan cara ini, kesan yang kita inginkan selesai Pertama, kita perlu membuat apungan ke kiri untuk div pertama, dan yang sama untuk yang kedua satu. Kemudian kedua-duanya akan dipautkan bersama dan dipaparkan pada baris yang sama

Seterusnya kita membuat sempadan kiri untuk div kedua dan itu sahaja

Meneruskan pembelajaran
||
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>流动模式下的内联元素</title> <style type="text/css"> #dv1{ width:100px; height:100px; background:green; float:left; } #dv2{ width:100px; height:100px; background:red; float:left; margin-left:5px; /*调节俩个div之间的距离*/ } </style> </head> <body> <div id="dv1"></div> <div id="dv2"></div> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492510 permainan