div层仿网页框架布局特效代码

发布时间：2014-08-16 09:58:10　来源/作者：学技巧网页制作　分类：表格图层阅读：0次点评一下

<!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>div层仿网页框架布局特效代码 - by 学技巧网站制作 www.xuejiqiao.com</title> <style type="text/css"> * { margin:0; padding:0; list-style:none;} html { height:100%; overflow:hidden; background:#fff;} body { height:100%; overflow:hidden; background:#fff;} div { background:#f60; line-height:1.6;} .top { position:absolute; left:10px; top:10px; right:10px; height:50px;} .side { position:absolute; left:10px; top:70px; bottom:70px; width:200px; overflow:auto;} .main { position:absolute; left:220px; top:70px; bottom:70px; right:10px; overflow:auto;} .bottom { position:absolute; left:10px; bottom:10px; right:10px; height:50px;} /*---ie6---*/ html { _padding:70px 10px;} .top { _height:50px; _margin-top:-60px; _margin-bottom:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .side { _height:100%; _float:left; _width:200px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .main { _height:100%; _margin-left:207px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} .bottom { _height:50px; _margin-top:10px; _position:relative; _top:0; _right:0; _bottom:0; _left:0;} </style> </head> <body> <div class="top"></div> <div class="side">我是学技巧网站制作站长，大家好 欢迎大家访问学技巧，我们的网址是www.xuejiqiao.com即学技巧全称 </div> <div class="main"> <div style="width: 100%;">网页特效演示中心</div> 一个标准的，兼容性很好的div仿框架的基础模型！ </div> <div class="bottom"></div> </body> </html>

(www.xuejiqiao.com)提示：可修改后再运行代码!

div层仿网页框架布局的方法，兼容性完美的一个实例。

本文版权归原作者所有，转载请注明原文来源出处，学技巧网站制作感谢您的支持！

学技巧网站制作

div层仿网页框架布局特效代码

极酷的表格（表格的颜色不断变化）

点击按钮后给Div图层设置随机背景颜色

鼠标滑过表格内单个单元格的背景变色特效