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 阶段. 目前对应的 ...
随机推荐
- （转）C++ 编程规范
转载地址:http://www.cnblogs.com/len3d/archive/2008/02/01/1061902.html C/C++编码规范 今天人们越来越明白软件设计更多地是一种工程,而不 ...
- Delphi 日志的方法 Log
写一个日志的函数,只需要传内容进去即可,自动记录时间的,日志保存在'c:\ErpRunLog.txt'下procedure writeWorkLog(sqlstr: string);var filev ...
- C#编译时出现“不安全代码只会在使用 /unsafe 编译的情况下出现”错误的解决
原因是:在编译的代码里面有不安全类型unsafe方法或类!解决方法:将项目属性页中生成下的“允许不安全代码”复选框打上对勾即可,方法如下:项目属性对话框->生成->允许不安全代码块 选中即 ...
- 用Visual Studio创建集成了gtest的命令行工程
gtest代码库中的sample代码 在gtest的代码库中,包含了10个sample的代码,覆盖了gtest的常见用法,sample的代码位于以下文件夹: gtest\samples 由于gtest ...
- 同时安装Xcode6和Xcode7导致出现N多UUID 模拟器解决办法
[摘要:1.完整退出Xcode 和 摹拟器 2.末端中输进以下两居指令 $ sudo killall -9 com.apple.CoreSimulator.CoreSimulatorService$ ...
- 【COM学习】之一、QueryInterface
开始先说一句,学习com之前要学好c++ 对象模型. QueryInterface的使用: QueryInterface是IUnknown的一个成员函数,客户可以通过此函数来查询某个组件是否支持某个特 ...
- android的intent打开系统程序
打开设置主界面 Intent intent = new Intent(Android.provider.Settings.ACTION_SETTINGS); //系统设置 startActivityF ...
- Java 编程的动态性，第 8 部分: 用代码生成取代反射--转载
既然您已经看到了如何使用 Javassist 和 BCEL 框架来进行 classworking (请参阅 本系列以前的一组文章), 我将展示一个实际的 classworking 应用程序.这个应用程 ...
- 2015 UESTC Winter Training #4【Regionals 2008 :: Asia - Tehran】
2015 UESTC Winter Training #4 Regionals 2008 :: Asia - Tehran 比赛开始时电脑死活也连不上WIFI,导致花了近1个小时才解决_(:зゝ∠)_ ...
- mysql的limit性能，数据库索引问题，dblog问题
mysql的limit性能,数据库索引问题,dblog问题,redis学习 继续学习. dblog实际上是把日志记录在另一个数据库里面. 问题1: 一张表定义了5个索引,但是sql语句中用到了3个有索 ...