DIV+CSS网页另类上下布局的实例代码

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

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

基本上也就这样，代码如下：

上下层测试

上面的

下面的

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • DIV+CSS网页另类上下布局的实例代码

    先说说在尝试的过程发现的几个问题 1.盒模型问题 相信玩重构或者说是DIV+CSS的朋友应该都知道这个东西,废话不多说,不知道而有兴趣可以去网上搜索一下.这里我提到这个是因为这个布局是用百分比来控制的,所以当加对边框加上1px的边后,就不好减回来,我是舍弃了上边的边框样式. 2.溢出问题 这个问题只要对overflow做hidden就可以了,防止内容过长而溢出.刚刚开始的时候可以对html跟body的overflow加一个hidden属性.Blank 告诉我,IE默认是有滚动条的宽度(这个偶知道

  • 纯html+css+javascript实现楼层跳跃式的页面布局（实例代码）

    纯html+css+javascript实现楼层跳跃式的页面布局（实例代码）

    实现效果演示: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>楼层跳跃式的页面布局</title> <meta charset="utf-8"> <style type="text/css"> *{ margin: 0; padding: 0; } body, html{ height: 100%; } ul{ list-style: n

  • JS+DIV+CSS实现的经典标签切换效果代码

    JS+DIV+CSS实现的经典标签切换效果代码

    本文实例讲述了JS+DIV+CSS实现的经典标签切换效果代码.分享给大家供大家参考.具体如下: 这里演示JS+DIV+CSS实现的标签切换效果代码,通俗说就是滑动门的实现效果,很不错的实例,希望对你学习JS+CSS布局有帮助. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-bq-cha-tab-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

  • Bootstrap 实现表格样式、表单布局的实例代码

    1. 表格的一些样式 举例: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>My Test bootstrap</title> <link rel="stylesheet" href="./css

  • DIV+CSS+JS不间断横向滚动实现代码

    DIV+CSS+JS实现不间断横向滚动代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>横向不间断滚动DIV CSS代码-DIVCSS5</title> </head> <body>

  • 分享网页检测摇一摇实例代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: var Shaker = function(f){ // 摇一摇: 检测到3次摇动算一次摇一摇, 摇动后调用处理函数, 不再检测摇动 // f 摇动后的回调 this.callback = f; this.status = 0; // 0: 侦听未开始 1: 侦听开始 this.speed = 15; this.lastX = this.lastY = this.lastZ = 0; this.num = 0; // 检测触发次数 this.

  • Python爬虫爬取一个网页上的图片地址实例代码

    Python爬虫爬取一个网页上的图片地址实例代码

    本文实例主要是实现爬取一个网页上的图片地址,具体如下. 读取一个网页的源代码: import urllib.request def getHtml(url): html=urllib.request.urlopen(url).read() return html print(getHtml(http://image.baidu.com/search/flip?tn=baiduimage&ie=utf-8&word=%E5%A3%81%E7%BA%B8&ct=201326592&am

  • DIV+CSS网页制作布局技巧学习

    CSS布局常用的方法:float:none|left|right取值:none: 默认值.对象不飘浮left: 文本流向对象的右边right: 文本流向对象的左边 它是怎样工作的,看个一行两列的例子xhtml:<div id="wrap"><div id="column1">这里是第一列</div><div id="column2">这里是第二列</div><div class=&

  • div+CSS网页布局的意义与副作用原因小结第1/2页

    如今大部分网站仍然采用表格嵌套内容的方式来制作网站,虽然此方法对于我们来说比较熟悉.比较上手:但是,它却阻碍了一种更好的.更有亲和力的.更灵活的,而且功能更强大的网站设计方法--DIV+CSS. CSS网页布局的意义体现在如下方面: 一.使页面载入得更快 由于将大部分页面代码写在了CSS当中,使得页面体积容量变得更小.相对于表格嵌套的方式,DIV+CSS将页面独立成更多的区域,在打开页面的时候,逐层加载.而不像表格嵌套那样将整个页面圈在一个大表格里,使得加载速度很慢. 二.降低流量费用 页面体积

  • DIV+CSS实现的滑动门菜单特效代码

    DIV+CSS实现的滑动门菜单特效代码

    我们DIV+CSS实现的滑动门菜单特效 #menu { margin:0; padding:0; height:26em; overflow:hidden; background:#FFFCF2; } #menu li { list-style-type:none; float:left; display:block; width:100%; } #menu li a { display:block; text-decoration:none; color:#00b; margin:0; wid

随机推荐