摘要：HTML的標(biāo)簽都比較簡單，入門非常的迅速，但是CSS是一個需要我們深度挖掘的東西，里面的很多樣式屬性掌握幾個常用的便可以實現(xiàn)很好看的效果，下面我便教大家如何用CSS做一個愛心。

　　前期預(yù)備知識：

  1. 　　明白正方形的畫法。

  2.       明白圓形的畫法。

  3.       明白什么是定位。

  4.       明白怎么旋轉(zhuǎn)。

　　話不多說，先教大家怎么用css畫一個圓形。

萬碼學(xué)堂,電腦培訓(xùn),計算機培訓(xùn),Java培訓(xùn),JavaEE開發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

.disc1{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin:300px 0px 0px 300px;
    border-radius:100%;
    float:left;
}

萬碼學(xué)堂,電腦培訓(xùn),計算機培訓(xùn),Java培訓(xùn),JavaEE開發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

　　由于我們的愛心是由兩個圓和一個正方形組成的，所以我們還需要再來一個圓形。

萬碼學(xué)堂,電腦培訓(xùn),計算機培訓(xùn),Java培訓(xùn),JavaEE開發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

.disc2{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin:250px 0px 0px 0px;
    border-radius:100%;
    float:left;
    position: relative;
    right: 50px;
}

萬碼學(xué)堂,電腦培訓(xùn),計算機培訓(xùn),Java培訓(xùn),JavaEE開發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

 

　　第三步我們就需要做一個正方形了。

萬碼學(xué)堂,電腦培訓(xùn),計算機培訓(xùn),Java培訓(xùn),JavaEE開發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

.square{
    width: 100px;
    height: 100px;
    border:1px solid red;
    background-color: red;
    margin: 300px 0px 0px 0px;
    float: left;
    position: relative;
    right: 152px;
}

萬碼學(xué)堂,電腦培訓(xùn),計算機培訓(xùn),Java培訓(xùn),JavaEE開發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

　　做完這些的效果已經(jīng)基本上出來了，但是我們還需要調(diào)整一下愛心的角度，這時就需要用到我們css樣式中的transform中的rotate屬性了。

　　我們由于需要把三個div都旋轉(zhuǎn)角度，所以我們把這三個div放在一個div里面。具體代碼如下：

.main{
    transform: rotate(45deg);
    margin: 300px;
}

　　做到現(xiàn)在，我們的愛心就已經(jīng)做出來咯。效果圖如下：

萬碼學(xué)堂,電腦培訓(xùn),計算機培訓(xùn),Java培訓(xùn),JavaEE開發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

　　全部代碼如下（包含HTML代碼和CSS代碼）

萬碼學(xué)堂,電腦培訓(xùn),計算機培訓(xùn),Java培訓(xùn),JavaEE開發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

 1 <!DOCTYPE html> 2 <html> 3     <head> 4         <meta charset="utf-8" /> 5         <link href="css/square.css" rel="stylesheet" type="text/css"> 6         <title></title> 7     </head> 8     <body> 9         <div class="main">10             <div class="disc1"></div>11             <div class="disc2"></div>12             <div class="square"></div>13         </div>14     </body>15 </html>

萬碼學(xué)堂,電腦培訓(xùn),計算機培訓(xùn),Java培訓(xùn),JavaEE開發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

萬碼學(xué)堂,電腦培訓(xùn),計算機培訓(xùn),Java培訓(xùn),JavaEE開發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

 1 *{ 2     margin: 0px; 3     padding: 0px; 4 } 5 .main{ 6     transform: rotate(45deg); 7     margin: 300px; 8 } 9 .disc1{10     width: 100px;11     height: 100px;12     border:1px solid red;13     background-color: red;14     margin:300px 0px 0px 300px;15     border-radius:100%;16     float:left;17 }18 .disc2{19     width: 100px;20     height: 100px;21     border:1px solid red;22     background-color: red;23     margin:250px 0px 0px 0px;24     border-radius:100%;25     float:left;26     position: relative;27     right: 50px;28 }29 .square{30     width: 100px;31     height: 100px;32     border:1px solid red;33     background-color: red;34     margin: 300px 0px 0px 0px;35     float: left;36     position: relative;37     right: 152px;38 }

萬碼學(xué)堂,電腦培訓(xùn),計算機培訓(xùn),Java培訓(xùn),JavaEE開發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

　　歡迎大家在評論區(qū)留言。

http://www.cnblogs.com/liu-en-ci/p/6721963.html