纯CSS 贴底部的布局（兼容各个浏览器包括IE6）

<!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">
<head>
<title>test</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 #f00;}
#footer{position:absolute;width:100%;clear:both;height:25px;border-bottom:1px solid blue;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>

时间： 2024-10-26 21:50:09

纯CSS 贴底部的布局（兼容各个浏览器包括IE6）的相关文章

纯CSS最小响应网格布局

lemonade.css是一个超级小的CSS可以帮助你创建一个完全响应和灵活自如的网格布局,包括所需网页的头部. 样式链接 <link rel= href=> HTML结构这样创建一个多列网格布局: <div class="frame"> <div class="bit-1"> <div class="box">1</div> </div> </div> <

纯CSS实现三列布局(两边固定，中间自适应)

看了一些网上的案例,感觉较繁杂,于是,自己整理了一篇来说明这个东西. 也是给我自己复习吧,以前有人问道,我还没答上来呢.＝＝看代码: html: 1 <div class="top">this is top</div> 2 <div class="container"> 3 <div class="left">this is left</div> 4 <div class=&qu

利用border属性实现 .messageBox{ position: relative; width: 240px; height: 60px; line-height: 60px; background: #e9fbe4; border: 1px solid #c9e9c0; border-radius: 4px; text-align: center; color: #0c7823; } .triangleBorder{ position: absolute; left: 30px; ov

DIV JS CSS 轻量级弹出层兼容各浏览器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

css透明度的设置（兼容所有浏览器）

一句话搞定透明背景! .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }

css透明度的设置（兼容所有浏览器）

.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; }

CSS+JS下拉菜单和纯CSS下拉菜单

一.CSS+JS下拉菜单原理:一级菜单的li中包含二级菜单ul.在鼠标没有移上去时,二级菜单的ul是display:none的状态,鼠标一移上去变成display:block.改变这个display属性值是通过JS来实现.鼠标hover时,把整个二级菜单的ul给display出来,用到的事件onmouseonver.鼠标移出又把整个二级菜单的ul 给隐藏掉. nav-js.html文件 <!DOCTYPE html > <html> <head> <meta c

纯CSS实现圆角边框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

纯CSS 实现tooltip 内容提示信息效果

Tooltip 也就是内容的提示信息,合理使用可以给用户比较好的体验. 实现方法有很多种,有很多JS 插件,我这里介绍的是纯CSS实现的方法,兼容性也比较靠谱,IE8+均可正常显示.实现方法也非常简单. html结构 <a class="css-tooltip" href="http://fatesinger.com/73887" data-tooltip="137 likes with 3.43k reads">WordPress