你的位置:首页 > 软件开发 > 网页设计 > DIV+CSS自适应布局

DIV+CSS自适应布局

发布时间:2016-04-06 01:00:06
自适应布局分两类:高度和宽度,方法有很多,我用三列布局举例,我就列几个通俗易懂的例子呗,懂了三列的,两列的原理一样,呵呵哒。效果图如下:高度自适应——宽度自适应 1,高度自适应布局 ...

自适应布局分两类:高度和宽度,方法有很多,我用三列布局举例,我就列几个通俗易懂的例子呗,懂了三列的,两列的原理一样,呵呵哒。

效果图如下:高度自适应——宽度自适应

DIV+CSS自适应布局          DIV+CSS自适应布局

1,高度自适应布局

      原理就是把每个模块设置为绝对定位,然后设置中间自适应的模块的top和bottom属性的值分别为头部模块和底部模块的高,然后中间模块的高度就自适应了。代码如下:

html代码:

 

<body>    <div class="top">      120px    </div>    <div class="main">      自适应    </div>    <div class="bottom">      120px    </div></body>

原标题:DIV+CSS自适应布局

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。