我们知道CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。大家在学习前端编程的时候肯定会用到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来观看效果。
以上就是两种不同的代码方式实现的QQ企鹅,大家可以尝试一下。
相关推荐:
以上是html和css制作QQ企鹅教程的详细内容。更多信息请关注PHP中文网其他相关文章!