富，你需要做的是得到一個良好的基礎(chǔ)在嘗試這個之前在HTML和CSS中。理想情況下，您希望避免內(nèi)聯(lián)樣式(例如style="border: 1px solid black;")。你不需要固定或絕對定位來實現(xiàn)這一點。基本的HTML/CSS技術(shù)是完全可行的。這里是一個替代的解決方案，以你的要求：

而CSS：

/* Temp styles */

.header, .sidebar, .content, .footer { border: 5px solid black; }

.content, .sidebar, .footer { border-top: none; }

.sidebar.right { border-right: none; }

.sidebar.left { border-left: none; }

/* Core styles */

.header {

position: relative; /* needed for stacking */

height: 100px;

width: 100%;

}

.content {

position: relative; /* needed for stacking */

width: 100%;

height: 500px;

}

.sidebar {

position: relative; /* needed for stacking */

width: 20%;

height: 100%;

border-top: none;

}

.sidebar.left { float: left; }

.sidebar.left:after,

.sidebar.right:after {

clear: both;

content: "\0020";

display: block;

overflow: hidden;

}

.sidebar.right { float: right; }

.footer {

position: relative; /* needed for stacking */

width: 100%;

height: 100px;

}

這里是一個demo。采取這個演示，并從中吸取教訓(xùn)！希望這可以幫助！

總結(jié)

以上是生活随笔為你收集整理的html中表格的页眉页脚,有一个标准的页眉页脚布局HTML网页，而无需使用table标签...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。