小編給大家分享一下Html5中div布局與table布局的示例分析,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
我們提供的服務有:成都網(wǎng)站設計、成都做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、欒川ssl等。為1000+企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務,是有科學管理、有技術的欒川網(wǎng)站制作公司p布局:html+css實現(xiàn)簡單布局。
#container中height不能寫成百分數(shù),必須為具體高度。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>p布局</title> <style type="text/css"> body{ margin:0; padding:0; } #container{ width:100%; height:650px; background-color: aqua; } #heading{ width:100%; height:10%; background-color: azure; } #content-menu{ width:30%; height:80%; background-color: chartreuse; float:left; } #content-body{ width:70%; height:80%; background-color: chocolate; float:left; } #footer{ width:100%; height:10%; background-color: darkgrey; clear: both; } </style> </head> <body> <p id="container"> <p id="heading">頭部</p> <p id="content-menu">內容菜單</p> <p id="content-body">內容主體</p> <p id="footer">底部</p> </p> </body> </html>
效果圖:
table布局:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>table布局</title> </head> <body marginwidth="0px" marginheight="0px"> <table width="100%" height="650px" style="background-color: aqua"> <tr> <td colspan="3" width="100%" height="10%" style="background-color: chartreuse">這是頭部</td> </tr> <tr> <td width="20%" height="80%" style="background-color: antiquewhite">左菜單</td> <td width="60%" height="80%" style="background-color: coral">內容</td> <td width="20%" height="80%" style="background-color: cornflowerblue">右菜單</td> </tr> <tr> <td colspan="3" width="100%" height="10%" style="background-color: crimson">這是底部</td> </tr> </table> </body> </html>
效果圖:
以上是“Html5中div布局與table布局的示例分析”這篇文章的所有內容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內容對大家有所幫助,如果還想學習更多知識,歡迎關注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道!
當前名稱:Html5中div布局與table布局的示例分析-創(chuàng)新互聯(lián)
文章來源:http://bm7419.com/article48/dicihp.html
成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供標簽優(yōu)化、網(wǎng)站設計、微信公眾號、做網(wǎng)站、域名注冊、手機網(wǎng)站建設
聲明:本網(wǎng)站發(fā)布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)