div+css制作上中下,中间两列的全屏自适应布局

div+css制作上中下,中间两列的全屏自适应布局

制作自适应布局的网页对初学者是个难点,今天我们以最常见的上中下结构,中间又分为两列的全屏自适应布局为例,教大家如何制作自适应布局网页。

上中下结构,中间又分为两列的全屏自适应布局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

(0)
江山如画的头像江山如画管理团队
上一篇 2018年8月2日 上午10:46
下一篇 2018年8月2日 下午3:03

99%的人还看了以下文章

  • CSS3 transition transform属性及实例详解-鼠标放到图片上图片等比例放大

    CSS3的transform:scale()可以实现按比例放大或者缩小功能,transform呈现的是一种变形结果。 CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡,transition呈现的是一种过渡,是一种动画转换过程,如渐显、渐弱、动画快慢等。 transiton:过渡属性 过渡所需要时间 过渡动画函数 过渡延迟时间; t…

    2018年8月1日
    5.3K0
  • 纯CSS制作红色网站二级下拉导航菜单

    纯CSS制作红色网站二级下拉导航菜单,代码非常简洁,适合修改后使用,入门就能掌握。 二级下拉导航菜单HTML代码: <nav> <ul> <li><a href=”#”>首页</a></li> <li><a href=”#”>电影</a> <ul…

    2019年4月17日
    5.8K0
  • HTML5+CSS3制作网页实例:HTML5入门

    文章最后提供HTML5+CSS3制作网页实例源码下载。 步骤1 -设计 设计师先根据构想使用PHOTOSHOP设计页面,然后开始HTML和CSS编码,从设计背景、颜色和字体,细节部分的工作内容。 步骤2 – HTML 头部html代码 <!DOCTYPE html> <html> <head> <meta…

    2019年3月7日
    10.9K0
  • css布局基础:定位练习1

    主要知识点: 1、5种常用定位:静态定位/相对定位/绝对定位/固定定位/吸附定位(磁铁定位) position:static/relative/absolute/fixed/sticky。 2、除静态定位外,都可以用left/top/bottom/right/z-index属性进行移动。 效果图: 效果说明:故宫文字段落设置背景色黑色透明,覆盖在图片底部。 …

    2020年4月4日
    3.3K0
  • 第14课:上传网页

    只要你有服务器空间和一个FTP工具就可以在因特网上发布自己的网站了。

    2018年1月18日
    4.4K1
  • jQuery获取URL传递的参数

    URL传递参数是程序开发中经常用到的,中国网页设计给大家分享使用jQuery如何获取URL传递的参数。 例如要获取下面URL地址中的参数: http://www.125jz.com?id=”2020″&title=”jQuery获取URL传递的参数” 实现代码如下: //获取URL参数a和b funct…

    2018年9月30日
    2.3K0

发表回复

登录后才能评论