Rumah >hujung hadapan web >html tutorial >Apakah teknik susun atur untuk halaman html?
Teknologi susun atur HTML termasuk: 1. Teknologi susun atur terapung, agak serasi, tetapi ia akan menjejaskan reka letak apabila lebar halaman tidak mencukupi 2. Teknologi susun atur kedudukan mutlak 3. Teknologi susun atur elastik yang fleksibel; dan berprestasi tinggi Pengembangan automatik; 4. teknologi susun atur meja sel;
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.
Teknologi reka letak halaman HTML
1. keserasian reka letak agak baik, tetapi terapung mempunyai lebih banyak impak Apabila lebar halaman tidak mencukupi, ia akan menjejaskan reka letak.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>浮动布局</title> <style type="text/css"> .wrap1 div{ min-height: 200px; } .wrap1 .left{ float: left; width: 300px; background: red; } .wrap1 .right{ float: right; width: 300px; background: blue; } .wrap1 .center{ background: pink; } </style> </head> <body> <div class="wrap1"> <div class="left"></div> <div class="right"></div> <div class="center"> 浮动布局 </div> </div> </body> </html>2. Teknologi susun atur kedudukan mutlak
Susun letak kedudukan mutlak adalah pantas, tetapi keberkesanannya agak lemah kerana ia dipisahkan daripada aliran dokumen.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>绝对定位布局</title> <style type="text/css"> .wrap2 div{ position: absolute; min-height: 200px; } .wrap2 .left{ left: 0; width: 300px; background: red; } .wrap2 .right{ right: 0; width: 300px; background: blue; } .wrap2 .center{ left: 300px; right: 300px; background: pink; } </style> </head> <body> <div class="wrap2 wrap"> <div class="left"></div> <div class="center"> 绝对定位布局 </div> <div class="right"></div> </div> </body> </html>3. Teknologi reka letak anjal fleksibel
Kebolehsuaian yang baik, ketinggian boleh dikembangkan secara automatik
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>flex布局</title> <style type="text/css"> .wrap3{ display: flex; min-height: 200px; } .wrap3 .left{ flex-basis: 300px; background: red; } .wrap3 .right{ flex-basis: 300px; background: blue; } .wrap3 .center{ flex: 1; background: pink; } </style> </head> <body> <div class="wrap3 wrap"> <div class="left"></div> <div class="center"> flex布局 </div> <div class="right"></div> </div> </body> </html>4 Teknologi susun atur meja
mempunyai keserasian yang baik, tetapi kadangkala ketinggian tidak boleh diperbaiki kerana ia akan ditahan oleh kandungan.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>table-cell表格布局</title> <style type="text/css"> .wrap4{ display: table; width: 100%; height: 200px; } .wrap4>div{ display: table-cell; } .wrap4 .left{ width: 300px; background: red; } .wrap4 .right{ width: 300px; background: blue; } .wrap4 .center{ background: pink; } </style> </head> <body> <div class="wrap4 wrap"> <div class="left"></div> <div class="center"> 表格布局 </div> <div class="right"></div> </div> </body> </html>5. Teknologi reka letak grid
Tutorial yang disyorkan: tutorial video html
,<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>网格布局</title> <style type="text/css"> .wrap5{ display: grid; width: 100%; grid-template-rows: 200px; grid-template-columns: 300px auto 300px; } .wrap5 .left{ background: red; } .wrap5 .right{ background: blue; } .wrap5 .center{ background: pink; } </style> </head> <body> <div class="wrap5 wrap"> <div class="left"></div> <div class="center"> 网格布局 </div> <div class="right"></div> </div> </body> </html>tutorial video css
Atas ialah kandungan terperinci Apakah teknik susun atur untuk halaman html?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!