HTML과 CSS로 QQ 펭귄 만들기 튜토리얼-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

HTML과 CSS로 QQ 펭귄 만들기 튜토리얼

小云云

Nov 18, 2017 pm 02:39 PM

csshtmlqq

우리는 CSS가 HTML 마크업 언어에 대한 스타일 설명을 제공하여 해당 요소가 표시되는 방식을 정의한다는 것을 알고 있습니다. CSS는 웹 디자인 분야의 획기적인 발전입니다. 작은 스타일을 수정하여 이와 관련된 모든 페이지 요소를 업데이트하는 데 사용할 수 있습니다. 프론트엔드 프로그래밍을 배울 때 누구나 HTML과 CSS를 사용하게 될 것이므로 이 글에서는 QQ Penguin을 만드는 두 가지 방법을 알려드리겠습니다.

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="/static/imghwm/default1.png"  data-src="meigui.png"  class="lazy"   id="flower"    style="max-width:90%" alt="HTML과 CSS로 QQ 펭귄 만들기 튜토리얼" ></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 펭귄을 두 가지 코딩 방식으로 구현한 것입니다.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

mPDF

mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.