一、使用 二、使用元素布局 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>div布局</title> <style type="text/css"> body{ margin:0px; } #container{ width:100%; height:950px; background-color:darkgray; } #heading{ width:100%; height:10%; background-color:aqua; } #content_menu{ width:30%; height:80%; background-color:aquamarine; float:left; } #content_body{ width:70%; height:80%; background-color:blueviolet; float:left; } #footing{ width: 100%; height: 10%; background-color: black; clear: both; } </style></head><body> <div id="container"> <div id="heading">头部</div> <div id="content_menu">内容菜单</div> <div id="content_body">内容主体</div> <div id="footing">底部</div> </div></body></html>Nach dem Login kopieren元素布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>table布局</title> <style type="text/css"> body{ margin:0px; } #container{ width:100%; height:950px; background-color:darkgray; } #heading{ width:100%; height:10%; background-color:aqua; } #content_menu{ width:30%; height:80%; background-color:aquamarine; float:left; } #content_body{ width:70%; height:80%; background-color:blueviolet; float:left; } #footing{ width: 100%; height: 10%; background-color: black; clear: both; } </style></head><body> <table width="100%" height="950px" style="background-color: darkgray"> <tr> <td colspan="2" width="100%" height="10%" style="background-color:aqua">这是头部</td> </tr> <tr> <td width="30%" height="80%" style="background-color:blue">左菜单</td> <td width="70%" height="80%" style="background-color:blueviolet">主体</td> </tr> <tr> <td width="100%" height="10%" colspan="2" style="background-color: darkcyan">这是底部</td> </tr> </table></body></html>Nach dem Login kopieren
Verwandte Etiketten：
Quelle：php.cn
Vorheriger Artikel：class命名的时候 item-group和item_group有什么区别？这里面有没有什么讲究？_html/css_WEB-ITnose
Nächster Artikel：css渐变/背景_html/css_WEB-ITnose
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
2024-10-22 09:46:29
2024-10-13 13:53:41
2024-10-12 12:15:51
2024-10-11 22:47:31
2024-10-11 19:36:51
2024-10-11 15:50:41
2024-10-11 15:07:41
2024-10-11 14:21:21
2024-10-11 12:59:11
2024-10-11 12:17:31
Aktuelle Ausgaben
Box-Protokoll im Rasterlayout in CSS
Ich möchte, dass die ersten beiden Kästchen mit maximaler Breite nach oben und das zweite ...
Aus 2024-04-03 16:36:04
0
2
334
verwandte Themen
Mehr>
Was ist der Unterschied zwischen Originalbildschirm und zusammengebautem Bildschirm?
Formelle Handelsplattform für digitale Währungen
Linux-Befehl zum Umbenennen von Dateien
index.html-Funktion
So löschen Sie hao.360
Hafen schließen
So installieren Sie WordPress nach dem Herunterladen
So ändern Sie 3dmax auf Chinesisch
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
JAVA-Video-Tutorial für Anfänger
2533306
Neueste Downloads
Mehr>
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
