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%的人还看了以下文章

  • 纯CSS制作热门文章排行,且前3名背景不同

    要制作文章排行前10、或评论排行榜1、2、3、4…,还要给前三名加上不同的背景,可以用纯css实现(用Ol,li),但通常网页制作中使用ul的比较多,因为不同浏览器对ol li有序列表默认自带的序号列表有着不同显示,容易引起浏览器兼容问题,所以遇到这样的有序排版布局,最简单是将序号切成背景图片! 使用ul li实现文章排行有序排版布局。   htm…

    2018年7月14日
    3.0K0
  • 跟永哥学HTML5(2):html5与html4的区别

    我们现在web前端开发的网页,一般都是html4.0。很多以前学过HTML 4.0的朋友可能此时会感到很迷惑,html 4.0和HTML5有什么区别? hmtl5与html4的区别? 先来看看HTML5推出的理由: 解决Web浏览器间的兼容性问题 在一个浏览器中可以运行的HTML、Css、Javascript,在另一个浏览器中不能运行。原因:各浏览器规范不统…

    2018年1月21日
    2.3K0
  • 跟永哥学HTML5(6):H5表单及表单验证

    表单在网页中主要负责数据采集功能。HTML 5一个令人兴奋的发展领域是新的Web表单。
    在今天的课程中你会看到浏览器会验证所需的字段,数据类型,如电子邮件、网址和任何模式,而不使用任何JavaScript。

    2018年2月27日
    2.8K0
  • css中id和class的优先级问题,与顺序无关

    id,class,style的优先级别顺序为style高于id高于class。

    2020年11月15日
    4.1K0
  • 第5课:文本

    文本的显示格式与式样对于网页设计师来说是一个重要问题。这一课将向你介绍CSS在文本布局方面令人激动的特性。本课将对下列CSS属性进行讲解: text-indent text-align text-decoration letter-spacing text-transform 文本缩进[text-indent] CSS属性text-indent用于为段落设置…

    2020年2月22日
    2.2K0
  • 纯CSS制作红色网站二级下拉导航菜单

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

    2019年4月17日
    3.8K0

发表回复

登录后才能评论