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

稿源：互联网 2018-09-16 00:21:24 点击： 11605 撤稿纠错

DIV仿框架的方法，兼容性完美的一个实例...

以下讨论的是和网页框架布局相关的div层仿网页框架布局特效代码教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html>
<html >
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>div层仿网页框架布局特效代码 - by 阿里西西 js.alixixi.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">
 
 
 
 
 
 
 
 
 
 </div>
 <div class="main">
 <div style="width: 100%;">阿里西西 网页特效演示中心</div>
 DEMO BY JS.ALIXIXI.COM 
 一个标准的，兼容性很好的div仿框架的基础模型！ 
 
 
 
 
 
 
 
 
 
 </div>
 <div class="bottom"></div>
 </body>
</html>

关于div层仿网页框架布局特效代码的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018091691282.shtml方便下次再访问哦。

·上一篇： 纯CSS3代码制作的仿安卓系统开机动画画面特效代码
·下一篇： 一款纯CSS3实现的风车转动效果特效演示

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

文章分类LIST >>返回首页

最新游戏

最新新闻