class 1 模板&盒子模型

基礎模板

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>隨意</title>

</head>

<body> 


</body>

</html>


盒子模型

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>隨意</title>

<style>

   body{

    margin:10px;

    padding:10px;

       }

   .uni{(uni—相同部分 以便減少代碼)

    width:200px;

    height:200px;

    float:left;(浮動:left左/right右)

       }

   #first{(#是id)

     width:500px;

     height:500px;

     background:white;

     margin:0 auto;

         }

   #second{

      background:red;

      margin-right:10px;

      margin-bottom:10px;

          }

   #third{

     background:green;

     margin-bottom:10px;

         }

   #fourth{

     background:black;

     margin-right:10px;

          } 

   #fifth{

     background:blue;

         } 

</style>    

</head>

<body> 

<div id="first">

  <div id="second" class="uni">(class定義爲任意字母)

  </div>

  <div id="third" class="uni">

  </div>

  <div id="fourth" class="uni">

  </div>

  <div id="fifth" class="uni">

  </div>

</div>

</body>

</html>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章