个人中心
gpt4 book ai didi

html - 固定页脚不显示所有部分？

转载 作者：行者123 更新时间：2023-11-28 11:53:23 24 4
gpt4 key购买 nike

感谢解决这个问题的人，它在谷歌浏览器上工作，但在 IE 上它仍然无法工作。一个浏览器回答了这个问题。如果你用最新的 IE 查看我的网站 http://www.bbwillowlake.co.nf你可以看到你看不到网站的最底部。我仍然想知道为什么该网站这样做。我只需要在底部增加更多的 margin 吗？我正在尝试改写这些问题，因为我的帐户被禁止了。下面还有一个最新版本的代码，有很多变化。顺便说一句，版权是假的，我知道有些人不会接触带有版权的代码，因为它是非法的，这个版权是假的，这只是一个学校元素的假网站。

索引.php

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
B & B Willow Lake | Home
</title>
<link rel="stylesheet" type="text/css" href="styles/layout.css">
<link rel="stylesheet" type="text/css" href="styles/style.css">
</head>
<body>
<div id="wrapper">
<header id="header">
<h1><a href="index.php"><font color="#FFFFFF">B & B Willow Lake</font></a></h1>
</header>
<ul id="menu">
<li>
<a href="packages.php">Packages</a>
<ul>  
<li><a href="one_and_two_night.php">One and Two Night</a>
</li>
<li><a href="anniversary.php">Anniversary</a>
</li>
<li><a href="extended_stay.php">Extended Stay</a>
</li>
<li><a href="honey_moon.php">Honey Moon</a>
</li>
</ul>
</li>
<li><a href="activities.php">Activities</a>
<ul>
<li><a href="indoor.php">Indoor</a>
</li>
<li><a href="outdoor.php">Outdoor</a>
</li>
</ul>
</li>
<li><a href="dine.php">Dine</a>
<ul>
<li><a href="specials.php">Specials</a>
</li>
<li><a href="breakfast.php">BreakFast</a>
</li>
<li><a href="lunch.php">Lunch</a>
</li>
<li><a href="teaparty.php">Tea Party</a>
</li>
</ul>
</li>
<li><a href="contact_us.php">Contact Us</a>
<ul>
<li><a href="directions.php">Directions</a>
</li>
</ul>
</li>
</ul>
<section id="section_slide">
<img src="images/background.jpg" alt="background" id="png1"><img src="images/background3.jpg" alt="background2" id="png3"><img src="images/background2.jpg" alt="background3" id="png2"><img src="images/background4.jpg" alt="background4" id="png4">
</section>
<div id="middle_wrapper">
<section id="section">
<article>
<h2>Play</h2>
<a href="play.html"><img src="images/play.jpg" id="png5" alt="background5" id="picmain"></a>
<p>Here will go a text area that talks about all the stuff they can do out door and in door most of the descrpiton will be like the descrpition on the acrives page which it is refing to,<br />
<a id="learnmore" href="play.php">Learn More</a>
</p></article><hr /> 
<article>
<h2>Stay</h2><a href="stay.php"><img src="images/stay.jpg" id="png6" alt="background6" id="picmain2"></a>
<p>This wil be a ref to the package page just a shorter descrpiton so sum up what our stay is like all of these little text areas like play stay dine and cel shoul have a blue text area at the bottom that says learn more that when liked should link to the main page for the subject.<br />
<a id="learnmore2" href="stay.php">Learn More</a>
</p><hr /></article>
<article>
<h2>Dine</h2><a href="dine.php"><img src="images/dine.jpg" id="png7" alt="background7" id="picmain3"></a>
<p>Here will be a desc of the dine page which well tell the user the basics of what eating is like at the resort b and b willow lake it should also tell them that there is a kids menu for there kids and that there is fine dining for the adults and a lot of places to eat for the famlily and just for lovers to get away and eat.<br />
<a id="learnmore3" href="dine.php">Learn More</a>
</p><hr /></article>
<article>
<h2>Celebrate</h2><a href="cel.php"><img src="images/cel.jpg" id="png8" alt="background8" id="picmain4"></a>
<p>This well talk about the events that you can host and the resort like wewdings and birth days tea partys any thing from normal kids birth day partys to highclass wedingns and events of any sort.<br />
<a id="learnmore4" href="celebrate.php">Learn More</a>
</p></article>
</section>
<aside id="aside">
<br />
<br />
<form target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post" >
<input type="hidden" name="cmd" value="_s-xclick">
<table>
<tr><td><input type="hidden" name="on0" value="Packages">Packages</td></tr><tr><td><select name="os0">
    <option value="One and Two Night">One and Two Night $1,000.00 USD</option>
    <option value="Anniversary">Anniversary $1,000.00 USD</option>
    <option value="Extended Stay">Extended Stay $1,000.00 USD</option>
    <option value="Honey Moon">Honey Moon $1,000.00 USD</option>
</select> </td></tr>
</table>
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----
">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

<br />
<br />
<br />
<h2>Why Us?</h2>
<p>
<pre>
adsfsdafasdfadfsdafasfsdafasdfa<br />dfsdafadfdddddddujhyjbddddddd<br />dddddddddddddddddddddddd<br />
asdfasdfsdafadsdfasdfdsfadsfasdfa<br />dfadsfasdfadfda<br />sfasdfasdfasdfasdfsdafsdafdsafd<br />
dsasdfdsfsdfasdfasdfdfddddddddddddd<br />ddddddddddddddddddddddddd<br />dddddddddddd<br />
dddddddddddddddddddddddddddddddddd<br />Sddddddddddddddddddddddddd<br />ddddddddddddddd<br />
</pre>
</p>
<br />
<br />
<br />
<iframe title="Youtube video player" width="90%" height="390px" src="http://www.youtube.com/watch?v=mI6aVSzZsps&list=TLctir32a34lOmJXkxNcviVk5lubS_IL3N"></iframe>
<img src="images/facebook.gif" alt="facebook" id="facebook" href="http://www.facebook.com/"><img src="images/twitter.gif" alt="twitter" id="twitter" href="http://www.twitter.com/"><img src="images/g+.gif" alt="g+" id="google" href="http://www.google.com/"><img src="images/youtube.gif" alt="youtube" id="youtube" href="http://www.youtube.com/"><br />
</aside>
</div>
</div>
<footer id="footer">
<h1><a href="index.php"><font color="#FFFFFF">B & B Willow Lake</font></a></h1>
<p>
bandbwillowlake@gmail.com
</p>
<p>
Copyright 0 B.C. &copy; bbwillowlake.co.nf, All rights reserved.
</p>
</footer>
</body>
</html>

顺便说一句，对于我风格中草率的代码感到抱歉。

样式.css

*{
font-family:Verdana;
}
body {  
background: -webkit-radial-gradient(#D8D8D8, #A4A4A4, #6E6E6E); /* Safari */
background: -o-radial-gradient(#D8D8D8, #A4A4A4, #6E6E6E); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient(#D8D8D8, #A4A4A4, #6E6E6E); /* For Firefox 3.6 to 15 */
background: radial-gradient(#D8D8D8, #A4A4A4, #6E6E6E); /* Standard syntax */
}
pre {
    overflow-x: auto; /* Use horizontal scroller if needed */
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
    white-space : normal;
}  
#header{
color: #FFF;
background: #111;
background: -moz-linear-gradient(#5882FA, #3D72A4); 
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #5882FA),color-stop(1, #3D72A4));    background: -webkit-linear-gradient(#5882FA, #3D72A4);  
background: -o-linear-gradient(#5882FA, #3D72A4);
background: -ms-linear-gradient(#5882FA, #3D72A4);
background: linear-gradient(#5882FA, #3D72A4);
}
#facebook{
width:50px;
height:50PX;
margin-left:5px;
}
#twitter{
width:50px;
height:50PX;
margin-left:5px;
}
#google{
width:50px;
height:50PX;
margin-left:5px;
}
#youtube{
width:50px;
height:50PX;
margin-left:5px;
}
#picmain{
text-align:center;
width:150px;
height:150px;
}
#picmain2{
text-align:center;
width:150px;
height:150px;
}
#picmain3{
text-align:center;
width:150px;
height:150px;
}
#picmain4{
text-align:center;
width:150px;
height:150px;
}

h1{
color: #FFF;
text-shadow: 0 1px 0 #000;
text-decoration:none;
}
h2{
color: #000;
margin-bottom:8px;
text-shadow: 0 1px 0 #000;
}
#nav{
background-color: #254159;
color: #FFFFFF;
text-align: center;
}
a{
text-decoration:none;
}
a:link{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
#section_slide{
background-color: #FFFFFF;
}
img{
}
#section{
background-color: #FFF;
}
#png1{
width:25%;
height:150px;
}
#png2{
width:25%;
height:150px;
}
#png3{
width:25%;
height:150px;
}
#png4{
width:25%;
height:150px;
}
#png5{
width:150px;
height:150px;
transition:width 2s, height 2s, transform 2s;
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari */
}
#png5:hover{
width:250px;
height:250px;
transform:rotate(360deg);
-webkit-transform:rotate(360deg); /* Safari */
}
#png6{
width:150px;
height:150px;
transition:width 2s, height 2s, transform 2s;
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari */
}
#button{
width:auto;
height:25px;
background: #111;
background: -moz-linear-gradient(#444, #111); 
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));  background: -webkit-linear-gradient(#444, #111);    
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
color:#FFF;
}
#png6:hover{
width:250px;
height:250px;
transform:rotate(360deg);
-webkit-transform:rotate(360deg); /* Safari */
}
img{
border: none;
}
#png7{
width:150px;
height:150px;
transition:width 2s, height 2s, transform 2s;
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari */
}
#png7:hover{
width:250px;
height:250px;
transform:rotate(360deg);
-webkit-transform:rotate(360deg); /* Safari */
}
#png8{
width:150px;
height:150px;
transition:width 2s, height 2s, transform 2s;
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari */
}
#png8:hover{
width:250px;
height:250px;
transform:rotate(360deg);
-webkit-transform:rotate(360deg); /* Safari */
}
#aside{
background: #111;
background: -moz-linear-gradient(#5882FA, #3D72A4); 
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #5882FA),color-stop(1, #3D72A4));    background: -webkit-linear-gradient(#5882FA, #3D72A4);  
background: -o-linear-gradient(#5882FA, #3D72A4);
background: -ms-linear-gradient(#5882FA, #3D72A4);
background: linear-gradient(#5882FA, #3D72A4);
}
#footer{
background: #111;
background: -moz-linear-gradient(#444, #111); 
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));  background: -webkit-linear-gradient(#444, #111);    
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
color:#FFFFFF;
}
#menu{
width: 82%;
margin-left: auto;
margin-right: auto;
padding: 10px 0 0 0;
list-style: none;  
background: #111;
background: -moz-linear-gradient(#444, #111); 
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));  background: -webkit-linear-gradient(#444, #111);    
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}

#menu li{
float: left;
padding: 0 0 10px 0;
position: relative;
}

#menu a{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}

#menu li:hover > a{
color: #FFF;
}

*html #menu li a:hover{ /* IE6 */
color: #FFFFFF;
}

#menu li:hover > ul{
display: block;
}

/* Sub-menu */

#menu ul{
list-style: none;
margin: 0;
padding: 0;    
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;    
background: #FFFFFF;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);    
background: -o-linear-gradient(#444, #111); 
background: -ms-linear-gradient(#444, #111);    
background: linear-gradient(#444, #111);    
-moz-border-radius: 5px;
border-radius: 5px;
}

#menu ul li{
float: none;
margin: 0;
padding: 0;
display: block;  
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}

#menu ul li:last-child{   
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;    
}

#menu ul a{    
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}

*html #menu ul a{ /* IE6 */   
height: 10px;
width: 150px;
}

*:first-child+html #menu ul a{ /* IE7 */    
height: 10px;
width: 150px;
}

.button{
border-radius:10px;
background-color:red;
}

#menu ul a:hover{
background: #111;
background: -moz-linear-gradient(#5882FA, #3D72A4); 
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #5882FA),color-stop(1, #3D72A4));    background: -webkit-linear-gradient(#5882FA, #3D72A4);  
background: -o-linear-gradient(#5882FA, #3D72A4);
background: -ms-linear-gradient(#5882FA, #3D72A4);
background: linear-gradient(#5882FA, #3D72A4);
}

#menu ul li:first-child a{
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}

#menu ul li:first-child a:after{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}

#menu ul li:first-child a:hover:after{
border-bottom-color: #FFF;
}

#menu ul li:last-child a{
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}

/* Clear floated elements */
#menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}

#learnmore{
color: blue;
}

#learnmore2{
color: blue;
}

#learnmore3{
color: blue;
}

#learnmore4{
color: blue;
}
* html #menu             { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */

最佳答案

这会很好用

#section {
    margin-bottom: 100px
}

它将在页脚和节末之间创建一个空格。

关于html - 固定页脚不显示所有部分？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20197937/

24 4 0
文章推荐： javascript - 使我的谷歌地图的宽度响应
文章推荐： css - 堆叠在小型设备上的 Flexbox
文章推荐： css - 在 Microsoft Edge 中，粘性定位与 dir "rtl"属性结合使用时不起作用
文章推荐： c# - asp.net webform 菜单控件如何缩进包裹的元素？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com