Model lapisan k...LOGIN

Model lapisan kemasukan mudah HTML+CSS

Apakah model lapisan?

Apakah model susun atur lapisan? Model susun atur lapisan adalah seperti fungsi penyuntingan lapisan yang sangat popular dalam perisian imej PhotoShop Setiap lapisan boleh diposisikan dan dikendalikan dengan tepat Namun, dalam bidang reka bentuk web, susun atur lapisan belum popular kerana pergerakan saiz halaman web . Walau bagaimanapun, masih terdapat kelebihan untuk menggunakan susun atur lapisan secara setempat pada halaman web. Mari belajar tentang susun atur lapisan dalam html.

Bagaimana untuk meletakkan elemen html dengan tepat dalam halaman web, sama seperti lapisan dalam perisian imej PhotoShop, setiap lapisan boleh diletakkan dan dikendalikan dengan tepat. CSS mentakrifkan satu set sifat kedudukan untuk menyokong model susun atur lapisan.

Model lapisan mempunyai tiga bentuk:

1. Kedudukan mutlak (kedudukan: mutlak)

2. Kedudukan relatif (kedudukan: relatif)

3 . Kedudukan: tetap Kedudukan relatif dalam model memerlukan tetapan kedudukan:relatif (menunjukkan kedudukan relatif), yang menentukan kedudukan mengimbangi elemen dalam aliran dokumen biasa melalui atribut kiri, kanan, atas dan bawah. Proses penentududukan relatif adalah untuk menjana elemen dalam mod statik (terapung) terlebih dahulu (dan elemen terapung seperti lapisan), dan kemudian bergerak secara relatif kepada kedudukan sebelumnya Arah dan amplitud pergerakan ditentukan oleh kiri, kanan , atribut atas dan bawah , kedudukan sebelum offset kekal tidak berubah.

Kedudukan tetap

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>层模型</title>
<style type="text/css">
    #dv1{
      width:100px;
      height:100px;
      background:green;
      position:absolute;   /*绝对定位*/
      left:50px;
      top:50px;
    }
   
</style>
</head>
<body>
      <div id="dv1"></div>
</body>
</html>

bahagian seterusnya

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>层模型</title> <style type="text/css"> #dv1{ width:100px; height:100px; background:green; margin-left:50px; margin-top:50px; position:absolute; /*绝对定位*/ } </style> </head> <body> <div id="dv1"></div> </body> </html>
babperisian kursus