正如大家所知道的那样，div是一个块级元素，也是网页编写过程中使用频率最高的一个元素，通过不同的样式控制可以实现一些最常见的页面效果，当然也可以实现一些比较复杂的页面效果，这里就展示一个本人面试过程中遇到的一个问题，如何使用最简单css样式通过div实现“回”字型图样？父类div必须设置的属性是什么？当然实现方法很多很多，下面就和大家分享一下我自己的方法（兼容Trident,Gecko,Presto,WebKit等内核浏览器），先看效果：

再看详细的代码：

<html>
<head>
<title>Test</title>
<style type="text/css">
#bigcontent {
    width: 400px;
    height: 400px;
    margin: 50px 0 0 50px;
    position: absolute;
    background: yellow;
    text-align: center;//这个是父类元素必须设置的样式，目的是让所有子元素都水平居中摆放
}

#precontent {
    width: 350px;
    height: 350px;
    margin-top: 30px;
    display: inline-block;//这个是子元素必须设置的样式，否则其他浏览器不兼容
    background: blue;
}

#middlecontent {
    width: 300px;
    height: 300px;
    background: red;
    margin-top: 25px;
    display: inline-block;
}
#premidcontent{
    width: 250px;
    height: 250px;
    display: inline-block;
    background: lime;
    margin-top: 25px;
}
#smallcontent {
    width: 200px;
    height: 200px;
    display: inline-block;
    background: green;
    margin-top: 25px;
}
#finalcontent{
   width: 150px;
   height: 150px;
   display: inline-block;
   background:orange;
   margin-top: 25px;
   text-align: center;
}
</style>
</head>
<body>
    <div id="bigcontent">
        <div id="precontent">
            <div id="middlecontent">
                <div id="premidcontent">
                    <div id="smallcontent">
                       <div id="finalcontent">
                       </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

使用纯css代码实现div的“回”字型“叠放”效果的更多相关文章

  1. 纯CSS制作加<div>制作动画版哆啦A梦

    纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...

  2. [刘阳Java]_纯CSS代码实现内容过滤效果

    继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图 实现思路 ...

  3. 【CSS3】纯CSS代码实现模拟时钟，+js对时功能。

    使用CSS3纯代码来实现模拟时钟,及指针动画功能. 在这里主要使用到css3一些基本元素: border-radius:圆角边框,画圆形:表盘 Transform:变换,旋转,扭曲:刻度盘,指针形状 ...

  4. 纯css实现同一页面下选择之后更换内容效果

    实现效果为如下:在同一页面下,当我选中输入手机号时,出现手机号输入框,当我选中输入验证码时,出现验证码输入框,当我选中设置密码时,出现密码框 在这里有一个小技巧,就是  1.对下面的输入框设置同样的样 ...

  5. 10分钟使用纯css实现完整的响应式导航菜单栏的效果

    在开发hexo主题pixel的时候没有选择bootstrap和jquery实现响应式菜单,而是 使用了纯css实现响应式菜单,这个想法来自于You-Dont-Need-Javascript, 这个项目 ...

  6. 纯css代码写旋转动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 页面元素固定在页面底部的纯css代码（兼容IE6）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. div+css实现圆形div以及带箭头提示框效果

    .img{ width:90px; height:90px; border-radius:45px; margin:0 40%; border:solid rgb(100,100,100) 1px;& ...

  9. 前端每日实战：126# 视频演示如何用纯 CSS 创作小球变矩形背景的按钮悬停效果

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/yxbEzJ 可交互视频 此视频是可 ...

随机推荐

  1. windows tcp端口映射或端口转发

    windows tcp端口映射或端口转发 windows内部有一个叫netsh的玩意,可以把tcp端口进行映射或转发,可惜不支持udp.举个例子:一台windows有一个80端口,对外可以访问.另有一 ...

  2. JS模板引擎：tppl

    全球最快的JS模板引擎:tppl 废话不多说,先上测试: 亲测请访问:[在线测试地址]单次结果不一定准确,请多测几次. tppl 的编译渲染速度是著名的 jQuery 作者 John Resig 开发 ...

  3. jquery+ligerform三级联动下拉框

    如下为ligerform里的三级联动下拉框: var formData=[ {display:,width:,space:,type:"select",group:"区域 ...

  4. Spring Resource之应用上下文和资源路径

    1.构建应用上下文 一个应用上下文构造器一般需要一个构成Bean定义的上下为你xml字符串路径或者一个字符串数组路径作为参数. 当这样的路径没有前缀的时候,那么从哪个路径构建的资源类型,用于加载bea ...

  5. leetcode第16题--3Sum Closest

    Problem:Given an array S of n integers, find three integers in S such that the sum is closest to a g ...

  6. 你不知道的 页面编码，浏览器选择编码，get，post各种乱码由来

    原文:你不知道的 页面编码,浏览器选择编码,get,post各种乱码由来 asp.net页面编码和浏览器的选择编码 每个asp.net的朋友都知道,在新版本的visual studio,在没有任何设置 ...

  7. js获取当前指定的前几天的日期（如当前时间的前七天的日期）

    这里就不多说了,直接贴上代码: <html> <head> <meta http-equiv="Content-Type" content=" ...

  8. dos下的cd指令

    进入同根目录下的目录: 1.进入同根目录的下一级目录:cd 目录名 2.返回同根目录的上一级目录:cd .. 3.返回目录的根目录:cd \ 进入不同根目录下的目录: 1.进入另外一个根目录(的默认目 ...

  9. QTP使用技巧

    1QTP基本功能的使用 QTP的基本功能包括两大部分:一部分是提供给初级用户使用的关键字视图:另一部分是提供给熟悉VBScript脚本编写的自动化测试工程师使用的专家视图.但是,并没有严格的区分,在实 ...

  10. TodoList开发笔记 – PartⅠ

    做了一年多的桌面软件,最近开始转向Web方面的开发,既然比较熟悉Net那么首当其冲就是学习ASP.Net,以及HTML.CSS.Javascript. 为了检验这个把星期来的学习成果,着手做了一个To ...