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

How to lay out a web page when writing html

墨辰丷

Release： 2018-05-09 11:34:37

Original

4956 people have browsed it

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!