The example of this article analyzes the html5 DIV layout and table layout for your reference. The specific content is as follows
DIV layout: HTML+CSS achieves simple layout.#Container Height cannot be written as percentage, and must be a specific height.
<! Doctype html> <html> <head Lang = EN> <Meta Charset = UTF-8> <Title> DIV layout </title> <Style Type = Text/CSS> Body {Margin: 0; Padding: 0;} #Container {width: 100%; height: 650px; background-color: aqua;} #Heading {width: 100%; height: 10%; background-color: azure;} enu {width: 30%; height : 80%; Background-COLOR: Chartreuse; Float: left;} #Content-Body {width: 70%; height: 80%; background-color: chocolate; left: left;} Ooter {width: 100%; height : 10%; Background-COLOR: darkgrey; Clear: Both;} </style> </head> <body> <div id = container> <div ID = heading> head </div> <div ID = content- Menu> Content Menu </div> <div ID = Content-Body> Content subject </div> <div ID = FOOTER> bottom </div> </body> </html>Effect map:
Table layout:<! Doctype html> <html> <wead lang = EN> <meta charset = UTF-8> <Title> Table layout </title> </head> <body marginwidth = 0px marginheight = 0px> <TADT h = 100% Height = 650px style = Background-COLOR: Aqua> <TR> <TD Colspan = 3 Width = 100% Height = 10% STYLE = Background-COLOR: Chartreuse> " <TD WIDTH = 20% Height = 80% STYLE = BACKGROUND-COLOR: Antiquewhite> Left Menu </TD> <TD Width = 60% Height = 80% STYLE = BACKGROUND-COROR> </TD> TD Width = 20% height = 80% style = Background-COLOR: CORNFLOWERBLUE> Right menu </td> </tr> <TD COLSPAN = 3 Width = 100% Height = Background-CROR: CR. imson> this Is the bottom </td> </tr> </table> </body> </html>
Effect map:
The above is all the contents of this article. I hope it will be helpful to everyone's learning. I also hope that everyone will support VEVB Wulin.com.