纯CSS 贴网页底部代码

纯CSS 贴网页底部代码,FF2.0+、FF3.0+、IE6、IE7、Safari、Opera、Chrome都通过,IE8b2下的效果有瑕疵,用hack方法解决。

<html>
<head>
<title>test,alixixi测试中……</title>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8" />
<style type="text/css">
html{height:100%;overflow:auto;}  
body{margin:0;padding:0;position:relative;height:auto !important;height:100%;min-height:100%;text-align:center;}  
.main{border-bottom:60px solid #fff;}  
#footer{position:absolute;width:100%;clear:both;height:25px;border-bottom:1px solid #e0e0e0;border-top:1px solid #e0e0e0;margin-top:20px;bottom:0;left:0;}  
</style>
</head> 
<body>     
<div class="all">         
<div id="topbar">菜单部分</div>         
<div class="main">我是主体,我是核心<br /><br /><br /><br />虽然我是主体,但是你可以删除我其中的内容再看看我下面的页脚</div>        
<div id="footer">阿里西西告诉你,这行文字紧贴网页底部,哪也不去了。</div>   
</div> 
</body> 
</html> 


[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

时间: 2024-08-03 13:02:47

纯CSS 贴网页底部代码的相关文章

CSS3网页布局实例代码:始终在网页底部代码2则

文章简介:CSS3网页布局实例代码:始终在网页底部代码2则 <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>始终在底部(1)</title><style>body{margin:0} html, body{height:100%}

css固定网页底部完美兼容代码

ie6下也不会动噢 ie6下也不会动噢 ie6下也不会动噢 ie6下也不会动噢 ie6下也不会动噢 ie6下也不会动噢 ie6下也不会动噢 ie6下也不会动噢 ie6下也不会动噢 ie6下也不会动噢 ie6下也不会动噢 ie6下也不会动噢 ie6下也不会动噢 ie6下也不会动噢 ie6下也不会动噢 ie6下也不会动噢 ie6下也不会动噢 ie6下也不会动噢 ie6下也不会动噢 ie6下也不会动噢 ie6下也不会动噢 ie6下也不会动噢 ie6下也不会动噢 ie6下也不会动噢 ie6下也不会动噢

纯css实现精美箭头代码

图: HTML代码:  代码如下 复制代码 <div class="pre-wrap"> <div class="pre"> <div class="pre1"></div> <div class="pre2"></div> </div> </div>   CSS代码: .pre-wrap { width: 200px; heigh

纯css导航菜单效果代码(兼容所有浏览器)

About Me Lorem ipsum dolor Maecenas lacinia sem Suspendisse fringilla Portfolio Lorem ipsum dolor Maecenas dignissim fermentum luctus Suspendisse fringilla Lorem ipsum dolor Maecenas lacinia sem Suspendisse fringilla Clients Lorem ipsum dolor Maecena

一个用纯CSS制作的网页下拉菜单

网页特效代码实例:一个用纯CSS制作的网页下拉菜单. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"[ <!ELEMENT a (#PCDATA | table)* > ]><html xmlns="http://www.w3.org/1999/xhtml" xml:lang

纯CSS实现超简单的二级下拉导航菜单代码

本文实例讲述了纯CSS实现超简单的二级下拉导航菜单代码.分享给大家供大家参考.具体如下: 这是一款纯CSS菜单,二级下拉导航效果,是最简洁的CSS导航菜单,兼容性也很棒,IE7/8.火狐等都支持,而且它还是学习CSS菜单编写的典型教程,让你学会很多CSS技巧. 运行效果截图如下: 具体代码如下:   复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.

纯css实现蓝色圆角效果水平导航菜单代码

         本文实例讲述了纯css实现蓝色圆角效果水平导航菜单代码.分享给大家供大家参考.具体如下:          这是一款可爱的蓝色圆角水平导航菜单,用到几张背景图片,我觉得这款菜单挺实用,特别是用在个人博客中非常合适.在兼容性方面做的也很好,几乎兼容所有的浏览器. 运行效果截图如下: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

纯CSS实现多级半透明效果菜单代码

 本文实例讲述了纯CSS实现多级半透明效果菜单代码.分享给大家供大家参考.具体如下: 这是一款基于CSS实现的多级半透明菜单,最多可支持5级的CSS菜单,菜单样式可自己调整,默认先是这种,兼容多种浏览器. 运行效果截图如下:   具体代码如下:   代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dt

代码实例:纯CSS代码实现翻页

css|翻页 纯CSS实现翻页效果,原理比较简单,书签配合隐藏. 运行代码框 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" l