首页教程软件教程正文

HTML布局技术

uncle 软件教程 2025年08月6日

0 收藏 0 点赞 464 浏览 5011 个字

摘要 :

文章目录 HTML表格（不建议使用） CSS框架 CSS浮动 CSS Flexbox 使用div进行布局在设计网站时，创建布局是最重要的事情，因为它将确保您的网站以整齐的方式呈现，使内……

文
章
目
录

HTML表格（不建议使用）
CSS框架
CSS浮动
CSS Flexbox
使用div进行布局

在设计网站时，创建布局是最重要的事情，因为它将确保您的网站以整齐的方式呈现，使内容易于理解。有各种各样的技术和框架可用于创建布局，但在这里我们将学习简单的技巧。您可以使用以下方法创建多列布局：

HTML表格（尽量不要使用）
CSS浮动属性
CSS框架
CSS Flexbox
使用div进行布局

HTML表格（不建议使用）

基于HTML表格的布局是创建布局的最简单方式之一，因为表格只使用行和列的格式，但不建议在页面布局中使用HTML表格。该元素被设计用于显示表格数据，不适合用于布局。虽然首次创建布局很容易，但如果您想要更改或重新设计您的网站，那将是一项复杂的任务。以下是使用HTML表格创建简单网页布局的示例。

示例：

<!DOCTYPE html>  
<html>  
 <head>  
    <style>  
        li{  
            display: inline-block;  
            padding: 10px;}  
        a{  
            color:#20b2aa;  
        }  
      </style>  
 </head>  
<body>  
     <!-- Header Section -->  
       <table width=\"100%\" style=\"border-collapse:collapse;\">  
           <tr>  
            <td colspan=\"2\" style=\"background-color:#1a1a1a; text-align: center;\">  
                <h3 style=\"font-size: 30px; color: #ff6a6a;\">panziye Table-layout</h3>  
            </td>  
         </tr>  
   <!-- Nav Section -->  
          <tr>  
                        <td colspan=\"2\" style=\"background-color:#666666;\">  
                <ul>  
                                                      <li><a href=\"#\">Home</a></li>  
                <li><a href=\"#\">Menu</a></li>  
                <li><a href=\"#\">About-us</a></li>  
                <li><a href=\"#\">Contact us</a></li>  
            </ul>  
                                        </td>  
          </tr>  
   <!-- Main Section -->  
          <tr>  
             <td style=\"background-color:#e6e6fa; width:80%; height: 400px; text-align: center;\">  
               <p>Write your content Here</p>  
              </td>  
              <td style=\"background-color:#a7e6fb; height: 400px;\">  
                 <p>This is your side bar</p>  
              </td>  
         </tr>  
     <!-- Footer Section -->  
           <tr>  
             <td colspan=\"2\" style=\"background-color:#2e2e2e; text-align: center;\">  
                <p style=\"color:#f08080\">©<strong>Copyright panziye.com</strong></p>  
            </td>  
          </tr>  
    </table>  
 </body>  
</html>

请注意：此示例仅用于演示如何使用表格创建布局，但不建议使用表格布局。

CSS框架

CSS提供了许多框架，如W3.CSS、Bootstrap等，可用于快速创建布局。使用CSS框架，您可以轻松创建响应式和吸引人的网页布局。您只需要添加这些框架的链接，就可以使用框架中提供的所有属性。

CSS浮动

您可以使用CSS浮动属性创建整个网页布局。

优点：学习和使用非常容易。只需了解浮动和清除属性的工作原理。

缺点：浮动元素与文档流有关，这可能会影响灵活性。

示例：

<!DOCTYPE html>  
<html>  
<head>  
<style>  
div.container {  
    width: 100%;  
    border: 1px solid gray;  
}  
  
header, footer {  
    padding: 1em;  
    color: white;  
    background-color: #000080;  
    clear: left;  
    text-align: center;  
}  
  
nav {  
    float: left;  
    max-width: 160px;  
    margin: 0;  
    padding: 1em;  
}  
  
nav ul {  
    list-style-type: none;  
    padding: 0;  
}  
  
nav ul a {  
    text-decoration: none;  
}  
  
article {  
    margin-left: 170px;  
    border-left: 1px solid gray;  
    padding: 1em;  
    overflow: hidden;  
}  
</style>  
</head>  
<body>  
  
<div class=\"container\">  
  
<header>  
<h1>Tutorials Gallery</h1>  
</header>  
  
<nav>  
<ul>  
<li><a href=\"#\">HTML</a></li>  
<li><a href=\"#\">CSS</a></li>  
<li><a href=\"#\">JavaScript</a></li>  
</ul>  
</nav>  
<article>  
<h1>HTML</h1>  
<p>HTML tutorial or HTML 5 tutorial provides basic and advanced concepts of html. Our HTML tutorial is   
developed for beginners and professionals.</p>  
<p>TML is an acronym which stands for Hyper Text Markup Language. Let\'s see what is Hyper Text and what is Markup Language?</p>  
</article>  
<footer>Copyright © panziye.com</footer>  
</div>  
</body>  
</html>

CSS Flexbox

Flexbox是CSS3中的新布局模式。

优点：它确保页面布局适应不同的屏幕尺寸和不同的显示设备。

缺点：在IE10及更早版本中不起作用。

示例：

<!DOCTYPE html>  
<html>  
<head>  
<style>  
.flex-container {  
    display: -webkit-flex;  
    display: flex;    
    -webkit-flex-flow: row wrap;  
    flex-flow: row wrap;  
    text-align: center;  
}  
  
.flex-container > * {  
    padding: 15px;  
    -webkit-flex: 1 100%;  
    flex: 1 100%;  
}  
  
.article {  
    text-align: left;  
}  
  
header {background: #000080;color:white;}  
footer {background: #000080;color:white;}  
.nav {background:#eee;}  
  
.nav ul {  
    list-style-type: none;  
    padding: 0;  
}  
.nav ul a {  
    text-decoration: none;  
}  
  
@media all and (min-width: 768px) {  
    .nav {text-align:left;-webkit-flex: 1 auto;flex:1 auto;-webkit-order:1;order:1;}  
    .article {-webkit-flex:5 0px;flex:5 0px;-webkit-order:2;order:2;}  
    footer {-webkit-order:3;order:3;}  
}  
</style>  
</head>  
<body>  
  
<div class=\"flex-container\">  
<header>  
<h1>City Gallery</h1>  
</header>  
  
<nav class=\"nav\">  
<ul>  
<li><a href=\"#\">HTML</a></li>  
<li><a href=\"#\">CSS</a></li>  
<li><a href=\"#\">JavaScript</a></li>  
</ul>  
</nav>  
  
<article class=\"article\">  
<h1>HTML</h1>  
<p>HTML tutorial or HTML 5 tutorial provides basic and advanced concepts of html. Our HTML tutorial is   
developed for beginners and professionals.</p>  
<p>TML is an acronym which stands for Hyper Text Markup Language. Let\'s see what is Hyper Text and what is Markup Language?</p>  
<p><strong>Resize this page to see what happens!</strong></p>  
</article>  
  
<footer>Copyright © panziye.com</footer>  
</div>  
  
</body>  
</html>

使用div进行布局

<!DOCTYPE html>  
<html>  
<head>  
    <title>Webpage using div</title>  
    <style>  
        body{  
            margin:0px;  
        }  
        .header{  
                padding: 10px;  
                background-color:#455e64;  
                text-align: center;  
               }  
          .header h2{  
            color: black; }  
              /*===============[Nav CSS]==========*/  
              .nav{  
                background-color:#243238;  
                padding: 5px;  
                }  
               
              .nav li{  
              list-style: none;  
              display: inline-block;  
              padding: 8px;  
               }  
           .nav a{  
            color: #fff;  
           }  
             
          .nav ul li a:hover{  
            text-decoration: none;  
            color: #7fffd4;  
           }  
              .lside{  
                 float: left;  
               width: 80%;  
               min-height: 440px;  
               background-color: #f0f8ff;  
               text-align: center;  
              }  
           .rside  
           {  
            text-align: center;  
            float: right;  
            width: 20%;  
              min-height: 440px;  
             background-color:  #c1cdcd;  
           }  
           .footer{  
             height: 44px;  
                background-color:#455e64;   
            text-align: center;   
            padding-top: 10px;}  
  
            .footer p{  
                color:  #8fbc8f;  
            }  
  
    </style>  
</head>  
<body>  
<div>  
    <div class=\"header\">  
      <h2>panziye Div Layout</h2>  
    </div>  
            <!-- Nav -->  
        <div class=\"nav\">  
            <ul>  
                <li><a href=\"#\">HOME</a></li>  
                <li><a href=\"#\">MENU</a></li>  
                <li><a href=\"#\">ABOUT</a></li>  
                <li><a href=\"#\">CONTACT</a></li>  
                <li style=\"float: right;\"><a href=\"#\">LOGIN</a></li>  
                <li style=\"float: right;\"><a href=\"#\">SIGN-UP</a></li>  
            </ul>  
        </div>  
       
      <!-- main -->  
        <div style=\"height:440px\">  
            <div class=\"lside\">     
                <p>Write your content here</p>  
            </div>  
        <!-- side -->  
            <div class=\"rside\">  
                <p>This is side</p>  
            </div>  
        </div>  
      <!-- footer -->  
       <div class=\"footer\">  
        <p>©<strong>Copyright panziye.com</strong></p>  
    </div>      
 </div>  
</body>  
</html>