正如大家所知道的那样，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. 探讨javascript面向对象编程

    (个人blog迁移文章.) 前言: 下面将探讨javascript面向对象编程的知识. 请不要刻意把javascript想成面向对象编程是理所当然的. javascript里面,对象思想不可少,但是不 ...

  2. Erlang常用代码段

    十六进制字符串转为二进制 hex_to_bin(Bin) -> hex2bin(Bin). hex2bin(Bin) when is_binary(Bin) -> hex2bin(bina ...

  3. 1.1 什么是LinQ

    如今,软件应用环境越来越多样化,软件需要处理的数据量也日渐庞大,数据之间的关系日渐复杂.从而带动了存储技术的不断发展,越来越多的数据存储格式被应用到各种软件中. 通常,针对数据的查询是用简单的字符串文 ...

  4. Play framework 2.0

    Play framework 2.0北京时间3月14日消息,根据Play framework官方网站消息,目前Play framework 2.0正式版已经发布.新版本的Play framework进 ...

  5. Javascript多线程引擎(四)

    Javascript多线程引擎(四)--之C语言单继承 因为使用C语言做为开发语言, 而C语言在类的支持方面几乎为零, 而Javascript语言的Object类型是一个非常明显的类支持对象,所以这里 ...

  6. WCF的简单

    WCF的简单 WCF的学习之旅 一.WCF的简单介绍  Windows Communication Foundation(WCF)是由微软发展的一组数据通信的应用程序开发接口,可以翻译为Windows ...

  7. Java编程思想笔记(第二章)

    第二章  一切都是对象 尽管Java是基于C++的,但相比之下,Java是一种更纯粹的面向对象程序设计语言. c++和Java都是杂合型语言(hybird language) 用引用(referenc ...

  8. 在winform中怎样实现好看的treeview样式

    这是在网上截取的一张图,就是想做成这样的效果,不能用devExperss控件,主要是不知道他的那个“组织机构列表“用的是不是panel,怎样弄的样式

  9. JobTracker等相关功能模块初始化

    [Hadoop代码笔记]Hadoop作业提交之JobTracker等相关功能模块初始化 一.概要描述 本文重点描述在JobTracker一端接收作业.调度作业等几个模块的初始化工作.想过模块的介绍会在 ...

  10. C/C++基础知识总结——C++简单程序设计

    1. sizeof 1.1 sizeof(类型名) 1.2 sizeof 表达式 1.3 返回所占字节大小 2. I/O流的输出格式 2.1 常用I/O流库操纵符 dec         十进制 he ...