HTML頁面布局技術(shù)

更新時間：2022-12-07 10:52:05 來源：動力節(jié)點瀏覽893次

創(chuàng)建布局是設(shè)計網(wǎng)站時最重要的事情，因為它將確保您的網(wǎng)站看起來井井有條并且內(nèi)容看起來易于理解。有多種技術(shù)和框架可用于創(chuàng)建布局，但在這里我們將學(xué)習(xí)簡單的技術(shù)。您可以使用以下方法創(chuàng)建多列布局：

HTML表格(盡量不要用)

CSS 浮動屬性

CSS框架

CSS彈性框

使用 div 布局

HTML 表格(不推薦)

基于 HTML 表格的布局是創(chuàng)建布局的最簡單方法之一，因為表格僅使用基于行和列的格式，但不建議將 HTML 表格用于您的頁面布局。

元素旨在顯示表格數(shù)據(jù)。這不利于布局。雖然首先創(chuàng)建布局很容易，但如果您想更改或重新設(shè)計您的網(wǎng)站，那么這將是一項復(fù)雜的任務(wù)。

以下是使用 HTML 表格創(chuàng)建簡單網(wǎng)頁布局的示例。

<!DOCTYPE html>  
<html>  
 <頭>  
    <樣式>  
        李{  
            顯示：內(nèi)聯(lián)塊；  
            填充：10px;}  
        一個{  
            顏色：#20b2aa；  
        }  
      </樣式>  
 </頭>  
<正文>  
     <!-- 標題部分 -->  
       <table width= "100%"  style= "border-collapse:collapse;" >  
           <tr>  
            <td colspan= "2"  style= "背景顏色：#1a1a1a；文本對齊：居中；" >  
                <h3 style= "字體大?。?0px；顏色：#ff6a6a；" >javaTpoint 表格布局</h3>  
            </td>  
         </tr>  
   <!-- 導(dǎo)航部分 -->  
          <tr>  
                        <td colspan= "2"  style= "背景色：#666666;" >  
                <ul>  
                                                      <li><a href= "#" >首頁</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 等，可以快速創(chuàng)建您的布局。使用 CSS 框架，您可以輕松創(chuàng)建響應(yīng)迅速且有吸引力的 Web 布局。你只需要為這些框架添加一個鏈接，你就可以使用框架中所有可用的屬性。

CSS 浮動

您可以使用 CSS 浮動屬性創(chuàng)建整個 Web 布局。

優(yōu)點：非常容易學(xué)習(xí)和使用。您只需了解 float 和 clear 屬性的工作原理。

缺點：浮動元素與文檔流相關(guān)聯(lián)，這可能會損害靈活性。

例子：

<!DOCTYPE html>  
<html>  
<頭>  
<樣式>  
div.容器{  
    寬度：  100 %；  
    邊框：1px 純灰色；  
}    
頁眉頁腳 {  
    填充：1em；  
    白顏色;  
    背景顏色：# 000080 ；  
    清除：離開；  
    文本對齊：居中；  
}    
導(dǎo)航{  
    浮動：左；  
    最大寬度：160px；  
    保證金：  0 ；  
    填充：1em；  
}    
導(dǎo)航 ul {  
    列表樣式類型：無；  
    填充：  0 ；  
}    
導(dǎo)航 ul a {  
    文字修飾：無；  
}    
文章 {  
    左邊距：170px；  
    左邊框：1px 純灰色；  
    填充：1em；  
    溢出：隱藏；  
}  
</樣式>  
</頭>  
<正文>   
<div 類= "容器" >    
<標題>  
<h1>教程庫</h1>  
</標題>    
<導(dǎo)航>  
<ul>  
<li><a href= "#" >HTML</a></li>  
<li><a href= "#" >CSS</a></li>  
<li><a href= "#" >JavaScript</a></li>  
</ul>  
</導(dǎo)航>  
<文章>  
<h1>HTML</h1>  
<p>HTML 教程或 HTML  5 教程提供了 html 的基本和高級概念。我們的 HTML 教程是   
為 初學(xué)者和專業(yè)人士  開發(fā) 。</p>
<p>TML 是超文本標記語言的 縮寫 。讓我們看看什么是超文本，什么是標記語言？</p>  
</文章>  
<footer> 版權(quán)所有 ? javatpoint.com</footer>  
</div>  
</body>  
</html>

CSS彈性盒

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

優(yōu)點：確保頁面布局必須適應(yīng)不同的屏幕尺寸和不同的顯示設(shè)備。

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

例子：

<!DOCTYPE html>  
<html>  
<頭>  
<樣式>  
.flex容器{  
    顯示：-webkit-flex；  
    顯示：彈性；    
    -webkit-flex-flow：行換行；  
    彈性流：行換行；  
    文本對齊：居中；  
}    
.flex 容器 > * {  
    填充：15px；  
    -webkit-flex:  1 100 %;   
    彈性：  1 100 %；   
}    
。文章 {  
    文本對齊：左；  
}   
標題{背景：# 000080 ；顏色：白色；}  
頁腳{背景：# 000080 ；顏色：白色；}  
.nav {背景：#eee;}   
.nav ul {  
    列表樣式類型：無；  
    填充：  0 ；  
}  
.nav ul a {  
    文字修飾：無；  
}    
@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 ;}  
    頁腳 {-webkit-order: 3 ;order: 3 ;}  
}  
</樣式>  
</頭>  
<正文>   
<div  class = "彈性容器" >  
<標題>  
<h1>展城館</h1>  
</標題>   
<導(dǎo)航 類= “導(dǎo)航” >  
<ul>  
<li><a href= "#" >HTML</a></li>  
<li><a href= "#" >CSS</a></li>  
<li><a href= "#" >JavaScript</a></li>  
</ul>  
</導(dǎo)航>   
<文章 類= “文章” >  
<h1>HTML</h1>  
<p>HTML 教程或 HTML  5 教程提供了 html 的基本和高級概念。我們的 HTML 教程是   
為 初學(xué)者和專業(yè)人士  開發(fā) 。</p>
<p>TML 是超文本標記語言的 縮寫 。讓我們看看什么是超文本，什么是標記語言？</p>  
<p><strong>調(diào)整  頁面大小看看會發(fā)生什么！</strong></p   >
</文章>    
<footer> 版權(quán)所有 ? javatpoint.com</footer>  
</div>    
</body>  
</html>

使用 div 布局

<!DOCTYPE html>  
<html>  
<頭>  
    <title>使用div的網(wǎng)頁</title>  
    <樣式>  
        身體{  
            邊距：0px；  
        }  
        .header{  
                填充：10px；  
                背景色：#455e64；  
                文本對齊：居中；  
               }  
          .header h2{  
            顏色：黑色; }  
              /*===============[導(dǎo)航 CSS]==========*/  
              導(dǎo)航{  
                背景色：# 243238 ；  
                填充：5px；  
                }                
              .nav li{  
              列表樣式：無；  
              顯示：內(nèi)聯(lián)塊；  
              填充：8px；  
               }  
           .導(dǎo)航{  
            顏色：#fff；  
           }               
          .nav ul li a:hover{  
            文字修飾：無；  
            顏色：#7fffd4；  
           }  
              .lside{  
                 浮動：左；  
               寬度：  80 %；  
               最小高度：440px；  
               背景色：#f0f8ff；  
               文本對齊：居中；  
              }  
           .rside  
           {  
            文本對齊：居中；  
            浮動：對；  
            寬度：  20 %；  
              最小高度：440px；  
             背景色：#c1cdcd；  
           }  
           .頁腳{  
             高度：44px；  
                背景色：#455e64；   
            文本對齊：居中；   
            填充頂部：10px;}  
  
            .頁腳 p{  
                顏色：#8fbc8f；  
            }    
    </樣式>  
</頭>  
<正文>  
<分區(qū)>  
    <div 類= "標題" >  
      <h2>javaTpoint Div 布局</h2>  
    </div>  
            <!-- 導(dǎo)航 -->  
        <div 類= "導(dǎo)航" >  
            <ul>  
                <li><a href= "#" >首頁</a></li>  
                <li><a href= "#" >菜單</a></li>  
                <li><a href= "#" >關(guān)于</a></li>  
                <li><a href= "#" >聯(lián)系方式</a></li>  
                <li style= "浮動：右；" ><a href= "#" >登錄</a></li>  
                <li style= "浮動：右；" ><a href= "#" >注冊</a></li>  
            </ul>  
        </div>         
      <!-- 主要 -->  
        <div style= "height:440px" >  
            <div  class = "lside" >     
                <p>在這里寫你的內(nèi)容</p>  
            </div>  
        <!-- 邊 -->  
            <div  class = "rside" >  
                <p>這是側(cè)面</p>  
            </div>  
        </div>  
      <!-- 頁腳 -->  
       <div 類= "頁腳" >  
        <p>?<strong>版權(quán)所有 javaTpoint.com</strong></p>  
    </div>      
 </div>  
</body>  
</html>

以上就是關(guān)于“HTML頁面布局技術(shù)”的介紹，大家如果想了解更多相關(guān)知識，不妨來關(guān)注一下本站的HTML教程，里面還有更豐富的知識等著大家去學(xué)習(xí)，希望對大家能夠有所幫助哦。

HTML教程

上一篇CSS3的3D旋轉(zhuǎn)動畫效果下一篇Java合并數(shù)組的方法

相關(guān)閱讀

大战熟女丰满人妻av-荡女精品导航-岛国aaaa级午夜福利片-岛国av动作片在线观看-岛国av无码免费无禁网站-岛国大片激情做爰视频

HTML頁面布局技術(shù)

HTML 表格(不推薦)

CSS 框架

CSS 浮動

CSS彈性盒

使用 div 布局

JVM

多線程下載器項目實戰(zhàn)

Java日志框架全集（選學(xué)）

高并發(fā)解決方案（選學(xué)）

零基礎(chǔ)能學(xué)Java嗎？

零基礎(chǔ)能學(xué)Java嗎？

零基礎(chǔ)能學(xué)Java嗎？

關(guān)于我們

課程中心

在線課程

資料廣場

全國免費電話

大战熟女丰满人妻av-荡女精品导航-岛国aaaa级午夜福利片-岛国av动作片在线观看-岛国av无码免费无禁网站-岛国大片激情做爰视频

HTML頁面布局技術(shù)

HTML 表格(不推薦)

CSS 框架

CSS 浮動

CSS彈性盒

使用 div 布局

JVM

多線程下載器項目實戰(zhàn)

Java日志框架全集（選學(xué)）

高并發(fā)解決方案（選學(xué)）

零基礎(chǔ)能學(xué)Java嗎？

零基礎(chǔ)能學(xué)Java嗎？

零基礎(chǔ)能學(xué)Java嗎？

關(guān)于我們

課程中心

在線課程

資料廣場

全國免費電話

零基礎(chǔ)能學(xué)Java嗎？

零基礎(chǔ)能學(xué)Java嗎？