首页 > HTML/CSS

CSS如何实现网易的盖楼效果

发表于2015-07-14 14:39:44| --次阅读| 来源webkfa| 作者html,css

摘要:CSS如何实现网易的盖楼效果:建议:尽可能的手写代码,可以有效的提高学习效率和深度。在很多论坛性质或者回复功能的网站都有盖楼效果,就是回复与回复之间能够叠加,这个感觉比较人性化,没有体验过这样的效果的朋友可以去网易找一个比较火热的帖子看一下它的回复就明白了。下面就介绍一下如何实现此种功能,代码实例如...

CSS如何实现网易的盖楼效果:
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
在很多论坛性质或者回复功能的网站都有盖楼效果,就是回复与回复之间能够叠加,这个感觉比较人性化,没有体验过这样的效果的朋友可以去网易找一个比较火热的帖子看一下它的回复就明白了。下面就介绍一下如何实现此种功能,代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.51texiao.cn/" />
<title>蚂蚁部落</title>
<style type="text/css">
* 
{
  margin:0px;
  padding:0px;
}
#wrap{width:500px;}
.box 
{
  margin-bottom:12px;
  overflow:hidden;
  padding:3px;
  background:#FFFFEE;
  border:solid 1px #999;
}
</style>
</head>
<body>
<div id="wrap">
  <div class="box">
    <div class="box">
      <div class="box">
        <div class="box">
          <div class="box">
            <div class="box">
              <div class="box">
                <div class="box">
                  <div class="box">我是楼主</div>
                  我是二楼 </div>
                我是三楼 </div>
              我是四楼 </div>
            我是五楼 </div>
          我是六楼 </div>
        我是七楼 </div>
      我是八楼 </div>
    我是酒楼 </div>
</div>
</body>
</html>

相关文章

猜你喜欢

学到老在线代码浏览器 关闭浏览
友情链接: hao123 360导航 搜狗网址导航 114啦网址导航 博客大全
Copyright © 1999-2014, WEBKFA.COM, All Rights Reserved  京ICP备14034497号-1