HTML布局

最新推荐文章于 2024-09-04 18:16:53 发布

Data菌

最新推荐文章于 2024-09-04 18:16:53 发布

阅读量353

点赞数

分类专栏： HTML 文章标签： html 布局 div table

本文链接：https://blog.csdn.net/wlqchengzhangji/article/details/122637992

版权

HTML 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

网页会有很多元素和内容，如何让它们有序排列显示。可以使用<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>>