Biasanya kami jarang menambah sempadan pada tag p, tetapi apabila mereka bentuk, kami menambah sempadan pada tag div, supaya ia kelihatan lebih jelas
Mari kita lakukan contoh: Contohnya, pada halaman utama tapak web, bahagian tengah kepala (dibahagikan kepada dua bahagian) dan bahagian bawah, bagaimana kita melaksanakan gaya susun atur seperti ini
Mula-mula kita perlu memberikan div yang besar, dan meletakkan kedua-dua bahagian tengah? kepala dan bahagian bawah div, kita perlu membuat gaya css untuk div pertama, dan kemudian menambah 3 tag div
pada div ini:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #dv1{ width:800px; height:500px; border:1px solid red; margin:0 auto; /*居中*/ } </style> </head> <body> <div id="dv1"> <div id="top">头部</div> <div id="cen">中部</div> <div id="but">底部</div> </div> </body> </html>
Seterusnya , kita perlu menambah tag div pada bahagian tengah dan bawah kepala masing-masing, kod lengkap adalah seperti berikut:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #dv1{ width:800px; height:500px;border:1px solid red;margin:0 auto; /*居中*/text-align:center; } #top{ width:780px;height:100px;border:1px solid green;margin:0 auto;background-color:#ccc;margin-top:30px; } #cen{ width:780px; height:200px;border:1px solid black;margin:0 auto;background-color:#f77;margin-top:5px; } #but{ width:780px;height:100px;border:1px solid #f60;margin:0 auto;margin-top:5px; } #left{ width:200px; height:198px; border:1px solid green; margin-left:5px; float:left; } #right{ width:570px; height:198px; border:1px solid black; float:right; } </style> </head> <body> <div id="dv1"> <div id="top">头部</div> <div id="cen"> <div id="left">左边</div> <div id="right">右边</div> </div> <div id="but">底部</div> </div> </body> </html>
Nota: Sempadan juga harus dibahagikan kepada bahagian atas, bawah, kiri dan kanan.
atas sempadan atas
sempadan-kiri kiri
sempadan-kanan kanan
sempadan-butang bawah