div 叠在一起给上不同的颜色

最新推荐文章于 2023-10-26 11:30:58 发布

weixin_30906671

最新推荐文章于 2023-10-26 11:30:58 发布

阅读量265

点赞数

原文链接：http://www.cnblogs.com/bingg/p/5406454.html

版权

<html>
<head>
 <style>
 .one{
  width:300px;
  height:300px;
  background:red;
  margin:0 auto;
  margin-top:200px;
 }
 .two{
 width:275px;
 height:275px;
 background:black;

 }
 .three{
 width:250px;
 height:250px;
 background:yellow;
 
 }
 .four{
 width:225px;
 height:225px;
 background:green;
 }
 .five{
 width:200px;
 height:200px;
 background:blue;
 }
 .six{
 width:175px;
 height:175px;
 background:#333333;
 }
  .seven{
 width:150px;
 height:150px;
 background:#00FF00;
 }
  .eight{
 width:125px;
 height:125px;
 background:#1E90FF;
 }
  .nine{
 width:100px;
 height:100px;
 background:#48D1CC;
 }
  .ten{
 width:75px;
 height:75px;
 background:#8B0000;
 }
  .Q{
 width:50px;
 height:50px;
 background:#FF34B3;
 }
  .W{
 width:25px;
 height:25px;
 background:#CD00CD;
 }
 </style>
</head>
<body>
  <div class="one">
   <div class="two">
    <div class="three">
     <div class="four">
      <div class="five">
       <div class="six">
        <div class="seven">
         <div class="eight">
          <div class="nine">
           <div class="ten">
            <div class="Q">
              <div class="W"></div>
            </div>
          </div>
          </div>
         </div>
        </div>
       </div>
      </div>
     </div> 
    </div>
   </div>
  </div>
</body>
</html>

步骤挺简单  效果挺好看的