How to lay out a web page when writing html-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to lay out a web page when writing html

墨辰丷

May 09, 2018 am 11:34 AM

html layout Web page

There are two commonly used layouts in html. The first one is div layout, which has the advantage of being more convenient and concise, with less code, and easier to create and maintain. However, in some places, different browsers have different compatibility and may have different displays. The second type is the table layout, which has a lot of code and is very troublesome to maintain later. However, the table layout avoids many browser incompatibility issues.

1.div layout

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="utf-8">  
    <title></title>  
    <style>  
        body{margin: 0; padding: 0;}  
        #header{width:100%; height: 90px; background: #b19f9d; }  
        #nav{margin: 0 auto; width:70%; height: 90px; background: #fcf;}  
        .content{width: 950px; height: 900px; background: #847369; margin: 0 auto;}  
        .left{width:30%; height: 900px; background: #decfd4; float: left;}  
        .right{width: 70%; height: 900px; background: #b3a19d; float: left;}  
        footer{width:100%; height: 150px; background: #a8817a;}  
    </style>  
</head>  
  
<body>  
    <header id="header">  
        <nav id="nav">空空</nav>  
    </header>  
    <div class="content">  
        <div class="left"></div>  
        <div class="right"></div>  
    </div>  
    <footer></footer>  
</body>  
  
  
</html>

Copy after login

2.table layout

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="utf-8">  
    <title></title>  
    <style>  
          
    </style>  
</head>  
  
<body marginheight="0px" marginwidth="0px">  
    <table width="100%" height="950px" style="background-color:gray">  
        <tr>  
            <td colspan="2" width="100%" height="10%" style="background-color: aqua" ><td>  
        </tr>  
        <tr>  
            <td  width="20%" height="80%" style="background-color: blue" ><td>  
            <td  width="80%" height="80%" style="background-color: blue" ><td>  
        </tr>  
        <tr>  
            <td colspan="2" width="100%" height="10%" style="background-color: black" ><td>  
        </tr>  
      
    </table>  
</body>  
  
  
</html>

Copy after login

Summary:

The layout of table is relatively limited, while div is more open, with more design styles and beautiful effects. The advantage of table is that all browsers are compatible with div. The disadvantage of div is that compatibility is very troublesome.

Related recommendations:

HTML layout calculator (div css)_html/css_WEB-ITnose

html layout problem. _html/css_WEB-ITnose

##HTML layout_html/css_WEB-ITnose

htmlLayout problem_html/css_WEB-ITnose

The above is the detailed content of How to lay out a web page when writing html. For more information, please follow other related articles on the PHP Chinese website!

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