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

        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號
        主站蜘蛛池模板: 国产精品亚洲午夜一区二区三区| 日韩精品免费视频| 精品国产三级a∨在线| 国产精品免费观看视频| 国产精品成人免费福利| 亚洲av午夜福利精品一区人妖 | 亚洲精品和日本精品| 亚洲国产精品自在在线观看| 国产成人精品2021| 中文字幕精品久久久久人妻| 日本精品自产拍在线观看中文| 国产精品国产AV片国产| 欧美精品华人在线| 97久久精品午夜一区二区| 少妇精品久久久一区二区三区 | 无码国产精品一区二区免费3p| 久久精品国产第一区二区| 国产精品夜色视频一级区| 四虎成人www国产精品| 国产成人精品久久一区二区三区 | 四虎最新永久在线精品免费| 国产精品视频一区二区三区| 91麻豆精品视频| 8x福利精品第一导航| 国产精品久久午夜夜伦鲁鲁| 精品爆乳一区二区三区无码av| 欧美精品videosse精子| 精品久久久噜噜噜久久久 | 精品日韩亚洲AV无码一区二区三区| 亚洲av永久无码精品秋霞电影影院 | 久久精品国产亚洲AV不卡| 国产精品无码一区二区在线观一| 国产精品无码专区在线观看| 精品99久久aaa一级毛片| 久久久久九九精品影院| 四虎影视永久在线精品免费| 日本午夜精品理论片A级APP发布| 欧美激情视频精品一区二区| 欧美日韩国产中文精品字幕自在自线| 久久亚洲国产精品123区| 欧美精品整片300页|