HTML 标签列表

HTML 布局技术

在设计网站时,创建布局是最重要的事情,因为它将确保您的网站看起来井井有条并且内容看起来易于理解。有多种技术和框架可用于创建布局,但在这里我们将学习简单的技术。您可以使用以下方法来创建多列布局:

  • HTML 表格(尽量不要使用)

  • CSS 浮动属性

  • CSS框架

  • CSS 弹性盒

  • 使用 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;">javaTpoint 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 javaTpoint.com</strong></p>  
            </td>  
          </tr>  
    </table>  
 </body>  
</html>

注意:此示例仅用于向您展示如何使用表格创建布局,但不建议使用表格布局。

CSS 框架

CSS 提供了许多框架,如 W3.CSS、Bootstrap 等,可以快速创建您的布局。使用 CSS 框架,您可以轻松创建响应式且有吸引力的 Web 布局。您只需要为这些框架添加一个链接,您就可以使用框架中的所有可用属性。

CSS 浮动

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

优点:非常容易学习和使用。您只需了解 float 和 clear 属性是如何工作的。

缺点:浮动元素绑定到文档流,这可能会损害灵活性。

例子:

<!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 © javatpoint.com</footer>  
</div>  
</body>  
</html>

CSS 弹性盒

Flexbox 是 CSS3 中一种新的布局模式。

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

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

例子:

<!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 © javatpoint.com</footer>  
</div>  
</body>  
</html>

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 © javatpoint.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>javaTpoint 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 javaTpoint.com</strong></p>  
    </div>      
 </div>  
</body>  
</html>


上一主题 HTML 布局 下一主题 HTML 响应式
  • 使用社交账号登录,本站支持
全部评论(0)