Shulou(Shulou.com)06/03 Report--

This article mainly introduces how to realize div layout and table layout in html5, which has certain reference value. Interested friends can refer to it. I hope you will gain a lot after reading this article. Let Xiaobian take you to understand it together.

specific contents are as follows

div Layout: html+css for simple layout.

#Height in container cannot be written as a percentage, it must be a specific height.

div Layout body{ margin:0; padding:0; } #container{ width:100%; height:650px; background-color: aqua; } #heading{ width:100%; height:10%; background-color: azure; } #content-menu{ width:30%; height:80%; background-color: chartreuse; float:left; } #content-body{ width:70%; height:80%; background-color: chocolate; float:left; } #footer{ width:100%; height:10%; background-color: darkgrey; clear: both; } head content menu content body bottom

Effect drawing:

Table layout:

table layout This is the head. left menu content right menu this is the bottom

Effect drawing:

Thank you for reading this article carefully. I hope that Xiaobian's article "How to realize div layout and table layout in html5" will be helpful to everyone. At the same time, I hope that everyone will support you more, pay attention to the industry information channel, and more relevant knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.