How CSS achieves NetEase's building effect_html/css

How CSS achieves NetEase's building effect_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:41:18

Original

1259 people have browsed it

How to achieve NetEase’s building effect with CSS:
Suggestion: Handwriting code as much as possible can effectively improve learning efficiency and depth.
Many forum-type or reply-function websites have a building effect, that is, replies can be superimposed on each other. This feels more humane. Friends who have not experienced such an effect can go to NetEase to find a more popular post. Just look at its reply and you will understand. The following is an introduction to how to implement this function. The code example is as follows:

<!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>

Copy after login

The original address is: http://www.51texiao.cn/div_cssjiaocheng/2015/0501/512 .html