html和css制作QQ企鵝教程

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 18:49:58

html和css制作QQ企鵝教程

html和css制作QQ企鵝教程:我們知道CSS為HTML標(biāo)記語言提供了一種樣式描述，定義了其中元素的顯示方式。CSS在Web設(shè)計領(lǐng)域是一個突破。利用它可以實現(xiàn)修改一個小的樣式更新與之相關(guān)的所有頁面元素。大家在學(xué)習(xí)前端編程的時候肯定會用到HTML和css，那么這篇文章我們將教大家兩種不同的方式

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀html和css制作QQ企鵝教程:我們知道CSS為HTML標(biāo)記語言提供了一種樣式描述，定義了其中元素的顯示方式。CSS在Web設(shè)計領(lǐng)域是一個突破。利用它可以實現(xiàn)修改一個小的樣式更新與之相關(guān)的所有頁面元素。大家在學(xué)習(xí)前端編程的時候肯定會用到HTML和css，那么這篇文章我們將教大家兩種不同的方式

我們知道CSS為HTML標(biāo)記語言提供了一種樣式描述，定義了其中元素的顯示方式。CSS在Web設(shè)計領(lǐng)域是一個突破。利用它可以實現(xiàn)修改一個小的樣式更新與之相關(guān)的所有頁面元素。大家在學(xué)習(xí)前端編程的時候肯定會用到HTML和css，那么這篇文章我們將教大家兩種不同的方式制作QQ企鵝。

html制作QQ企鵝代碼：

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>繪制騰訊QQ</title><link type="text/css" rel="stylesheet" href="qq.css" ></head><body>
 <img src="meigui.png" id="flower" width="10%"></img>
 <div id="qq">
 <div class="head">
 <div class="leftEye"></div>
 <div class="leftEyes"></div>
 <div class="eyeCenter"></div>
 <div class="rightEye"></div>
 <div class="rightEyes"></div>
 <div class="rightEyess"></div>
 <div class="mouthTop">
 <div class="mouthCenter"></div>
 <div class="mouthBottom"></div>
 </div>
 <div class="mandible"></div>
 </div>
 <div class="weibo"></div>
 <div class="weiboleft"></div>
 <div class="weiRightGang"></div>
 <div class="weiLeftGang"></div>
 
 <div class="dudu"></div>
 <div class="waidudu"></div>
 
 <div class="leftarm">
 <div id="top"></div>
 </div>
 <div id="leftArmBottom"></div>
 </div>
 <div class="rightArm"></div>
 
 
 <div class="leftFoot"></div>
 <div class="rightFoot"></div>
 
 <div class="tailLeft"></div>
 <div class="tailRight"></div></body></html>

css制作QQ企鵝代碼：

*{margin:0;padding:0;}#qq{
 position:relative;
 margin-left:40%;
 margin-top:5%; }.head{
 position:absolute;
 width:270px;
 height:250px;
 overflow:hidden;
 background-color:#000;
 border:1px #000 solid;
 border-top-left-radius:50% 50%;
 border-top-right-radius:50% 50%;
 border-bottom-left-radius:50% 50%;
 border-bottom-right-radius:50% 50%;
 border-bottom-color:#FFF;
 display:block;}.mandible{
 position:absolute;
 width:362px;
 height:300px;
 top:-110px;
 left:-46px;
 background-color:#000;
 border:1px #000 solid;
 border-radius:50% 50%;
 z-index:6;
 border-top-color:#FFF;
 border-left-color:#FFF;
 border-right-color:#FFF;}.leftEye{
 position:absolute;
 width:40px;
 height:70px;
 background-color:#FFF;
 left:80px;
 top:50px;
 border:1px #666 solid;
 border-radius:50% 50%;
 z-index:10;}.leftEyes{
 position:absolute;
 width:20px;
 height:25px;
 left:93px;
 top:70px;
 border:1px #666 solid;
 border-radius:50% 50%;
 z-index:11;
 background-color:#000;}.rightEye{
 position:absolute;
 width:40px;
 height:70px;
 left:140px;
 top:50px;
 border:1px #666 solid;
 border-radius:50% 50%;
 z-index:10;
 background-color:#FFF;}.rightEyes{
 position:absolute;
 width:20px;
 height:25px;
 left:148px;
 top:70px;
 border:1px #666 solid;
 border-radius:50% 50%;
 z-index:11;
 background-color:#000;}.rightEyess{
 position:absolute;
 width:18px;
 height:25px;
 left:150px;
 top:77px;
 border:1px #FFF solid;
 border-radius:50% 50%;
 z-index:11;
 background-color:#FFF;}.eyeCenter{
 position:absolute;
 width:6px;
 height:6px;
 left:102px;
 top:77px;
 border:1px #FFF solid;
 border-radius:50% 50%;
 background-color:#FFF;
 z-index:12;}.mouthTop{
 position:absolute;
 width:200px;
 height:150px;
 left:38px;
 top:127px;
 overflow:hidden;
 border:1px #FFA600 solid;
 border-radius:50% 45%;
 z-index:10;
 border-left-color:
 transparent;
 border-right-color:transparent;}.mouthBottom{
 position:absolute;
 width:185px;
 height:100px;
 left:5PX;
 top:-59px;
 border:1px #FFA600 solid;
 border-radius:50% 50%;
 z-index:11;
 border-left-color:#FFF;
 border-right-color:#FFF;
 border-top-color:#FFF;
 background-color:#FFA600;}.mouthCenter{
 position:absolute;
 width:100px;
 heigt:28px;
 z-index:15;
 left:55PX;
 top:26px;
 border:1px #FFA600 solid;
 border-bottom-left-radius:50% 35%;
 border-bottom-right-radius:50% 35%;
 background-color:#FFA600;}.leftZui{
 position:absolute;
 left:118px;
 top:150px;
 z-index:20;
 height:5px;
 width:5px;
 border-radius:50% 50%;
 background-color:#FFF;}.rightZui{
 position:absolute;
 left:200px;
 top:150px;
 z-index:20;
 height:5px;
 width:5px;
 border-radius:50% 50%;
 background-color:#FFF;}.weibo{
 position:absolute;
 width:290px;
 height:150px;
 left:-10px;
 top:80px;
 border:5px #000 solid;
 border-radius:50% 50%;
 background-color:#FF0008;
 z-index:4;}.weiboleft{
 position:absolute;
 width:60px;
 height:80px;
 left:50px;
 top:200px;
 border:3px #000 solid;
 background-color:#FF0008;
 z-index:3;
 border-bottom-left-radius:40%;
 border-bottom-right-radius:20%;
 border-top-left-radius:50%;}.weiLeftGang{position:absolute;}.weiRightGang{
 position:absolute;
 left:89px;
 top:124px;
 border-right: 7px solid black;
 width: 180px;
 height: 65px;
 border-bottom-right-radius: 70px 70px;
 transform:rotate(3deg);
 z-index:20;}.weiLeftGang{
 position:absolute;
 left:2px;
 top:140px;
 border-left: 5px solid black;
 width: 70px;
 height: 45px;
 border-bottom-left-radius: 70px 70px;
 transform:rotate(-1deg);
 z-index:20;}.dudu{
 position:absolute;
 left:17px;
 top:90px;
 width:250px;
 height:300px;
 border:1px #000 solid;
 border-radius:50% 50%;
 background-color:#FFF;
 z-index:2;}.waidudu{
 position:absolute;
 width:300px;
 height:360px;
 background-color:#000;
 border:1px #000 solid;
 left:-10px;
 top:35px;
 border-radius:50% 50%;
 z-index:1;}.leftarm{
 position:absolute;
 width:40px;
 height:160px;
 left:-53px;
 top:153px;
 overflow:hidden;
 transform:rotate(30deg);
 z-index:1;}#top{
 position:absolute;
 width:30px;
 height:130px;
 border:1px #000 solid;
 border-top-left-radius:40% 50%;
 border-bottom-left-radius:90% 40%;
 background-color:#000;}#leftArmBottom{
 position:absolute;
 width:40px;
 height:120px;
 left:-43px;
 top:164px;
 border:1px #000 solid;
 border-bottom-right-radius:100% 90%;
 border-top-left-radius:90% 90%;
 transform:rotate(6deg);
 background-color:#000;
 z-index:0;}.rightArm{
 position:absolute;
 width:30px;
 height:40px;
 left:783px;
 top:213px;
 background-color:#000;
 border:1px #000 solid;
 border-radius:50% 50%;
 transform:rotate(-20deg);}.leftFoot{
 position:absolute;
 width:110px;
 height:70px;
 left:533px;
 top:414px;
 border:5px #000 solid;
 background:#FFA600;
 border-radius:50% 50%;}.rightFoot{
 position:absolute;
 width:110px;
 height:70px;
 left:663px;
 top:414px;
 border:5px #000 solid;
 background:#FFA600;
 border-radius:50% 50%;}.tailLeft{
 position:absolute;
 left:537px;
 top:440px;
 border-right: 5px solid black;
 width: 30px;
 height: 25px;
 border-bottom-right-radius: 70px 70px;
 transform:rotate(210deg)}.tailRight{
 position:absolute;
 left:744px;
 top:442px;
 border-left: 5px solid black;
 width: 30px;
 height: 25px;
 border-bottom-left-radius: 70px 70px;
 transform:rotate(150deg)}#flower{
 position:absolute;
 left:480px;
 z-index:-1;
 transform:rotate(-20deg)}

提示由于沒有做兼容性處理：這些代碼適用于Firefox來觀看效果。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

html和css制作QQ企鵝教程

推薦度：

點擊下載本文 文檔為doc格式

標(biāo)簽： QQ 企鵝教程

熱門焦點

html和css制作QQ企鵝教程

html和css制作QQ企鵝教程

html和css制作QQ企鵝教程

最新推薦

猜你喜歡

熱門推薦