我正在编写一个大学项目的Web界面,我一直在处理这个问题:
我希望我的页脚固定在底部,所以无论我使用哪个屏幕或者我切换全屏模式它都在位
它适用于除IE7之外的所有其他浏览器(我不必支持以前的版本)
<div id="menu"> <a href="information.html" rel="shadowBox;height=500;width=650" title="informatION" > <img src="images/info.png" alt="information icon" /> </a> <a href="images/bricks_of_destiny.jpg" rel="shadowBox" title="IMAGES" > <img src="images/image.png" alt="image icon" /> </a> <a href="music_player.swf" title="MUSIC" rel="shadowBox;height=400;width=600" > <img src="images/music.png" alt="music icon" /> </a> <a href="#" title="MOVIES"><img src="images/television.png" alt="movies icon" /></a> <a href="quotes.html" title="QUOTES" rel="shadowBox;height=300;width=650" > <img src="images/male_user.png" alt="male user icon" /> </a> <a href="#" title="REFERENCES"> <img src="images/search_globe.png" alt="search globe icon" /> </a> </div> <a href="images/destiny_1.jpg" rel="shadowBox" title="IMAGES"></a> <a href="images/destiny_carma_jewell.jpg" rel="shadowBox" title="IMAGES"></a> <a href="images/destiny-joan-marie.jpg" rel="shadowBox" title="IMAGES"></a> <a href="images/pursuing_destiny.jpg" rel="shadowBox" title="IMAGES"></a> <div class="clear"></div> <div id="destiny"> discover more about the word <span class="strong">DESTINY </span>! Click one of the icon above! (F11 Toggle Full / Standard screen) </div> <div id="footer"> <ul id="breadcrumbs"> <li>disclaimer</li> <li> | Icons by: <a href="http://dryicons.com/" rel="shadowBox">dryicons.com</a></li> <li> | Website by: <a href="http://www.eezzyweb.com/" rel="shadowBox">eezzyweb</a></li> <li> | <a href="http://jquery.com/" rel="shadowBox">jQuery</a></li> </ul> </div> </div>
CSS:
#wrapper{ text-align:center; margin:0 auto; width:750px; height:430px; border:1px solid #fff; } #menu{ position:relative; margin:0 auto; top:350px; width:450px; height:60px; } #destiny{ position:relative; top:380px; color:#FFF; font-size:1.5em; font-weight:bold; border:1px solid #fff; } #breadcrumbs{ list-style:none; } #breadcrumbs li{ display:inline; color:#FFF; } #footer{ position:absolute; width:750px; height:60px; margin:0 auto; text-align:center; border:1px solid #fff; bottom:0; } .clear{ clear:both; }
白色边框仅用于调试目的
该应用程序托管于http://www.eezzyweb.com/destiny/
任何建议表示赞赏