How to layout HTML-HTML Tutorial-php.cn

Methods to use HTML for layout include: 1. Arrange the rows and columns of the table through the "
" tag to achieve the page layout effect; 2. Place web content on multiple pages Multi-column layout in; 3. Use div and span tags for layout.

How to layout HTML

# Page layout is part of graphic design, Used to handle the arrangement of visual elements on the page. Next, in the article, I will introduce in detail how to use HTML for web page layout. I hope it will be helpful to you.

[Recommended course: HTML tutorial】

Page layout:

Title: Part of the front end, used at the top of the page. The
tag is used to add a header section to a web page.
Navigation bar: The navigation bar is the same as the menu list. It is used to display content information using hyperlinks.
Index/Sidebar: It contains additional information or advertising that does not always need to be added to the page.
Content part: The content part is the main part of the displayed content.
Footer: The footer section contains contact information and other queries related to the web page. The footer section is always placed at the bottom of the web page. The
tag is used to set the footer in a web page.

Using table layout

The easiest and most popular way to create a layout is to use the HTML tag. You can arrange the columns and rows in the table any way you like

Example

For example, implement the following HTML layout example using a table with 3 rows and 2 columns, but with a header And the footer column uses the colspan attribute to span two columns

<table width = "100%" border = "0">
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <h1>标题</h1>
            </td>
         </tr>
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "20">
               <b>侧边栏</b>
            </td>
            <td bgcolor = "#eee" width = "100" height = "200">
               内容
            </td>
         </tr>
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <center>
                  页脚
               </center>
            </td>
         </tr>
      </table>

Copy after login

Rendering:

How to layout HTML

Multiple column layout

Place web content in multiple pages, you can keep the content in the middle column, or you can use the left column to use the menu, and the right column can be used to place advertisements or other content.

<table width = "100%" border = "0">
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "20%">
               <b>左菜单</b>
            </td>
            <td bgcolor = "#b5dcb3" height = "200" width = "60%">
               内容
            </td>
            <td bgcolor = "#aaa" width = "20%">
               <b>右菜单</b>
            </td>
         </tr>  
      <table>

Copy after login

Rendering:

How to layout HTML

##Use div layout

Elements are block-level elements used to group HTML elements. While the

tag is a block-level element, the HTML element is used to group elements at the inline level

 <div style = "width:450px">
         <div style = "background-color:#b5dcb3; width:100%">
            <h1>标题</h1>
         </div>
         <div style = "background-color:#aaa; height:200px; width:100px; float:left;">
            <div><b>左侧栏</b></div>
         </div>
         <div style = "background-color:#eee; height:200px; width:250px; float:left;" >
            <b>内容</b>
         </div>
         <div style = "background-color:#aaa; height:200px; width:100px; float:right;">
            <div><b>右侧栏</b></div>
         </div>
       <div style = "background-color:#b5dcb3; clear:both">
            <center>
               页脚
            </center>
         </div>
      </div>

Copy after login

Rendering:

Image 020.png Summary: The above is the entire content of this article, I hope it will be helpful to everyone.

The above is the detailed content of How to layout HTML. For more information, please follow other related articles on the PHP Chinese website!

Related labels：

html web page layout

source：php.cn

Previous article：How ueditor rich text editor implements cross-domain upload of images Next article：What is the meta tag in html? What properties are there?

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn