我已经更新了CSS样式表。
我一直在页脚下面遇到一个空白区域,我已经包含了截图。
我已经包含了css重置但仍无法解决问题
/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav ul {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
body{
background-color:#ebebeb;
border:1px solid black;
height:1317px;
}
#header_wrap{
height:90px;
background-color:#191919;
Opacity:0.9;
border-bottom:2.40px solid #11120f;
width:100%;
}
header{
width:980px;
margin: 0 auto;
}
header h1 a{
display:block;
float:left;
height:50px;
width:175px;
margin:0px;
padding:0px;
margin-top:20px;
text-indent:-999999px;
background: url(images/logo.png) no-repeat;
color:#fff;
text-decoration:none;
}
nav{
}
nav ul li{
float:right;
line-height:0px;
font-size:16px;
font-family:Open Sans;
color:#ffffff;
font-weight:100;
border-left:1px solid #303030;
margin:36px 0px 36px 0px;
padding: 9px 15px 9px 15px;
}
nav ul li a {
text-decoration:none;
color:#ffffff;
}
#home{
border-left:none;
}
#lang{
border-left:none;
font-size:13px;
margin-left:115px;
}
/*#header_border{
height:2px;
background-color:#bfbfbf;
width:100%;
margin:0px;
padding:0px;
}*/
#slider_container{
max-width:100%;
margin:0 auto;
height:678px;
background-color:#c4c4c4;
padding:0px;
}
#slider img{
width:100%;
margin 0 auto;
height:588px;
position:absolute;
top:px;
left:0px;
}
#slider_content{
width:980px;
height:588px;
margin:0 auto;
}
#sl_content{
position:relative;
top:253px;
margin:0px;
padding:0px;
height:84px;
width:605px;
background: url(images/slider_header_1.png) no-repeat;
text-indent:-999999px;
}
#slider_arrow_left{
background-image: url("images/arrow_slider_left.png");
background-repeat:no-repeat;
float:left;
position:absolute;
top:367px;
left:20px;
width:42px;
height:42px;
}
#slider_arrow_right{
background-image: url("images/arrow_slider_right.png");
background-repeat:no-repeat;
float:right;
position:absolute;
top:367px;
right:20px;
width:42px;
height:42px;
}
#slider_arrow_left:hover{
background-image: url("images/arrow_slider_left_hover.png");
background-repeat:no-repeat;
}
#slider_arrow_right:hover{
background-image: url("images/arrow_slider_right_hover.png");
background-repeat:no-repeat;
}
#main_container{
width:980px;
margin:0 auto;
position:relative;
bottom: 52px;
border:1px solid black;
}
#book{
width:980px;
height:100px;
margin:0 auto;
background-color:#fff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
#book_head{
width:215px;
float:left;
margin:0px;
height:100px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
background-color:#f3f3f3;
border-right:1px solid #e0e0e0;
}
/*width:215px;
background-color:#f3f3f3;
height:99px;
border:1px solid black;
position:relative;*/
#book_head h1{
font-family:Open sans;
font-weight:bold;
font-size:18px;
margin-bottom:-10px;
color:#373535;
}
#book_head p{
font-family:Open sans;
font-size:13px;
color:#939292;
width:150px;
}
#book_head span{
margin:0px;
position:relative;
top:21px;
left:22px;
}
#book_input div{
float:right;
margin-top:10px;
position:relative;
right:12px;
}
input[type="text"]{
margin-left:11px;
height:36px;
-webkit-border-radius: 5px;
-moz-border-bottom-radius: 5px;
border:2px solid #d9d7d7;
}
input[placeholder="Select a room type"]{
width:175px;
text-indent:14px;
background-image: url("images/input_arrow_1.png");
background-repeat:no-repeat;
background-position: 100% 50%;
}
input[placeholder="1"]{
width:53px;
text-indent:14px;
background-image: url("images/input_arrow_2.png");
background-repeat:no-repeat;
background-position: 100% 50%;
}
input[placeholder="DD/MM/YYYY"]{
text-indent:14px;
width:144px;
background-image: url("images/input_calender_1.png");
background-repeat:no-repeat;
background-position: 100% 50%;
}
input[placeholder="0"]{
width:53px;
text-indent:14px;
background-image: url("images/input_arrow_3.png");
background-repeat:no-repeat;
background-position: 100% 50%;
}
input[type="submit"]{
width:94px;
height:36px;
margin-top:31px;
margin-left:10px;
background-color:#32a2e3;
border:1px solid #32a2e3;
font-family:Open sans;
font-weight:bold;
color:#fff;
border-bottom:1px solid #2b8ac1;
}
#one{
border:1px solid black;
}
.input_label{
position:relative;
left:11px;
top:4px;
font-family:Open sans;
font-size:13px;
}
#content{
width:980px;
margin:0 auto;
margin-top:44px;
margin-bottom:0px;
}
.thumb{
width:298px;
height:149px;
background-color:#fcfdff;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border:1px solid #d8d9db;
}
.col{
float:left;
margin:0px;
margin-right:43px;
width:298px;
height:200px;
}
#col_ed{
margin-right:0px;
}
.thumb_h{
font-family:Open sans;
font-size:20px;
font-weight:300;
}
.thumb_det{
font-family:Open sans;
font-size:13px;
margin-top:10px;
width:270px;
}
.bold{
font-weight:bold;
}
#footer_wrap{
clear:both;
background-color:#ffffff;
width:100%;
height:70px;
margin:0px;
border:1px solid black;
position:absolute;
top:1317px;
}
#footer{
margin:0 auto;
width:980px;
padding-top:30px;
}
#footer {
}
.footer_col{
float:left;
width:324.6px;
height:70px;
font-family:Open sans;
font-size:14px;
}
.footer_col p {
float:left;
color:#9b9a9a;
}
#lastone p{
padding-left:14px;
}
#lastone a{
text-decoration:none;
color:#9b9a9a;
}
#mid{
padding-right:0px;
text-indent:-999999px;
}
#mid p{
padding-right:5px;
}
#mid span{
display:block;
position:relative;
right:-60px;
bottom:10px;
}
#f{
background: url(images/facebook.png)no-repeat;
width:30px;
height:30px;
}
#t{
background: url(images/twitter.png)no-repeat;
width:30px;
height:30px;
}
#v{
background: url(images/vimeo.png)no-repeat;
width:30px;
height:30px;
}
#y{
background: url(images/youtube.png)no-repeat;
width:30px;
height:30px;
}
#p{
background: url(images/pinterest.png)no-repeat;
width:30px;
height:30px;
}
HTML代码就在这里 这是我的HTML代码
<!DOCTYPE html>
<html lang="en">
<head>
<!--[if IE]>
<script type="text/javascript">
(function(){
var html5elmeents = "address|article|aside|audio|canvas|command|datalist|details|dialog|figure|figcaption|footer|header|hgroup|keygen|mark|meter|menu|nav|progress|ruby|section|time|video".split('|');
for(var i = 0; i < html5elmeents.length; i++){
document.createElement(html5elmeents[i]);
}
}
)();
</script>
<![endif]-->
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="slider_container">
<div id="header_wrap">
<header>
<h1><a href="#">UFULU GARDENS</a></h1>
<nav>
<ul>
<div>
<li id="lang"><a href="#">EN <img src="images/lang_arrow.png"/></a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Activities</a></li>
<li><a href="#">Reservation</a></li>
<li><a href="#">Rooms & Suites</a></li>
<li id="home"><a href="#">Hotel</a></li>
</div>
</ul>
</nav>
</header>
</div>
<div id="slider" class="fadein">
<img src="images/slider1.jpg"/>
<!--<img src="images/slider2.jpg"/>
<img src="images/slider3.jpg"/> -->
</div>
<div id="slider_arrows">
<a href="#"id="slider_arrow_left"> </a>
<a href="#"id="slider_arrow_right"> </a>
</div>
<div id="slider_content">
<div id="sl_content">
<h1>HEADER</h1>
</div>
</div>
</div>
<div id="main_container">
<div id="book">
<div id="book_head">
<span>
<h1>Book a room online</h1>
<br/>
<p>Lorem ispum solor sid
</span>
ahmed loresin vane.</p>
</div>
<div id="book_input">
<div >
<p><input type="submit" value="Book now"</p>
</div>
<div>
<p class="input_label">Children:</p>
<br/>
<p><input type="text" placeholder="0"/></p>
</div>
<div>
<p class="input_label">Adults:</p>
<br/>
<p><input type="text" placeholder="1" /></p>
</div>
<div>
<p class="input_label">Check-out-date:</p>
<br/>
<p><input type="text" placeholder="DD/MM/YYYY"></p>
</div>
<div>
<p class="input_label">Check-in-date:</p>
<br/>
<p><input type="text" placeholder="DD/MM/YYYY"/></p>
</div>
<div>
<p class="input_label">Type of room:</p>
<br/>
<p><input type="text" placeholder="Select a room type"/></p>
</div>
</div>
</div>
<div id="content">
<!--149 296-->
<div class="col">
<div class="thumb"> </div>
<br/>
<p class="thumb_h">Single room <span class="bold"> 110 $ </span> </p>
<p class="thumb_det">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
</p>
</div>
<div class="col">
<div class="thumb"> </div>
<br/>
<p class="thumb_h">Double room <span class="bold">180 $</span></p>
<p class="thumb_det">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
</p>
</div>
<div class="col" id="col_ed">
<div class="thumb"></div>
<br/>
<p class="thumb_h">Suite room <span class="bold"> 210 $</span></p>
<p class="thumb_det">Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat.
</p>
</div>
</div>
</div>
<div id="footer_wrap">
<div id="footer">
<div class="footer_col">
<p>© 2012 Paradise Hotel. All Rights Reserved.</p>
</div>
<div id="mid" class="footer_col">
<span>
<a href="#">
<p id="f">A</p>
</a>
<a href="#">
<p id="t">A</p>
</a>
<a href="#">
<p id="v">A</p>
</a>
<a href="#">
<p id="y">A</p>
</a>
<a href="#">
<p id="p">A</p>
</a>
</span>
</div>
<div id="lastone"class="footer_col">
<p><a href="#">Home</a></p>
<p> <a href="#">Rooms & Suites</a></p>
<p><a href="#">Resevation</a></p>
<p><a href="#">Contact</a></p>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slide.js"></script>
</body>
</html>