真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

css如何做個(gè)紅色的心

本文將為大家詳細(xì)介紹“css如何做個(gè)紅色的心”,內(nèi)容步驟清晰詳細(xì),細(xì)節(jié)處理妥當(dāng),而小編每天都會(huì)更新不同的知識(shí)點(diǎn),希望這篇“css如何做個(gè)紅色的心”能夠給你意想不到的收獲,請(qǐng)大家跟著小編的思路慢慢深入,具體內(nèi)容如下,一起去收獲新知識(shí)吧。

成都創(chuàng)新互聯(lián)公司是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司,自成立以來(lái)公司不斷探索創(chuàng)新,始終堅(jiān)持為客戶(hù)提供滿(mǎn)意周到的服務(wù),在本地打下了良好的口碑,在過(guò)去的10年時(shí)間我們累計(jì)服務(wù)了上千家以及全國(guó)政企客戶(hù),如柔性防護(hù)網(wǎng)等企業(yè)單位,完善的項(xiàng)目管理流程,嚴(yán)格把控項(xiàng)目進(jìn)度與質(zhì)量監(jiān)控加上過(guò)硬的技術(shù)實(shí)力獲得客戶(hù)的一致表?yè)P(yáng)。

css是什么意思

css是一種用來(lái)表現(xiàn)HTML或XML等文件樣式的計(jì)算機(jī)語(yǔ)言,主要是用來(lái)設(shè)計(jì)網(wǎng)頁(yè)的樣式,使網(wǎng)頁(yè)更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語(yǔ)言,并且css樣式可以直接存儲(chǔ)于HTML網(wǎng)頁(yè)或者單獨(dú)的樣式單文件中,而樣式規(guī)則的優(yōu)先級(jí)由css根據(jù)這個(gè)層次結(jié)構(gòu)決定,從而實(shí)現(xiàn)級(jí)聯(lián)效果,發(fā)展至今,css不僅能裝飾網(wǎng)頁(yè),也可以配合各種腳本對(duì)于網(wǎng)頁(yè)進(jìn)行格式化。

css做紅色的心的方法:首先創(chuàng)建一個(gè)HTML示例文件;然后定義一個(gè)div,并通過(guò)css屬性畫(huà)出一個(gè)圓形;接著做出一個(gè)正方形;最后通過(guò)css transform中的rotate屬性實(shí)現(xiàn)愛(ài)心樣式即可。

用css做一個(gè)愛(ài)心

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

  前期預(yù)備知識(shí):

  1. 明白正方形的畫(huà)法。

  2. 明白圓形的畫(huà)法。

  3. 明白什么是定位。

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

  話(huà)不多說(shuō),先教大家怎么用css畫(huà)一個(gè)圓形。

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

由于我們的愛(ài)心是由兩個(gè)圓和一個(gè)正方形組成的,所以我們還需要再來(lái)一個(gè)圓形。

.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視頻教程》】

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

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

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

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

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

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

css如何做個(gè)紅色的心

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



    
        
        
        
    
    
        
            
            
            
             
*{
    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;
}

如果你能讀到這里,小編希望你對(duì)“css如何做個(gè)紅色的心”這一關(guān)鍵問(wèn)題有了從實(shí)踐層面最深刻的體會(huì),具體使用情況還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì),如果想閱讀更多相關(guān)內(nèi)容的文章,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!


文章標(biāo)題:css如何做個(gè)紅色的心
瀏覽路徑:http://weahome.cn/article/gjsdcd.html

其他資訊

在線(xiàn)咨詢(xún)

微信咨詢(xún)

電話(huà)咨詢(xún)

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部