html把div分成两栏,div+css制作上中下,中间两列的全屏自适应布局
制作自适应布局的网页对初学者是个难点,今天我们以最常见的上中下结构,中间又分为两列的全屏自适应布局为例,教大家如何制作自适应布局网页。
上中下结构,中间又分为两列的全屏自适应布局HTML代码:
上中下结构,中间又分为两列的全屏自适应布局
/* 全屏自适应布局 */
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
html把div分成两栏,div+css制作上中下,中间两列的全屏自适应布局相关推荐
- HTML5左栏全屏自适应博客网站模板
简介: HTML5左栏全屏自适应博客网站模板是一款绿色左栏全屏自适应营销推广博客模板下载.aspku提示:本模板调用到谷歌字体库,可能会出现页面打开比较缓慢. 下载地址: http://www.byt ...
- vue 页面回跳两个界面(返回上一页两次)
vue 页面回跳两个界面(返回上一页两次) this.$router.go(-2);
- HTML中怎样把文字分两栏显示,word设置一页分两栏的三种方法
我们在阅读报纸的时候,经常看到分栏的现象,这就是通过Word当中的"分栏"功能进行设置的,那么下面就由学习啦小编给大家分享下word设置一页分两栏的技巧,希望能帮助到您. word ...
- html和css制作上三角和下三角
//html <div class="topmsg"><p class="gle"></p><a id="p ...
- 【CSS】背景图片全屏自适应
<style type="text/css"> body{position:fixed;top: 0;left: 0;width:100%;height:100%;mi ...
- CSS实现背景图片全屏自适应
body { width: 100%; height: 100%; background-image: url(bg.jpg) no-repeat; /* 背景图垂直.水平均居中 */ backgro ...
- html 布局满屏,CSS全屏布局的5种方式
前面的话 全屏布局在实际工作中是很常用的,比如管理系统.监控平台等.本文将介绍关于全屏布局的5种思路 思路一: float [1]float + calc 通过calc()函数计算出.middle元素 ...
- CSS全屏布局的6种方式
1.float [1]float + calc 通过calc()函数计算出.middle元素的高度,并设置子元素高度为100% <style> body,p{margin: 0;} bod ...
- Float构建三栏DIV CSS网页布局
你对用float构建三栏DIV CSS网页布局的用法是否熟悉,这里和大家分享一下,用绝对定位的方法从CSS中得到固定宽度的布局并不困难:但是得到液态布局就有点困难了,因此现在都开始抛弃基于表格的布局技 ...
最新文章
- android wlan0 网卡过程,android WIFI网络驱动之wpa_supplicant程序详解
- CSS3---选择器
- 将vim打造成IDE编程环境
- numpy 数组与矩阵的乘法理解
- 考研复习安排——第一阶段末
- 具体数学-第4课(多重求和方法)
- cmd 实用快捷键。。
- attiny85(digispark)零延迟启动探究
- xfs文件系统误删除文件恢复(testdisk工具)
- 充电IC中的动态路径管理
- 安装与配置VMware虚拟机
- TOTP动态密码认证功能,让天下无贼!
- S5PV210 iNAND/SD卡
- SpringBoot + FreeMarker + FlyingSaucer 实现PDF在线预览、打印、下载
- 揭秘喜马拉雅黑科技——网页播放器(创建自己的单页应用)
- 锁相环(PLL)的工作原理
- 项目管理中的成本计算
- 为什么说云桌面才是后疫情时代下的最优远程办公解决方案
- 一劳永逸的markdown主题~
- Sequential Recommender Systems :Challenges, Progress and Prospects
热门文章
- leetcode 474. Ones and Zeroes | 474. 一和零(双约束背包问题)
- JVM从入门到精通(二):详解Class加载过程,双亲委派机制,编译执行与解释执行
- 从印度兵力分布聊聊Mybatis中#和$的区别
- JDK13的六大重要新特性
- 容器源码解析之LinkedHashSet(六)
- spark读取文件源码分析-1
- leetcode-- 338. Counting Bits
- 使用RNN解决NLP中序列标注问题的通用优化思路
- 【已解决】java.lang.NullPointerException at line 15, Solution.r
- C语言满分:L1-061 新胖子公式 (10分)