HTML布局

2023-10-09 17:34:21

网页会有很多元素和内容，如何让它们有序排列显示。可以使用<div>或<table>标签来组织。

1.使用div标签来布局

<!DOCType html>
<html>
    <head>    
        <meta charset="utf-8">
        <title>页面布局</title>      
    </head>

    <body> 

        <!--使用div标签来布局-->
        <div id="container" style="width: 500px;"></div>

        <div id="header" style="background-color: darkgoldenrod;">
            <h2 style="margin-bottom: 0;">网页标题</h2>
        </div>

        <div id="menu" style="background-color: #FFD700; height: 200px; width: 100px;float: left;">
        <b>菜单</b><br>
        菜单1<br>
        菜单2<br>
        菜单3<br>
        </div>

        <div id= "content" style="background-color: #EEEEEE; height: 200px;width: 812px; float: left;">
        内容显示区域
        </div>

        <div id="footer" style="background-color: darkgrey; clear: both;text-align: center;">
            版权@baidu.com
        </div>
    </body>
</html>>

2.使用table标签来布局

<!DOCType html>
<html>
    <head>    
        <meta charset="utf-8">
        <title>页面布局</title>      
    </head>

    <body> 
      <table width = "500" border="0">
         <tr>
             <td colspan="2" style="background-color:darkkhaki;">
             <h2>网页标题</h2>
            </td>
         </tr>

         <tr>
             <td style="background-color: darkmagenta; width: 100px;">
            <b>菜单</b><br>
            菜单1<br>
            菜单2<br>
            菜单3<br>
            </td>

            <td style="background-color: darkolivegreen; height: 200px; width: 400px;">
                内容显示区域
            </td>
         </tr>

         <tr>
           <td colspan="2" style="background-color: dimgray; text-align: center;">
           版权@baidu.com
           </td>
         </tr>
      </table>
    </body>
</html>>

码农公寓

相关文章