我有一个带有HTML的CSS代码,我想在页脚上方添加空白,因为我的表格直接粘在页脚上。
请确保每次添加表格时,表格和页脚之间都有空间。
您可以在http://jsfiddle.net/hadinetcat/E8jd3/6/上查看我的代码。
CSS 代码:
<style type='text/css'>
.container3 {
float: left;
width: 100%;
/* background:green; */
overflow: hidden;
position: relative;
}
.container2 {
float: left;
width: 100%;
background: #FFA500;
position: relative;
right: 45%;
}
.container1 {
float: left;
width: 100%;
/* background:red; */
position: relative;
right: 40%;
}
.col1 {
float: left;
width: 26%;
position: relative;
left: 87%;
overflow: hidden;
height: 570px;
}
.col2 {
float: left;
width: 50%;
position: relative;
left: 90%;
overflow: hidden;
}
.col3 {
float: left;
width: 26%;
position: relative;
left: 80%;
overflow: hidden;
}
.footer {
border: 1px solid orange;
position: relative;
padding: 0px;
margin-top: -5px;
font-size: 15px;
}
.signout {
position: absolute;
width: 200;
bottom: 150px;
left: 5px;
clear: both;
font-size: 20px;
text-align: center
}
</style>
HTML
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Wellcome To Balhalfe Services Customer Reports</h1>
<div class="container3 ">
<div class="container1 ">
<div class="container2 ">
<div class="col1">
lalalallalalalallala <br />
lllllllllllllllllllll <br />
</div>
<div class="col2">
<div align="center">
<H2 align="center"> Report Table</H></div>
<table border="1" align="center">
<tr>
<td><b>Name</b></td>
<td><b>Mime</b></td>
<td><b>Size (bytes)</b></td>
<td><b>Created</b></td>
<td><b>Download</b></td>
</tr>
<tr>
<td>1594(HA 10 AL HAALY).pdf</td>
<td>application/pdf</td>
<td>60964</td>
<td>2013-08-29 23:40:07</td>
<td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
</tr>
<tr>
<td>eu contres.txt</td>
<td>text/plain</td>
<td>546</td>
<td>2013-08-22 00:06:55</td>
<td><a style='text-decoration:none;'href=' get_file_work.php?id=4&company=companya'>Download</a></td>
</tr>
<tr>
<td>1594(HA 10 AL HAALY).pdf</td>
<td>application/pdf</td>
<td>60964</td>
<td>2013-08-29 23:40:07</td>
<td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
</tr>
<tr>
<td>1594(HA 10 AL HAALY).pdf</td>
<td>application/pdf</td>
<td>60964</td>
<td>2013-08-29 23:40:07</td>
<td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
</tr>
<tr>
<td>1594(HA 10 AL HAALY).pdf</td>
<td>application/pdf</td>
<td>60964</td>
<td>2013-08-29 23:40:07</td>
<td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
</tr>
<tr>
<td>1594(HA 10 AL HAALY).pdf</td>
<td>application/pdf</td>
<td>60964</td>
<td>2013-08-29 23:40:07</td>
<td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
</tr>
<tr>
<td>1594(HA 10 AL HAALY).pdf</td>
<td>application/pdf</td>
<td>60964</td>
<td>2013-08-29 23:40:07</td>
<td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
</tr>
<tr>
<td>1594(HA 10 AL HAALY).pdf</td>
<td>application/pdf</td>
<td>60964</td>
<td>2013-08-29 23:40:07</td>
<td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
</tr>
<tr>
<td>1594(HA 10 AL HAALY).pdf</td>
<td>application/pdf</td>
<td>60964</td>
<td>2013-08-29 23:40:07</td>
<td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
</tr>
<tr>
<td>1594(HA 10 AL HAALY).pdf</td>
<td>application/pdf</td>
<td>60964</td>
<td>2013-08-29 23:40:07</td>
<td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
</tr>
<tr>
<td>1594(HA 10 AL HAALY).pdf</td>
<td>application/pdf</td>
<td>60964</td>
<td>2013-08-29 23:40:07</td>
<td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
</tr>
<tr>
<td>1594(HA 10 AL HAALY).pdf</td>
<td>application/pdf</td>
<td>60964</td>
<td>2013-08-29 23:40:07</td>
<td><a style='text-decoration:none;'href=' get_file_work.php?id=6&company=companya'>Download</a></td>
</tr>
</table>
</div>
<div class="col3">
</div>
</div>
</div>
<div class="signout">
<a style='text-decoration:none;' href= "index.html">Sign Out </br></a>
</div>
<div class="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © balhalfe services 20103-2014</div>
</div>
margin-top
。 - Patsy Issapadding-top
。 - Paulie_D