使用纯css代码实现div的“回”字型“叠放”效果
正如大家所知道的那样，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的“回”字型“叠放”效果的更多相关文章
- 纯CSS制作加<div>制作动画版哆啦A梦
纯CSS代码加上<div>制作动画版哆啦A梦(机器猫) 哆啦A梦(机器猫)我们大家一定都很熟悉,今天给大家演示怎么用纯CSS代码,来做一个动画版的哆啦A梦. 效果图: ###下面代码同学可 ...
- [刘阳Java]_纯CSS代码实现内容过滤效果
继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图 实现思路 ...
- 【CSS3】纯CSS代码实现模拟时钟，+js对时功能。
使用CSS3纯代码来实现模拟时钟,及指针动画功能. 在这里主要使用到css3一些基本元素: border-radius:圆角边框,画圆形:表盘 Transform:变换,旋转,扭曲:刻度盘,指针形状 ...
- 纯css实现同一页面下选择之后更换内容效果
实现效果为如下:在同一页面下,当我选中输入手机号时,出现手机号输入框,当我选中输入验证码时,出现验证码输入框,当我选中设置密码时,出现密码框 在这里有一个小技巧,就是 1.对下面的输入框设置同样的样 ...
- 10分钟使用纯css实现完整的响应式导航菜单栏的效果
在开发hexo主题pixel的时候没有选择bootstrap和jquery实现响应式菜单,而是 使用了纯css实现响应式菜单,这个想法来自于You-Dont-Need-Javascript, 这个项目 ...
- 纯css代码写旋转动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 页面元素固定在页面底部的纯css代码（兼容IE6）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- div+css实现圆形div以及带箭头提示框效果
.img{ width:90px; height:90px; border-radius:45px; margin:0 40%; border:solid rgb(100,100,100) 1px;& ...
- 前端每日实战：126# 视频演示如何用纯 CSS 创作小球变矩形背景的按钮悬停效果
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/yxbEzJ 可交互视频 此视频是可 ...
随机推荐
- ThinkPad E431/E531 ubuntu 14.04 安装无线网卡驱动
ubuntu系统装好之后无限网卡驱动并不能用.须要自己下载无线网卡驱动.以下是最简单的方法: sudo apt-get install linux-headers-generic build-esse ...
- Cts分析框架(4)-添加任务
Debug watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaXRmb290YmFsbA==/font/5a6L5L2T/fontsize/400/fill/ ...
- CSS3 Media Queries 详细介绍与使用方法
Media Queries 就是要在支援CSS3 的浏览器中才能正常工作,IE8 以下不支持. 而Media Queries 的套用方法千变万化,要套用在什么样的装置中,都可以自己来定义. 到底什么是 ...
- 使用SoapUI 测试Web Service
原文:使用SoapUI 测试Web Service 如何测试写好的Webservice?你当然可以写代码来测试,但还是太麻烦,你得花时间去学习各语言的关于Webservice调用的相关API.这里推荐 ...
- UC编程：通过fwrite()和write()比较标准库函数和系统调用的速度
fwrte是C标准库中提供的函数,是对write函数的扩展与封装,write则是Unix系统提供的函数.按照常理来讲,系统调用肯定比使用库快的多,但是事实正好相反 Why?原因就在于缓冲的问题,fwi ...
- 【蜗牛—漫漫IT路之大学篇(九)
】
再来一篇叨叨的博客 近期,状态还是那个状态,人还是那个人. 前两天,感冒了,可能是宿舍阴面的事吧.然后,中午睡觉的时候穿着短袖披了一件外套,然后鼻子就不通气了.只是,前天晚上,我骑着崔国强的车子跑了不 ...
- 1951: [Sdoi2010]古文字猪
1951: [Sdoi2010]古代猪文 链接:Click Here~ 题目: 一道非常好的组合数学题.!!.题目非常长.只是就以下几段话实用. iPig认为仅仅要符合文献,每一种能整除N的k都是有可 ...
- .NET软件开发资源
.NET软件开发资源 最近建了一个.NET软件开发资源的360网盘共享群,把收集的一些.NET软件开发资源分享给大家,也欢迎大家把好的东东分享一下. 资源主要有:开发工具.控件资源.书籍教程.网页设计 ...
- python中staticmethod classmethod及普通函数的区别
staticmethod 基本上和一个全局函数差不多,只不过可以通过类或类的实例对象 (python里光说对象总是容易产生混淆, 因为什么都是对象,包括类,而实际上 类实例对象才是对应静态语言中所谓对 ...
- FormsAuthentication知多少
前述:对于FormsAuthentication相信大家都烂熟于胸了,这里只是做一下小结. 一.先看一下使用FormsAuthentication做登录认证的用法 用法一: FormsAuthenti ...