成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

用css畫一個(gè)哆啦A夢(mèng)

zombieda / 2407人閱讀

摘要:用畫一個(gè)哆啦夢(mèng)雖然說沒用啥什么高級(jí)的技巧,但這讓我感受到了的樂趣好好學(xué)習(xí),天天向上

用css畫一個(gè)哆啦A夢(mèng)

?

雖然說沒用啥什么高級(jí)的技巧,但這讓我感受到了CSS的樂趣!

好好學(xué)習(xí),天天向上!

!DOCTYPE html html head title /title style type="text/css" body{ background-color: #66B3FF; height: 300px; overflow: hidden; #head{ width: 200px; height: 200px; position: absolute; left: 50%; top:31%; margin-left: -100px; margin-top: -100px; background-color: #0080FF; border-radius: 999px; border: 1px solid black; #face{ width: 179px; height: 150px; position: absolute; left: 43.4%; top:22%; background-color: white; border-radius: 999px; border: 1px solid black; #leftEye{ width: 50px; height: 60px; position: absolute; left:46.2%; top:18%; background-color: white; border-radius: 50%; border: 1px solid black; #rightEye{ width: 50px; height: 60px; position: absolute; left:50%; top:18%; background-color: white; border-radius: 50%; border: 1px solid black; #leftEye1{ width: 13px; height: 20px; position: absolute; left:48.5%; top:22.2%; background-color: black; border-radius: 50%; border: 1px solid black; #rightEye1{ width: 13px; height: 20px; position: absolute; left:50.5%; top:22.2%; background-color: black; border-radius: 50%; border: 1px solid black; #leftEye2{ width: 5px; height: 8px; position: absolute; left:48.9%; top:23%; background-color: white; border-radius: 50%; border: 1px solid black; #rightEye2{ width: 5px; height: 8px; position: absolute; left:50.7%; top:23%; background-color: white; border-radius: 50%; border: 1px solid black; #nose{ width: 25px; height: 25px; position: absolute; left:49%; top:25.5%; background-color: red; border-radius: 50%; border: 1px solid black; #nose1{ width: 6px; height: 6px; position: absolute; left:49.5%; top:26.5%; background-color: white; border-radius: 50%; #line{ width: 1px; height: 100px; position: absolute; left:49.9%; top:29.7%; background-color: white; border-left: 2px solid #000000; margin-left: 1px; #line1{ width: 60px; height: 1px; position: absolute; left:43.5%; top:28%; background-color: white; border-bottom: 1px solid #000000; margin-left: 1px; transform:rotate(12deg); #line2{ width: 60px; height: 1px; position: absolute; left:43.5%; top:32%; background-color: white; border-bottom: 1px solid #000000; margin-left: 1px; #line3{ width: 60px; height: 1px; position: absolute; left:43.5%; top:36%; background-color: white; border-bottom: 1px solid #000000; margin-left: 1px; transform:rotate(-12deg); #line4{ width: 60px; height: 1px; position: absolute; left:51.6%; top:28%; background-color: white; border-bottom: 1px solid #000000; margin-left: 1px; transform:rotate(-12deg); #line5{ width: 60px; height: 1px; position: absolute; left:51.6%; top:32%; background-color: white; border-bottom: 1px solid #000000; margin-left: 1px; #line6{ width: 60px; height: 1px; position: absolute; left:51.6%; top:36%; background-color: white; border-bottom: 1px solid #000000; margin-left: 1px; transform:rotate(12deg); #mouse{ width: 130px; height: 130px; position: absolute; left: 45.1%; top:30%; margin-left: -0.5px; background-color: white; border-radius: 0 0 65px 65px; border-bottom: 2px solid black; height: 65px; #food{ width: 80px; height: 62px; position: absolute; left:46.9%; top:39.2%; background-color:#FFAF60; border-radius: 50%; border: 1px solid black; #food1{ width: 78px; height: 57px; position: absolute; left:47%; top:38.9%; background-color: #FFAF60; border-radius: 50%; border: 1px solid black; #food2{ width: 73px; height: 52px; position: absolute; left:47.2%; top:39.1%; background-color:#844200; border-radius: 50%; #leftFist{ width: 50px; height: 50px; position: absolute; left:45%; top:40%; margin-left: -15px; margin-top: -15px; background-color: white; border-radius: 999px; border: 1px solid black; #rightFist{ width: 50px; height: 50px; position: absolute; left:53%; top:40%; margin-left: -15px; margin-top: -15px; background-color: white; border-radius: 999px; border: 1px solid black; #leftHand{ width: 50px; height: 70px; position: absolute; left:43.3%; top:44%; margin-left: -15px; margin-top: -15px; background-color: #0080FF; border-radius: 50%; transform:rotate(34deg); border: 1px solid black; #rightHand{ width: 50px; height: 70px; position: absolute; left:54.3%; top:44%; margin-left: -15px; margin-top: -15px; background-color: #0080FF; border-radius: 50%; transform:rotate(-34deg); border: 1px solid black; #tummy{ width: 110px; height: 110px; position: absolute; left: 53.1%; top:58.5%; margin-left: -100px; margin-top: -100px; background-color: white; border-radius: 999px; border: 1px solid black; #bodyy{ width: 135px; height: 115px; position: absolute; left: 44.7%; top:45%; background-color: #0080FF; #cover{ width: 400px; height: 400px; position: absolute; left: 35.3%; top:62.3%; background-color:#66B3FF; border-radius: 50%; #leftLeg{ width: 80px; height: 90px; position: absolute; left:42%; top:53.5%; margin-left: -15px; margin-top: -15px; background-color: white; border-radius: 50%; border: 1px solid black; #rightLeg{ width: 80px; height: 90px; position: absolute; left:53.7%; top:53.5%; margin-left: -15px; margin-top: -15px; background-color: white; border-radius: 50%; border: 1px solid black; #pocket{ width: 88px; height: 82px; position: absolute; left: 46.5%; top:51.6%; margin-left: -0.5px; background-color: white; border-radius: 0 0 41px 41px; border: 1px solid black; height: 41px; /style /head body div id="head" /div div id="face" /div div id="leftEye" /div div id="rightEye" /div div id="leftEye1" /div div id="rightEye1" /div div id="leftEye2" /div div id="rightEye2" /div div id="nose" /div div id="nose1" /div div id="bodyy" /div div id="tummy" /div div id="mouse" /div div id="line" /div div id="line1" /div div id="line2" /div div id="line3" /div div id="line4" /div div id="line5" /div div id="line6" /div div id="food" /div div id="food1" /div div id="food2" /div div id="leftHand" /div div id="rightHand" /div

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/877.html

相關(guān)文章

  • css一個(gè)哆啦A夢(mèng)

    摘要:用畫一個(gè)哆啦夢(mèng)雖然說沒用啥什么高級(jí)的技巧,但這讓我感受到了的樂趣好好學(xué)習(xí),天天向上用css畫一個(gè)哆啦A夢(mèng) ? 雖然說沒用啥什么高級(jí)的技巧,但這讓我感受到了CSS的樂趣! 好好學(xué)習(xí),天天向上! !DOCTYPE html html head title /title style type=text/css body{ background-c...

    xcc3641 評(píng)論0 收藏0
  • 前端小項(xiàng)目:使canvas繪哆啦A夢(mèng)

    最近在學(xué)canvas元素,標(biāo)簽只是圖形容器,必須使用js來繪制圖形。為了增強(qiáng)對(duì)canvas元素的理解,于是用canvas畫了一個(gè)哆啦A夢(mèng)來 要實(shí)現(xiàn)的效果圖 showImg(https://segmentfault.com/img/remote/1460000009319551?w=816&h=1106); 在線預(yù)覽 要想繪畫出這個(gè)哆啦a夢(mèng)首先要掌握以下一些函數(shù): arcTo() canvas繪制...

    lwx12525 評(píng)論0 收藏0
  • 《DOM編程藝術(shù)》中初步實(shí)現(xiàn)的圖片庫的總結(jié)(一)

    摘要:灰姑娘灰姑娘灰姑娘不足點(diǎn)擊事件綁定在代碼中,很笨重,下一篇中將做升級(jí)。 前言:在《DOM編程藝術(shù)》一書中,作者給出了一個(gè)實(shí)例:創(chuàng)建一個(gè)圖片庫,其實(shí)功能很簡單,就是點(diǎn)擊某個(gè)列表項(xiàng)時(shí),下方出現(xiàn)相應(yīng)的圖片以及圖片說明(圖片說明事先以title的形式寫在HTML中),雖然是一個(gè)簡單的例子,當(dāng)時(shí)作者在書中循序漸進(jìn),不斷的改善圖片庫中間引入各種知識(shí)點(diǎn),真的是一本好書,在此對(duì)這個(gè)實(shí)例進(jìn)行一些總結(jié)。 ...

    Yi_Zhi_Yu 評(píng)論0 收藏0
  • Material-UI menuItem和NavLink組合使時(shí)的樣式控制

    摘要:最近在使用做左側(cè)導(dǎo)航的時(shí)候遇到了一點(diǎn)難纏的小問題,由于傳統(tǒng)中標(biāo)簽包裹子元素組成鏈接的思維習(xí)慣,加上標(biāo)簽不能包裹子元素,導(dǎo)航部分一開始采用包裹的結(jié)構(gòu)看起來不錯(cuò),路由跳轉(zhuǎn)正常,然而由于組件全都是行內(nèi)樣式,寫在里的沒有辦法覆蓋掉它,所以。 最近在使用material-ui做左側(cè)導(dǎo)航的時(shí)候遇到了一點(diǎn)難纏的小問題,由于傳統(tǒng)中a標(biāo)簽包裹子元素組成鏈接的思維習(xí)慣,加上MenuItem標(biāo)簽不能包裹子元...

    lx1036 評(píng)論0 收藏0
  • Material-UI menuItem和NavLink組合使時(shí)的樣式控制

    摘要:最近在使用做左側(cè)導(dǎo)航的時(shí)候遇到了一點(diǎn)難纏的小問題,由于傳統(tǒng)中標(biāo)簽包裹子元素組成鏈接的思維習(xí)慣,加上標(biāo)簽不能包裹子元素,導(dǎo)航部分一開始采用包裹的結(jié)構(gòu)看起來不錯(cuò),路由跳轉(zhuǎn)正常,然而由于組件全都是行內(nèi)樣式,寫在里的沒有辦法覆蓋掉它,所以。 最近在使用material-ui做左側(cè)導(dǎo)航的時(shí)候遇到了一點(diǎn)難纏的小問題,由于傳統(tǒng)中a標(biāo)簽包裹子元素組成鏈接的思維習(xí)慣,加上MenuItem標(biāo)簽不能包裹子元...

    ISherry 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<