制作自适应布局的网页对初学者是个难点,今天我们以最常见的上中下结构,中间又分为两列的全屏自适应布局为例,教大家如何制作自适应布局网页。
上中下结构,中间又分为两列的全屏自适应布局HTML代码:
<div class="g-hd"></div> <div class="g-sd"></div> <div class="g-mn"></div> <div class="g-ft"></div>
上中下结构,中间又分为两列的全屏自适应布局CSS代码:
/* 全屏自适应布局 */ html,body{width:100%;height:100%;overflow:hidden;margin:0;} html{_height:auto;_padding:100px 0 50px;} .g-hd,.g-sd,.g-mn,.g-ft{position:absolute;left:0;} .g-hd,.g-ft{width:100%;} .g-sd,.g-mn{top:100px;bottom:50px;_height:100%;overflow:auto;} .g-hd{top:0;height:100px;} .g-sd{width:300px;} .g-mn{_position:relative;left:300px;right:0;_top:0;_left:0;_margin-left:300px;} .g-ft{bottom:0;height:50px;}
以上就是《div+css制作上中下,中间两列的全屏自适应布局》的全部内容,用到了绝对定位、相对定位,中间部分左侧宽度300px,右侧使用相对定位left:300px和_margin-left:300px;保证和左侧的位置错开。
125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/2434.html