HTML layout
The web pages we open in our daily lives are always orderly and comfortable to look at, but do you know how they do it? They are laid out using our HTML elements + some css styles, so let’s learn how to layout the page today.
##Website layout
Most websites arrange content into multiple columns (just like a magazine or newspaper). Most websites can use the <div> or <table> elements to create multiple columns. CSS is used to position elements or create backgrounds and colorful looks for pages.
Although we can use the HTML table tag to design a beautiful layout, the table tag is not recommended as a layout tool - tables are not layout tools.
Tips: Web page layout is very important to improve the appearance of the website, Please design your web page layout carefully.
##HTML layout - using the <div> element## The #div element is a block-level element used to group HTML elements.
Example
The following example uses five div elements to create a multi-column layout with some simple css styling:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> </head> <body> <div id="container" style="width:400px"> <div id="header" style="background-color:#baff9e;"> <h1 style="margin-bottom:0;">主要的网站标题</h1></div> <div id="menu" style="background-color:#45caff;height:200px;width:150px;float:left;"> <b>菜单</b><br> HTML<br> CSS<br> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;width:250px;float:left;"> 这里是内容</div> <div id="footer" style="background-color:#fdd8ff;clear:both;text-align:center;"> 版权 © php.cn</div> </div> </body> </html>
The above HTML code will Produces the following result:
HTML layout using table
Comments: The <table> element is not designed as a layout tool. <table> The role of the element is to display tabular data.
Using the <table> element can achieve layout effects, because the table element can be styled through CSS:
Example
Use <table> elements to layout<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
<table width="400" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>网站标题</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:50px;">
<b>网站菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:350px;">
网站内容</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © php.cn</td>
</tr>
</table>
</body>
</html>
Code running results:
# #HTML layout
Tip: The biggest advantage of using CSS is that if the CSS code is stored in an external style sheet, the site will be easier to maintain. By editing a single file, you can change the layout of all pages. To learn more about CSS, visit our CSS tutorial. Tip: Since creating advanced layouts is time-consuming, using templates is a quick option . There are many free website templates available through search engines (you can use these pre-built website layouts and optimize them). For example Use Bootstrap Bootstrap is to use a ready-made CSS framework. Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive web. Bootstrap helps you develop sites that look great at any size: monitor, laptop, tablet or mobile phone: To learn about Bootstrap, read our Bootstrap tutorial.
