用html和css设计QQ注册页面,html和css制作QQ企鹅教程

我们知道CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。大家在学习前端编程的时候肯定会用到HTML和css，那么这篇文章我们将教大家两种不同的方式制作QQ企鹅。

html制作QQ企鹅代码：

绘制腾讯QQ

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来观看效果。

以上就是两种不同的代码方式实现的QQ企鹅，大家可以尝试一下。

相关推荐：