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.

Continuing Learning

||

new file

<!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>

submit Reset Code
Automatic operation

HTML layout

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]