HTML布局

2022-01-22 15:31:30 阅读：120 来源： 互联网

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

标签：baidu,菜单,网页,标签,布局,HTML,com
来源： https://blog.csdn.net/hppyW/article/details/122637992

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

HTML布局