HTML固定表例子和CSS〔實施例

-5

(b) Allow both bars extend the full length of the browser window. 
(c) Specify the header bar and footer bar with different, light background colors. 
(d) Center links and bottons in respective bars. 
(e) Use three light colors to specify the background of the paragraph elements so that the three colors alternate. 
(f) Leave a gap between page content and the window's left and right border.

我的HTML：

<!DOCTYPE html> 
<html> 
<head> 
<title> 
My test 
</title> 
<meta charset="UTF-8"> 
</head> 
<style> 

<body> 

</style> 

<div id="headbar1" > 

<a href="https://www.example.com">BBC news</a> 
<a href="https://www.example.com">The Guardian</a> 

</div> 

<?php 
for ($n=1; $n<=101; $n++) 
echo "Paragraph" ; 


?> 

<div align="center" id="footbar"style="background-color: #ffff66";> 
<form> 
<input type="button" onclick="location.href='https://www.example.com';" value="Facebook" /> 

<input type="button" onclick="location.href='https://www.example.com';" value="Instagram" /> 
</div> 

</form> 
</body> 
</html>

我的CSS：

.headbar1 { 
    background-color: #ffccff; 
    position:fixed; 
    top:0; 
    width:100%; 
    z-index:100; 
    align:center; 
}

我在做什麼錯？感謝

enter image description here

來源

2016-02-22 swlon

對不起形象的描述是它應該是什麼樣子 - 伊克 – swlon

你考不上的jsfiddle有PHP代碼的HTML塊-_- – Cuchu

在'fiddle'的HTML是無效的 - 你有一個div stradding形式，一個類似的東西與開放的'body'標籤跨越一個樣式標籤。 – RamRaider

希望這回答了你的問題。它幾乎是一樣的圖像您提供

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Example</title> 
</head> 
<body> 
<style> 
.headbar1{ 
    padding:5px; 
    background-color:#F99; 
    text-align:center; 
    width:100%; 
} 
.footer{ 
    padding:5px; 
    background-color:#0CF; 
    text-align:center; 
    width:100%; 
} 
td{ 
    width:100%; 
    padding:5px;   
} 

</style> 
<div class="headbar1"> 

<a href="https://t.co/yDwRRh3mer">BBC news</a> 
<a href="https://t.co/XzdXuG20nY">The Guardian</a> 


</div> 
<?php 
$total = 0; ?> 


<table width="100%" border="0"> 
    <?php for($i = 1;$i<= 33;$i++) { ?> 

    <tr style="background-color:#EDEAD3"> 
    <td >paragraph <?php 
     $subtotal = 1; 
     $total = ($total + $subtotal); 
     echo $total; ?></td>  
    </tr> 
    <tr style="background-color:#F7F1CA"> 
    <td >paragraph <?php 
     echo $total + 1; ?></td>  
    </tr> 
    <tr style="background-color:#9FC"> 
    <td>paragraph <?php 
     echo $total + 2; ?></td>  
    </tr> 
    <?php $total = $total+2;?> 
    <?php } ?> 

    <tr style="background-color:#F7F1CA"> 
    <td >paragraph <?php 
     echo 100; ?></td>  
    </tr> 
    <tr style="background-color:#9FC"> 
    <td>paragraph <?php 
     echo 101; ?></td>  
    </tr> 

</table> 

<div class="footer" > 
<form> 
<input type="button" onclick="location.href='https://t.co/C2uBrDSYma';" value="Facebook" /> 

<input type="button" onclick="location.href='https://t.co/S166BPKkHj';" value="Instagram" /> 
</form> 
</div> 
</body> 
</html>

顯示多達101 結果。。。