CSS 3层嵌套居中布局
<html>
<head>
<style type="text/css">
.root{
background-color: red;
width: 80%;
top: 20px;
position: fixed;
bottom: 20px;
margin-left: 10%;
}
.parent{
background-color: green;
position: absolute;
left: 20px;
right: 20px;
top: 30px;
bottom: 20px;
}
.child{
background-color: blue;
position: absolute;
left: 10px;
right: 10px;
top: 20px;
height:100px;
margin-top: -65px;
}
</style>
</head>
<body>
<div class="root">
<div class="parent">
<div class="child">
</div>
</div>
</div>
</body>
</html>
CSS 3层嵌套居中布局的更多相关文章
- 利用css如何让嵌套的div层不继承父div层的透明度？
http://zhidao.baidu.com/link?url=cvQhh0Q7_ah0qg9tc-2zP0cjB_PoIiIq6t6RFpp4aZPPNoVJUqyy7TT41TU5pWzRtRY ...
- CSS居中布局总结【转】
居中布局 <div class="parent"> <div class="child">demo</div> </d ...
- CSS居中布局总结
居中布局 <div class="parent"> <div class="child">demo</div> </d ...
- day07——css布局解决方案之居中布局
转行学开发,代码100天——2018-03-23 1.水平居中 使用inline-block + text-align方法 先将子框由块级元素改为行内块元素,再通过设置行内块元素居中以实现水平居中 ...
- 精通CSS+DIV网页样式与布局--初探CSS
CSS英文名Cascading Style Sheet,中文名字叫层叠样式表,是用于控制页面样式并允许将样式信息与网页内容分离的一种标记性语言,DIV+CSS是WEB设计标准,它是一种网页的布局方法. ...
- CSS控制表格嵌套
网页设计应用中,当我们不能完全放弃表格的使用时,为了达到预期的效果,不免要用到表格嵌套(特别是多层嵌套)方式来进行布局.可能很多同仁都遇到过这样的问题,为了达到显示效果要为每一个(每一层)的表格写不同 ...
- 87.CSS Flex 弹性盒模型布局教程（共用的css在48篇文章gird）
CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. flex布局就是给任何一个容器添加 dis ...
- 范仁义html+css课程---8、新元素布局
范仁义html+css课程---8.新元素布局 一.总结 一句话总结: 推荐用新标签(语义化的标签)来布局:header(头部),footer(尾部),aside(侧边栏),nav(导航),artic ...
- CSS 即将支持嵌套，SASS/LESS 等预处理器已无用武之地？
最近,有一则非常振奋人心的消息,CSS 即将原生支持嵌套 -- Agenda+ to publish FPWD of Nesting,表示 CSS 嵌套规范即将进入规范的 FWPD 阶段. 目前对应的 ...
随机推荐
- 查找最小的K个元素，使用最大堆。
查找最小的K个元素,使用最大堆,具体代码如下: #define _CRT_SECURE_NO_WARNINGS #include <iostream> using namespace st ...
- 未能找到类型或命名空间名称“XXXX”(是否缺少 using 指令或程序集引用?) 转
未能找到类型或命名空间名称“XXXX”(是否缺少 using 指令或程序集引用?) 项目中 App_Code 文件夹中的类的命名空间,在添加的页面的 using XXXX 时,提示 未能找到类 ...
- Java---软件试用次数（Properties类的简单使用）
编程练习(软件试用次数) 实现一个如下的软件小功能: 记录软件运行的次数并在每次运行时提示已经运行的次数.如果运行次数大于5次,软件不再运行并给出提示:试用次数已到,请注册! 本代码只简单的介绍了软件 ...
- Sqlserver2012 alwayson部署攻略
http://wenku.baidu.com/link?url=3Gl5nwxE6Rq4ZKGaKWpYZ1D4OdwVLcVeMoGTOmFSILDJzanPy9fwMPRwr7CRu4HhDzXr ...
- File System Minifilter Drivers（文件系统微型过滤驱动）入门
问题: 公司之前有一套文件过滤驱动,但是在实施过程中经常出现问题,现在交由我维护.于是在边看代码的过程中,一边查看官方资料,进行整理. 这套文件过滤驱动的目的只要是根据应用层下发的策略来控制对某些特定 ...
- [Design Pattern] Factory Pattern 简单案例
Factory Pattern , 即工厂模式,用于创建对象的场景,属于创建类的设计模式 . 下面是一个工厂模式案例. Shape 作为接口, Circle, Square, Rectangle 作为 ...
- Struts2学习笔记(一):Struts2开发环境的配置
一.Struts2应用所需的jar文件. 开发struts2应用需要依赖的jar文件在解压目录下的lib文件夹里面.开发struts2程序最少需要的jar文件为:struts2-core-2.xx.j ...
- ffmpeg错误隐藏框架分析
本文主要是分析ffmpeg的错误隐藏框架,故解码流程此处不会特地进行讨论,网上其他地方其实也有不少介绍相关流程的了,但发现基本没有介绍错误隐藏流程的,故本文希望能填补这个空白. 我们直接从decode ...
- 【java】Windows7 下设置环境变量
Windows 7下配置JDK环境变量參数设置: 1. 安装JDK,安装过程中能够自己定义安装文件夹等信息,比如我们选择安装文件夹为:D:\Program Files (x86)\Java\jd ...
- JDK动态代理实现简单AOP--转
JDK 动态代理是 java 反射的一个重要特性.它在某种方面为 java 提供了动态性的特性,给应用带来了无限的空间.大名鼎鼎的 Hessian . Spring AOP 基于动态代理实现.本文将简 ...