当前位置: 首页 > 图文教程 > 网页特效 > 浏览器 > DIV+CSS网页另类上下布局的特效代码

浏览器
实用的滑动文本选项卡显示(CSS+Javascript)
用链接控制页面小窗口的打开和关闭
关于限制网页表单的一些特效代码
网页特效代码:打开层/关闭层
IE浏览器BUG测试的CSS代码
DIV+CSS网页另类上下布局的特效代码
比较实用的网页弹出层
网页分栏特效
网页三列自适应等高且中列宽度自适应
音乐和歌词同步的网页特效代码
使用CSS定位的网页footer
CSS制作用户登录和用户注册的用户体验表单
左上角图片文字环绕在图片右侧网页特效
Google的翻译和Bing的翻译的实例比较
山寨无处不在,山寨傲游浏览器闪亮登场
图片自定义滚动条3.0
网页特效代码:模仿MSN消息提示的效果
网页中弹出小窗口(页面背景直接半透明)
网页中弹出小窗口,页面背景逐渐变为半透明
全新firefox3.5具备的新特性

浏览器 中的 DIV+CSS网页另类上下布局的特效代码


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-10   浏览: 149 ::
收藏到网摘: n/a

在论坛里看到一位朋友在问一个上下2个内容框的,宽度为100%的布局方式,然后自己也就尝试了一下,发现了几个问题的存在。

先说说在尝试的过程发现的几个问题
1、盒模型问题
   相信玩重构或者说是DIV+CSS的朋友应该都知道这个东西,废话不多说,不知道而有兴趣可以去网上搜索一下。这里我提到这个是因为这个布局是用百分比来控制的,所以当加对边框加上1px的边后,就不好减回来,我是舍弃了上边的边框样式。

2、溢出问题
   这个问题只要对overflow做hidden就可以了,防止内容过长而溢出。刚刚开始的时候可以对html跟body的overflow加一个hidden属性。Blank 告诉我,IE默认是有滚动条的宽度(这个偶知道),而FF是没有的(这个偶就不知道了)。

基本上也就这样,代码如下:

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