六環(huán)

magin寫法

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   #d1{
    width: 404px;
    height: 404px;
    border: 1px dashed black;
    margin: 0 auto;
   }
   #d2{
    width: 340px;
    height: 340px;
    border: 5px solid rgb(213,239,253);
    margin-left: 27px;
    margin-top: 27px;
   }
   #d3{
    width: 299px;
    height: 299px;
    background-color: rgb(255,159,221);
    border: 1px solid rgb(255,159,221);
    margin-left: 20px;
    margin-top: 20px;
   }
   #d4{
    width: 216px;
    height: 216px;
    border: 1px dotted white;
    margin-left: 41px;
    margin-top: 41px;
   }
   #d5{
    width: 208px;
    height: 208px;
    border: 1px dashed white;
    margin-left: 3px;
    margin-top: 3px;
   }
   #d6{
    width: 100px;
    height: 100px;
    background-color: rgb(134,255,82);
    border: 5px solid  rgb(251,255,67);
    margin-left: 49px;
    margin-top: 49px;
   }
  </style>
 </head>
 <body>
  <div id="d1">
   <div id="d2">
    <div id="d3">
     <div id="d4">
      <div id="d5">
       <div id="d6"></div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </body>
</html>

padding寫法

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
   #p1{
    width: 350px;
    border: 1px dashed black;
    padding: 27px;
   }
   #p2{
    border: 5px solid rgb(213,239,253);
    padding: 20px;
   }
   #p3{
    background-color: rgb(255,159,221);
    padding: 41px;
   }
   #p4{
    border: 1px dotted white;
    padding: 3px;
   }
   #p5{
    border: 1px dashed white;
    padding: 49px;
   }
   #p6{
    height: 100px;
    background-color: rgb(134,255,82);
    border: 5px solid  rgb(251,255,67);
   }
  </style>
 </head>
 <body>
  <div id="p1">
   <div id="p2">
    <div id="p3">
     <div id="p4">
      <div id="p5">
       <div id="p6"></div>
      </div>
     </div>
    </div>
   </div>
  </div>
 </body>
</html>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容