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 阶段. 目前对应的 ...
随机推荐
- MapReduce的reduce函数里的key用的是同一个引用
最近写MapReduce程序,出现了这么一个问题,程序代码如下: package demo; import java.io.IOException; import java.util.HashMap; ...
- JavaScript String 对象实例深入研究
本文主要介绍并分析JavaScript中String对象的具体用法,以及和String对象相关的方法,方便开发者在JavaScript开发中更好地处理字符串. 1. 介绍 String 对象,对字符串 ...
- SSLStrip 的未来 —— HTTPS 前端劫持
前言 在之前介绍的流量劫持文章里,曾提到一种『HTTPS 向下降级』的方案 —— 将页面中的 HTTPS 超链接全都替换成 HTTP 版本,让用户始终以明文的形式进行通信. 看到这,也许大家都会想到一 ...
- weblogic Connection has already been closed解决方法
今天正式环境下的有一个功能报错,看了下weblogic日志,报连接已经关闭. com.ibatis.common.jdbc.exception.NestedSQLException: --- The ...
- Unity3D基础学习 NGUI自带Tooltip制作提示文字
简介 NGUI自带的的例子Character中含有一个Tooltip,可以鼠标悬浮到某对象时显示提示文字.非常方便. 创建UITooltip 首先你需要在场景NGUi相机下建立一个空物体我把它命名为T ...
- 安装apache重启的时候，报错端口被占用，错误1
在cmd中执行以下命令来重新分配. netsh winsock reset. 还不行的话可以重启电脑,再不行就算apache配置文件错误.
- 支持向量机通俗导论（理解SVM的三层境地）
支持向量机通俗导论(理解SVM的三层境地) 作者:July :致谢:pluskid.白石.JerryLead.出处:结构之法算法之道blog. 前言 动笔写这个支持向量机(support vector ...
- gulp入门学习
一.gulp简介 gulp是一个自动化构建工具.在开发过工程中,能够使用gulp对项目进行自动构建,大大提高工作效率. 二.安装gulp 在安装gulp之前先要确认已经正确安装了node.js,然后在 ...
- linux批量执行工具omnitty使用方法
一.omnitty概述 在生产环境中,可能会有多台linux主机.运维人员可能会对多台主机进行同样的操作,例:同时在多台主机上添加一个user或查看所有主机的硬件信息,如果没有批量操作工具,设备少于2 ...
- linux groupmems命令
Because users group membership is defined in two different locations, it can be difficult to find ou ...