站長資訊網
        最全最豐富的資訊網站

        css怎么做個紅色的心

        css做紅色的心的方法:首先創建一個HTML示例文件;然后定義一個div,并通過css屬性畫出一個圓形;接著做出一個正方形;最后通過css transform中的rotate屬性實現愛心樣式即可。

        css怎么做個紅色的心

        本教程操作環境:windows7系統、HTML5&&CSS3版、Dell G3電腦。

        用css做一個愛心

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

          前期預備知識:

        1.   明白正方形的畫法。
        2. 明白圓形的畫法。
        3. 明白什么是定位。
        4. 明白怎么旋轉。

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

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

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

        .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; }

        【推薦:《css視頻教程》】  

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

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

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

          我們由于需要把三個p都旋轉角度,所以我們把這三個p放在一個p里面。具體代碼如下:

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

          做到現在,我們的愛心就已經做出來咯。效果圖如下:

        css怎么做個紅色的心

          全部代碼如下(包含HTML代碼和CSS代碼)

        <!DOCTYPE html> <html>     <head>         <meta charset="utf-8" />         <link href="css/square.css" rel="stylesheet" type="text/css">         <title></title>     </head>     <body>         <div class="main">             <div class="disc1"></div>             <div class="disc2"></div>             <div class="square"></div>         </div>     </body> </html>
        *{     margin: 0px;     padding: 0px; } .main{     transform: rotate(45deg);     margin: 300px; } .disc1{     width: 100px;     height: 100px;     border:1px solid red;     background-color: red;     margin:300px 0px 0px 300px;     border-radius:100%;     float:left; } .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; } .square{     width: 100px;     height: 100px;     border:1px solid red;     background-color: red;     margin: 300px 0px 0px 0px;     float: left;     position: relative;     right: 152px; }

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 欧美精品在线免费| 久久久久人妻一区精品| 国产精品日韩欧美在线第3页| 无码精品日韩中文字幕| 精品精品国产欧美在线小说区| 97久久久精品综合88久久| 亚洲精品乱码久久久久久自慰| 九九线精品视频在线观看| 午夜精品免费在线观看| 成人精品一区二区三区中文字幕| 亚洲精品国产日韩无码AV永久免费网 | 久久精品国产亚洲精品2020 | 亚洲国产精品无码久久一线| 久久夜色撩人精品国产小说| 国产精品自在在线午夜福利| 国产成人精品久久亚洲| 天天爽夜夜爽精品视频app| 国内精品手机在线观看视频| 国产成人精品免费视频大全麻豆| 国语自产少妇精品视频| 精品一区二区三区自拍图片区 | 国产精品热久久毛片| 亚洲嫩草影院久久精品| 免费精品99久久国产综合精品| 91精品国产福利尤物| 国产精品人人爽人人做我的可爱 | 国产欧美在线观看精品一区二区 | 欧美精品区一级片免费播放| 国自产精品手机在线观看视频| 国产精品免费久久| 国产精品亚洲二区在线观看| 国产精品自在拍一区二区不卡| 国产内地精品毛片视频| 精品视频一区二区三区四区五区| 国产三级精品久久| 久久国产精品免费| 欧美精品91欧美日韩操| 真实国产乱子伦精品一区二区三区| 亚洲精品尤物yw在线影院| 野狼第一精品社区| 精品人妻码一区二区三区|