1. 首页
  2. IT资讯

必练案例来啦!用HTML和CSS徒手画哆啦A梦和小黄人

“u003Cdivu003Eu003Cpu003E今天,小编带大家用html和css,徒手画一个u003Cstrongu003E哆啦A梦u003Cu002Fstrongu003E和u003Cstrongu003E小黄人,u003Cu002Fstrongu003E顺带画个根据目前时间运行的u003Cstrongu003E小时钟u003Cu002Fstrongu003E,而且小黄人还有特效哦!u003Cbru003Eu003Cu002Fpu003Eu003Cpu003E先给大家看看,完成后的效果吧;同时小编建议大家多多打代码,出来的效果很有成就感哦!u003Cu002Fpu003Eu003Cpu003E哆啦A梦版如下:u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002F3211000136fa7c6a6736″ img_width=”746″ img_height=”539″ alt=”必练案例来啦!用HTML和CSS徒手画哆啦A梦和小黄人” inline=”0″u003Eu003Cu002Fpu003Eu003Cp class=”pgc-img-caption”u003E哆啦A梦u003Cu002Fpu003Eu003Cpu003E接下来画个小黄人:u003Cbru003Eu003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002F3211000138a08f0f0f7d” img_width=”721″ img_height=”622″ alt=”必练案例来啦!用HTML和CSS徒手画哆啦A梦和小黄人” inline=”0″u003Eu003Cu002Fpu003Eu003Cp class=”pgc-img-caption”u003E无效果的小黄人u003Cu002Fpu003Eu003Cpu003E当鼠标移动到小黄人时,效果是这样的:(效果在于眼睛、嘴巴、和提示框)u003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp3.pstatp.comu002Flargeu002F31f50003a961f913acc4″ img_width=”633″ img_height=”626″ alt=”必练案例来啦!用HTML和CSS徒手画哆啦A梦和小黄人” inline=”0″u003Eu003Cu002Fpu003Eu003Cp class=”pgc-img-caption”u003E鼠标悬停时的小黄人u003Cu002Fpu003Eu003Cpu003E最后,顺带画个小时钟(可以运行的哦)u003Cbru003Eu003Cu002Fpu003Eu003Cpu003Eu003Cimg src=”http:u002Fu002Fp1.pstatp.comu002Flargeu002F32020001f443dc25d2aa” img_width=”689″ img_height=”542″ alt=”必练案例来啦!用HTML和CSS徒手画哆啦A梦和小黄人” inline=”0″u003Eu003Cu002Fpu003Eu003Cp class=”pgc-img-caption”u003E可根据当前时间运行u003Cu002Fpu003Eu003Cpu003E最后贴上代码(特别注意的是,为了时间一些效果等,文中会使用到简单的js,同时也需要jQuery文件):u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E第一部分:HTML部分的代码如下:u003Cu002Fstrongu003Eu003Cu002Fh1u003Eu003Cpu003E<!DOCTYPE html>u003Cu002Fpu003Eu003Cpu003E<html>u003Cu002Fpu003Eu003Cpu003E<head>u003Cu002Fpu003Eu003Cpu003E<meta charset=”utf-8″>u003Cu002Fpu003Eu003Cpu003E<title>Examples<u002Ftitle>u003Cu002Fpu003Eu003Cpu003E<link href=”cssu002Fstyle.css” rel=”stylesheet”>u003Cu002Fpu003Eu003Cpu003E<script type=”textu002Fjavascript” src=”jsu002Fjquery.min.js”><u002Fscript>u003Cu002Fpu003Eu003Cpu003E<script type=”textu002Fjavascript”>u003Cu002Fpu003Eu003Cpu003E$(function(){u003Cu002Fpu003Eu003Cpu003E$(‘.cat1’).hover(function(){u003Cu002Fpu003Eu003Cpu003E$(‘.dialog’).addClass(‘dialogs’);u003Cu002Fpu003Eu003Cpu003E$(‘.mouth’).addClass(‘mouths’);u003Cu002Fpu003Eu003Cpu003E$(‘.circle’).addClass(‘circles’);u003Cu002Fpu003Eu003Cpu003E},function(){u003Cu002Fpu003Eu003Cpu003E$(‘.dialog’).removeClass(‘dialogs’);u003Cu002Fpu003Eu003Cpu003E$(‘.mouth’).removeClass(‘mouths’);u003Cu002Fpu003Eu003Cpu003E$(‘.circle’).removeClass(‘circles’);u003Cu002Fpu003Eu003Cpu003E})u003Cu002Fpu003Eu003Cpu003Eu002Fu002F 画机器猫u003Cu002Fpu003Eu003Cpu003Evar ctx = document.getElementById(‘canvas’).getContext(‘2d’);u003Cu002Fpu003Eu003Cpu003Eu002Fu002F 画矩形u003Cu002Fpu003Eu003Cpu003Efunction drawRect(x, y, w, h, l, colorStroke, colorFill) {u003Cu002Fpu003Eu003Cpu003Ectx.beginPath();u003Cu002Fpu003Eu003Cpu003Ectx.lineWidth = l;u003Cu002Fpu003Eu003Cpu003Ectx.strokeStyle = colorStroke;u003Cu002Fpu003Eu003Cpu003Ectx.fillStyle=colorFill;u003Cu002Fpu003Eu003Cpu003Ectx.fillRect(x,y,w,h);u003Cu002Fpu003Eu003Cpu003Ectx.strokeRect(x,y,w,h);u003Cu002Fpu003Eu003Cpu003Ectx.stroke();u003Cu002Fpu003Eu003Cpu003Ectx.fill();u003Cu002Fpu003Eu003Cpu003Ectx.closePath();u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003Eu002Fu002F画不规则四边形u003Cu002Fpu003Eu003Cpu003Efunction drawShape(x1,y1,x2,y2,x3,y3,x4,y4,w,colorStroke,colorFill){u003Cu002Fpu003Eu003Cpu003Ectx.beginPath();u003Cu002Fpu003Eu003Cpu003Ectx.strokeStyle = colorStroke;u003Cu002Fpu003Eu003Cpu003Ectx.fillStyle=colorFill;u003Cu002Fpu003Eu003Cpu003Ectx.lineWidth = w;u003Cu002Fpu003Eu003Cpu003Ectx.moveTo(x1,y1);u003Cu002Fpu003Eu003Cpu003Ectx.lineTo(x2,y2);u003Cu002Fpu003Eu003Cpu003Ectx.lineTo(x3,y3);u003Cu002Fpu003Eu003Cpu003Ectx.lineTo(x4,y4);u003Cu002Fpu003Eu003Cpu003Ectx.closePath();u003Cu002Fpu003Eu003Cpu003Ectx.stroke();u003Cu002Fpu003Eu003Cpu003Ectx.fill();u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003Eu002Fu002F画圆u003Cu002Fpu003Eu003Cpu003Efunction drawCircle(x, y, r, w, colorStroke, colorFill) {u003Cu002Fpu003Eu003Cpu003Ectx.beginPath();u003Cu002Fpu003Eu003Cpu003Ectx.lineWidth = w;u003Cu002Fpu003Eu003Cpu003Ectx.strokeStyle = colorStroke;u003Cu002Fpu003Eu003Cpu003Ectx.fillStyle=colorFill;u003Cu002Fpu003Eu003Cpu003Ectx.arc(x,y,r,0,Math.PI*2);u003Cu002Fpu003Eu003Cpu003Ectx.stroke();u003Cu002Fpu003Eu003Cpu003Ectx.fill();u003Cu002Fpu003Eu003Cpu003Ectx.closePath();u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003Eu002Fu002F画圆弧u003Cu002Fpu003Eu003Cpu003Efunction drawRound(x, y, r, w, colorStroke, colorFill, sa, ea, flag) {u003Cu002Fpu003Eu003Cpu003Ectx.beginPath();u003Cu002Fpu003Eu003Cpu003Ectx.lineWidth = w;u003Cu002Fpu003Eu003Cpu003Ectx.strokeStyle = colorStroke;u003Cu002Fpu003Eu003Cpu003Ectx.fillStyle=colorFill;u003Cu002Fpu003Eu003Cpu003Ectx.arc(x,y,r,sa,ea,flag);u003Cu002Fpu003Eu003Cpu003Ectx.stroke();u003Cu002Fpu003Eu003Cpu003Ectx.fill();u003Cu002Fpu003Eu003Cpu003Ectx.closePath();u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003Eu002Fu002F画圆角矩形u003Cu002Fpu003Eu003Cpu003ECanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r, l, colorStroke, colorFill) {u003Cu002Fpu003Eu003Cpu003Eif (w < 2 * r) r = w u002F 2;u003Cu002Fpu003Eu003Cpu003Eif (h < 2 * r) r = h u002F 2;u003Cu002Fpu003Eu003Cpu003Ethis.beginPath();u003Cu002Fpu003Eu003Cpu003Ethis.lineWidth = l;u003Cu002Fpu003Eu003Cpu003Ethis.strokeStyle = colorStroke;u003Cu002Fpu003Eu003Cpu003Ethis.fillStyle = colorFill;u003Cu002Fpu003Eu003Cpu003Ethis.moveTo(x+r, y);u003Cu002Fpu003Eu003Cpu003Ethis.arcTo(x+w, y, x+w, y+h, r);u003Cu002Fpu003Eu003Cpu003Ethis.arcTo(x+w, y+h, x, y+h, r);u003Cu002Fpu003Eu003Cpu003Ethis.arcTo(x, y+h, x, y, r);u003Cu002Fpu003Eu003Cpu003Ethis.arcTo(x, y, x+w, y, r);u003Cu002Fpu003Eu003Cpu003Ethis.closePath();u003Cu002Fpu003Eu003Cpu003Ereturn this;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003Eu002Fu002F画椭圆u003Cu002Fpu003Eu003Cpu003Efunction EllipseTwo(context, x, y, a, b) {u003Cu002Fpu003Eu003Cpu003Econtext.save();u003Cu002Fpu003Eu003Cpu003Evar r = (a > b) ? a : b;u003Cu002Fpu003Eu003Cpu003Evar ratioX = a u002F r;u003Cu002Fpu003Eu003Cpu003Evar ratioY = b u002F r;u003Cu002Fpu003Eu003Cpu003Econtext.scale(ratioX, ratioY);u003Cu002Fpu003Eu003Cpu003Econtext.beginPath();u003Cu002Fpu003Eu003Cpu003Econtext.fillStyle=”green”;u003Cu002Fpu003Eu003Cpu003Econtext.arc(x u002F ratioX, y u002F ratioY, r, 0, 2 * Math.PI, false);u003Cu002Fpu003Eu003Cpu003Econtext.closePath();u003Cu002Fpu003Eu003Cpu003Econtext.restore();u003Cu002Fpu003Eu003Cpu003Econtext.fill();u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003Eu002Fu002F画线段u003Cu002Fpu003Eu003Cpu003Efunction drawLine(x, y, a, b, w, color) {u003Cu002Fpu003Eu003Cpu003Ectx.beginPath();u003Cu002Fpu003Eu003Cpu003Ectx.lineWidth = w;u003Cu002Fpu003Eu003Cpu003Ectx.strokeStyle = color;u003Cu002Fpu003Eu003Cpu003Ectx.moveTo(x, y);u003Cu002Fpu003Eu003Cpu003Ectx.lineTo(a, b);u003Cu002Fpu003Eu003Cpu003Ectx.stroke();u003Cu002Fpu003Eu003Cpu003Ectx.closePath();u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003EdrawCircle(258, 150, 120, 4, “#333”, “#0cacd8”);u003Cu002Fpu003Eu003Cpu003EdrawCircle(258, 170, 90, 0, “#fff”, “#fff”);u003Cu002Fpu003Eu003Cpu003EdrawCircle(255, 123, 16, 2, “#000”, “#c83000″);u003Cu002Fpu003Eu003Cpu003Ectx.roundRect(194,50,60,70,30,2,”#000″,”#fff”).fill();u003Cu002Fpu003Eu003Cpu003Ectx.roundRect(194,50,60,70,30,2,”#000″,”#fff”).stroke();u003Cu002Fpu003Eu003Cpu003Ectx.roundRect(255,50,60,70,30,2,”#000″,”#fff”).fill();u003Cu002Fpu003Eu003Cpu003Ectx.roundRect(255,50,60,70,30,2,”#000″,”#fff”).stroke();u003Cu002Fpu003Eu003Cpu003EdrawCircle(242, 90, 7, 0, “#fff”, “#000”);u003Cu002Fpu003Eu003Cpu003EdrawCircle(267, 90, 7, 0, “#fff”, “#000”);u003Cu002Fpu003Eu003Cpu003EdrawLine(255, 140, 255, 220, 3, “#333”);u003Cu002Fpu003Eu003Cpu003EdrawLine(170, 150, 220, 160, 2, “#333”);u003Cu002Fpu003Eu003Cpu003EdrawLine(165, 170, 220, 170, 2, “#333”);u003Cu002Fpu003Eu003Cpu003EdrawLine(170, 195, 220, 180, 2, “#333”);u003Cu002Fpu003Eu003Cpu003EdrawLine(295, 160, 345, 145, 2, “#333”);u003Cu002Fpu003Eu003Cpu003EdrawLine(295, 170, 349, 170, 2, “#333”);u003Cu002Fpu003Eu003Cpu003EdrawLine(295, 180, 345, 195, 2, “#333″);u003Cu002Fpu003Eu003Cpu003EdrawRect(170,260,180,170,2,”#333″,”#00a0cc”);u003Cu002Fpu003Eu003Cpu003EdrawRound(255,150,85,2,”#333″,”transparent”,Math.PIu002F4,Math.PI*3u002F4,false);u003Cu002Fpu003Eu003Cpu003EdrawRound(260,320,85,4,”#000″,”#fff”,Math.PI*5u002F4,Math.PI*7u002F4,true);u003Cu002Fpu003Eu003Cpu003EdrawRound(260,320,60,4,”#000″,”#fff”,0,Math.PI,false);u003Cu002Fpu003Eu003Cpu003EdrawLine(198, 320, 321, 320, 2, “#000″);u003Cu002Fpu003Eu003Cpu003EdrawRound(260,431,11,3,”#000″,”#fff”,0,Math.PI,true);u003Cu002Fpu003Eu003Cpu003Ectx.roundRect(152,427,104,30,15,2,”#000″,”#fff”).fill();u003Cu002Fpu003Eu003Cpu003Ectx.roundRect(152,427,104,30,15,2,”#000″,”#fff”).stroke();u003Cu002Fpu003Eu003Cpu003Ectx.roundRect(263,427,104,30,15,2,”#000″,”#fff”).fill();u003Cu002Fpu003Eu003Cpu003Ectx.roundRect(263,427,104,30,15,2,”#000″,”#fff”).stroke();u003Cu002Fpu003Eu003Cpu003EdrawShape(169,270,169,335,125,352,95,311,2,”000″,”#0094bc”);u003Cu002Fpu003Eu003Cpu003EdrawShape(351,270,351,335,400,352,425,311,2,”000″,”#0094bc”);u003Cu002Fpu003Eu003Cpu003EdrawCircle(100, 340, 30, 4, “#000”, “#fff”);u003Cu002Fpu003Eu003Cpu003EdrawCircle(420, 340, 30, 4, “#000”, “#fff”);u003Cu002Fpu003Eu003Cpu003EdrawLine(170, 270, 170, 325, 3, “#0094bc”);u003Cu002Fpu003Eu003Cpu003EdrawLine(350, 270, 350, 325, 3, “#0094bc”);u003Cu002Fpu003Eu003Cpu003Ectx.roundRect(165,250,190,20,10,2,”#000″,”#a01c00″).fill();u003Cu002Fpu003Eu003Cpu003Ectx.roundRect(165,250,190,20,10,2,”#000″,”#a01c00″).stroke();u003Cu002Fpu003Eu003Cpu003EdrawCircle(255, 278, 20, 4, “#000”, “#e4dc18”);u003Cu002Fpu003Eu003Cpu003EdrawCircle(255, 285, 6, 0, “transparent”, “#000”);u003Cu002Fpu003Eu003Cpu003EdrawLine(255, 285, 255, 299, 3, “#000″);u003Cu002Fpu003Eu003Cpu003EdrawRect(236,270,38,4,2,”#333″,”#d4cc10″);u003Cu002Fpu003Eu003Cpu003E})u003Cu002Fpu003Eu003Cpu003Ewindow.onload=function(){u003Cu002Fpu003Eu003Cpu003Eu002Fu002F画时钟u003Cu002Fpu003Eu003Cpu003Evar canvas1 = document.getElementById(‘canvas1’);u003Cu002Fpu003Eu003Cpu003Evar ctx1 = canvas1.getContext(‘2d’);u003Cu002Fpu003Eu003Cpu003Eu002Fu002F 画圆u003Cu002Fpu003Eu003Cpu003Efunction drawCircle(x, y, r, w, colorStroke, colorFill) {u003Cu002Fpu003Eu003Cpu003Ectx1.save();u003Cu002Fpu003Eu003Cpu003Ectx1.beginPath();u003Cu002Fpu003Eu003Cpu003Ectx1.lineWidth = w;u003Cu002Fpu003Eu003Cpu003Ectx1.strokeStyle = colorStroke;u003Cu002Fpu003Eu003Cpu003Ectx1.fillStyle=colorFill;u003Cu002Fpu003Eu003Cpu003Ectx1.shadowOffsetX=3;u003Cu002Fpu003Eu003Cpu003Ectx1.shadowOffsetY=3;u003Cu002Fpu003Eu003Cpu003Ectx1.shadowBlur=15;u003Cu002Fpu003Eu003Cpu003Ectx1.shadowColor=”#000″;u003Cu002Fpu003Eu003Cpu003Ectx1.arc(x,y,r,0,Math.PI*2);u003Cu002Fpu003Eu003Cpu003Ectx1.stroke();u003Cu002Fpu003Eu003Cpu003Ectx1.fill();u003Cu002Fpu003Eu003Cpu003Ectx1.closePath();u003Cu002Fpu003Eu003Cpu003Ectx1.restore();u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003Eu002Fu002F画针u003Cu002Fpu003Eu003Cpu003Efunction drawLine(x, y, a, b, w, color, time) {u003Cu002Fpu003Eu003Cpu003Ectx1.save();u003Cu002Fpu003Eu003Cpu003Ectx1.lineWidth = w;u003Cu002Fpu003Eu003Cpu003Ectx1.strokeStyle = color;u003Cu002Fpu003Eu003Cpu003Ectx1.shadowOffsetX=1;u003Cu002Fpu003Eu003Cpu003Ectx1.shadowOffsetY=1;u003Cu002Fpu003Eu003Cpu003Ectx1.shadowBlur=5;u003Cu002Fpu003Eu003Cpu003Ectx1.shadowColor=”#333”;u003Cu002Fpu003Eu003Cpu003Ectx1.translate(250,250);u003Cu002Fpu003Eu003Cpu003Ectx1.rotate(time*Math.PIu002F180);u003Cu002Fpu003Eu003Cpu003Ectx1.beginPath();u003Cu002Fpu003Eu003Cpu003Ectx1.moveTo(x, y);u003Cu002Fpu003Eu003Cpu003Ectx1.lineTo(a, b);u003Cu002Fpu003Eu003Cpu003Ectx1.stroke();u003Cu002Fpu003Eu003Cpu003Ectx1.closePath();u003Cu002Fpu003Eu003Cpu003Ectx1.restore();u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003Efunction drawClock(){u003Cu002Fpu003Eu003Cpu003Ectx1.clearRect(0,0,500,500);u003Cu002Fpu003Eu003Cpu003Evar now = new Date();u003Cu002Fpu003Eu003Cpu003Evar hour = now.getHours();u003Cu002Fpu003Eu003Cpu003Evar min = now.getMinutes();u003Cu002Fpu003Eu003Cpu003Evar sec = now.getSeconds();u003Cu002Fpu003Eu003Cpu003Ehour = hour + minu002F60;u003Cu002Fpu003Eu003Cpu003Ehour=hour>12?hour-12:hour;u003Cu002Fpu003Eu003Cpu003EdrawCircle(250, 250, 200, 5, “#0000ff”, “transparent”);u003Cu002Fpu003Eu003Cpu003Efor (var i = 0; i < 60; i++) {u003Cu002Fpu003Eu003Cpu003Ectx1.save();u003Cu002Fpu003Eu003Cpu003Eif (i%5==0) {u003Cu002Fpu003Eu003Cpu003Ectx1.lineWidth = 7;u003Cu002Fpu003Eu003Cpu003E}else{u003Cu002Fpu003Eu003Cpu003Ectx1.lineWidth = 5;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003Ectx1.strokeStyle = “#000”;u003Cu002Fpu003Eu003Cpu003Ectx1.translate(250,250);u003Cu002Fpu003Eu003Cpu003Ectx1.rotate(i*Math.PIu002F30);u003Cu002Fpu003Eu003Cpu003Ectx1.beginPath();u003Cu002Fpu003Eu003Cpu003Eif(i%5==0){u003Cu002Fpu003Eu003Cpu003Ectx1.moveTo(0,-170);u003Cu002Fpu003Eu003Cpu003E}else{u003Cu002Fpu003Eu003Cpu003Ectx1.moveTo(0,-180);u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003Ectx1.lineTo(0,-190);u003Cu002Fpu003Eu003Cpu003Ectx1.stroke();u003Cu002Fpu003Eu003Cpu003Ectx1.closePath();u003Cu002Fpu003Eu003Cpu003Ectx1.restore();u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003EdrawLine(0, -100, 0, 10, 7, “red”, hour*30);u003Cu002Fpu003Eu003Cpu003EdrawLine(0, -150, 0, 15, 4, “green”, min*6);u003Cu002Fpu003Eu003Cpu003EdrawLine(0, -185, 0, 20, 2, “purple”, sec*6);u003Cu002Fpu003Eu003Cpu003EdrawCircle(250, 250, 5, 5, “purple”, “#fff”);u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003EdrawClock();u003Cu002Fpu003Eu003Cpu003EsetInterval(drawClock,1000);u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E<u002Fscript>u003Cu002Fpu003Eu003Cpu003E<u002Fhead>u003Cu002Fpu003Eu003Cpu003E<body>u003Cu002Fpu003Eu003Cpu003E<div class=”cat”>u003Cu002Fpu003Eu003Cpu003E<div class=”hair”><div class=”hairs”><u002Fdiv><u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<div class=”cat1″>u003Cu002Fpu003Eu003Cpu003E<div class=”cat2″><u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<div class=”cat3″><div class=”middle”><u002Fdiv><u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<div class=”eyes left1″>u003Cu002Fpu003Eu003Cpu003E<span class=”circle”><em><u002Fem><u002Fspan>u003Cu002Fpu003Eu003Cpu003E<u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<div class=”eyes right1″>u003Cu002Fpu003Eu003Cpu003E<span class=”circle”><em><u002Fem><u002Fspan>u003Cu002Fpu003Eu003Cpu003E<u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<div class=”mouth”><u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<div class=”glass left2″><u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<div class=”glass right2″><u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<div class=”trou left”><u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<div class=”trou right”><u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<span class=”lines left”><u002Fspan>u003Cu002Fpu003Eu003Cpu003E<span class=”lines right”><u002Fspan>u003Cu002Fpu003Eu003Cpu003E<span class=”line_middle”><u002Fspan>u003Cu002Fpu003Eu003Cpu003E<u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<div class=”feet”>u003Cu002Fpu003Eu003Cpu003E<div class=”foot left3″>u003Cu002Fpu003Eu003Cpu003E<div class=”foot1″><u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<div class=”foot2″><u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<div class=”foot right3″>u003Cu002Fpu003Eu003Cpu003E<div class=”foot1″><u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<div class=”foot2″><u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<div class=”arm left”><u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<div class=”arm right”><u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<div class=”dialog”>u003Cu002Fpu003Eu003Cpu003E<div class=”tri”><u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<div class=”sen”>嗨!<u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<div class=”line”><u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<u002Fdiv>u003Cu002Fpu003Eu003Cpu003E<canvas id=”canvas” width=”500″ height=”500″><u002Fcanvas>u003Cu002Fpu003Eu003Cpu003E<canvas id=”canvas1″ width=”500″ height=”500″><u002Fcanvas>u003Cu002Fpu003Eu003Cpu003E<u002Fbody>u003Cu002Fpu003Eu003Cpu003E<u002Fhtml>u003Cu002Fpu003Eu003Ch1u003Eu003Cstrongu003E第二部分:u003Cu002Fstrongu003ECSS部分的代码如下:u003Cu002Fh1u003Eu003Cpu003E@charset “UTF-8″;u003Cu002Fpu003Eu003Cpu003E*{u003Cu002Fpu003Eu003Cpu003Emargin: 0;u003Cu002Fpu003Eu003Cpu003Epadding: 0;u003Cu002Fpu003Eu003Cpu003Elist-style: none;u003Cu002Fpu003Eu003Cpu003Eoutline: none;u003Cu002Fpu003Eu003Cpu003Efont-family: ‘微软雅黑’;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.cat{u003Cu002Fpu003Eu003Cpu003Ewidth: 500px;u003Cu002Fpu003Eu003Cpu003Eheight: 500px;u003Cu002Fpu003Eu003Cpu003Eborder: solid 1px cyan;u003Cu002Fpu003Eu003Cpu003Epadding: 50px;u003Cu002Fpu003Eu003Cpu003Eposition: relative;u003Cu002Fpu003Eu003Cpu003Ebackground-color: #c1fbff;u003Cu002Fpu003Eu003Cpu003Emargin:0 auto;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.cat1{u003Cu002Fpu003Eu003Cpu003Ewidth: 160px;u003Cu002Fpu003Eu003Cpu003Eheight: 280px;u003Cu002Fpu003Eu003Cpu003Ebackground-color: #ffdc40;u003Cu002Fpu003Eu003Cpu003Eborder-radius: 80px;u003Cu002Fpu003Eu003Cpu003Eposition: absolute;u003Cu002Fpu003Eu003Cpu003Eleft: 50%;u003Cu002Fpu003Eu003Cpu003Etop: 50%;u003Cu002Fpu003Eu003Cpu003Emargin: -150px 0 0 -150px;u003Cu002Fpu003Eu003Cpu003Eoverflow: hidden;u003Cu002Fpu003Eu003Cpu003Eborder: solid 3px #000;u003Cu002Fpu003Eu003Cpu003Ez-index: 99;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.cat2{u003Cu002Fpu003Eu003Cpu003Ewidth: 240px;u003Cu002Fpu003Eu003Cpu003Eheight: 240px;u003Cu002Fpu003Eu003Cpu003Eposition: absolute;u003Cu002Fpu003Eu003Cpu003Ebottom: -160px;u003Cu002Fpu003Eu003Cpu003Eleft: -50px;u003Cu002Fpu003Eu003Cpu003Ebackground-color: #2074a0;u003Cu002Fpu003Eu003Cpu003Eborder: solid 3px #000;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.cat3{u003Cu002Fpu003Eu003Cpu003Ewidth: 110px;u003Cu002Fpu003Eu003Cpu003Eheight: 40px;u003Cu002Fpu003Eu003Cpu003Eposition: absolute;u003Cu002Fpu003Eu003Cpu003Ebottom: 83px;u003Cu002Fpu003Eu003Cpu003Eleft: 22px;u003Cu002Fpu003Eu003Cpu003Ebackground-color: #2074a0;u003Cu002Fpu003Eu003Cpu003Eborder: solid 3px #000;u003Cu002Fpu003Eu003Cpu003Eborder-bottom-color: #2074a0;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.middle{u003Cu002Fpu003Eu003Cpu003Ewidth: 52px;u003Cu002Fpu003Eu003Cpu003Eheight: 32px;u003Cu002Fpu003Eu003Cpu003Eborder: solid 3px #000;u003Cu002Fpu003Eu003Cpu003Eborder-radius: 0 0 15px 15px;u003Cu002Fpu003Eu003Cpu003Eposition: absolute;u003Cu002Fpu003Eu003Cpu003Eleft: 27px;u003Cu002Fpu003Eu003Cpu003Etop: 25px;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.eyes{u003Cu002Fpu003Eu003Cpu003Ewidth: 60px;u003Cu002Fpu003Eu003Cpu003Eheight: 60px;u003Cu002Fpu003Eu003Cpu003Eborder-radius: 50%;u003Cu002Fpu003Eu003Cpu003Eborder: solid 3px #000;u003Cu002Fpu003Eu003Cpu003Ebackground-color: #fff;u003Cu002Fpu003Eu003Cpu003Eposition: absolute;u003Cu002Fpu003Eu003Cpu003Etop: 40px;u003Cu002Fpu003Eu003Cpu003Ez-index: 99;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.left1{u003Cu002Fpu003Eu003Cpu003Eleft: 14px;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.right1{u003Cu002Fpu003Eu003Cpu003Eright: 14px;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.circle{u003Cu002Fpu003Eu003Cpu003Edisplay: block;u003Cu002Fpu003Eu003Cpu003Ewidth: 26px;u003Cu002Fpu003Eu003Cpu003Eheight: 26px;u003Cu002Fpu003Eu003Cpu003Eborder-radius: 50%;u003Cu002Fpu003Eu003Cpu003Ebackground-color: #000;u003Cu002Fpu003Eu003Cpu003Eposition: absolute;u003Cu002Fpu003Eu003Cpu003Eleft: 13px;u003Cu002Fpu003Eu003Cpu003Etop: 18px;u003Cu002Fpu003Eu003Cpu003Etransition:.3s;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.circles{u003Cu002Fpu003Eu003Cpu003Eleft: 23px;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.circle em{u003Cu002Fpu003Eu003Cpu003Edisplay: block;u003Cu002Fpu003Eu003Cpu003Ewidth: 13px;u003Cu002Fpu003Eu003Cpu003Eheight: 13px;u003Cu002Fpu003Eu003Cpu003Eborder-radius: 50%;u003Cu002Fpu003Eu003Cpu003Ebackground-color: #fff;u003Cu002Fpu003Eu003Cpu003Eposition: absolute;u003Cu002Fpu003Eu003Cpu003Eleft: 8px;u003Cu002Fpu003Eu003Cpu003Etop: 5px;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.mouth{u003Cu002Fpu003Eu003Cpu003Ewidth: 40px;u003Cu002Fpu003Eu003Cpu003Eheight: 12px;u003Cu002Fpu003Eu003Cpu003Eborder: solid 3px #000;u003Cu002Fpu003Eu003Cpu003Eborder-radius: 0 0 100% 100%;u003Cu002Fpu003Eu003Cpu003Ebackground-color: #fff;u003Cu002Fpu003Eu003Cpu003Eposition: absolute;u003Cu002Fpu003Eu003Cpu003Eleft: 57px;u003Cu002Fpu003Eu003Cpu003Etop: 120px;u003Cu002Fpu003Eu003Cpu003Etransition:.3s;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.mouths{u003Cu002Fpu003Eu003Cpu003Etransform:scale(1.2);u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.glass{u003Cu002Fpu003Eu003Cpu003Ewidth: 30px;u003Cu002Fpu003Eu003Cpu003Eheight: 10px;u003Cu002Fpu003Eu003Cpu003Ebackground-color: #000;u003Cu002Fpu003Eu003Cpu003Eposition: absolute;u003Cu002Fpu003Eu003Cpu003Etop: 70px;u003Cu002Fpu003Eu003Cpu003Ez-index: 88;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.left2{u003Cu002Fpu003Eu003Cpu003Eleft: -5px;u003Cu002Fpu003Eu003Cpu003Etransform:rotate(10deg);u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.right2{u003Cu002Fpu003Eu003Cpu003Eright: -5px;u003Cu002Fpu003Eu003Cpu003Etransform:rotate(-10deg);u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.feet{u003Cu002Fpu003Eu003Cpu003Ewidth: 100px;u003Cu002Fpu003Eu003Cpu003Eheight: 45px;u003Cu002Fpu003Eu003Cpu003Eposition: absolute;u003Cu002Fpu003Eu003Cpu003Eleft: 183px;u003Cu002Fpu003Eu003Cpu003Ebottom: 133px;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.foot1{u003Cu002Fpu003Eu003Cpu003Ewidth: 22px;u003Cu002Fpu003Eu003Cpu003Eheight: 40px;u003Cu002Fpu003Eu003Cpu003Ebackground-color: #000;u003Cu002Fpu003Eu003Cpu003Eborder-radius: 0 0 10px 0;u003Cu002Fpu003Eu003Cpu003Eposition: absolute;u003Cu002Fpu003Eu003Cpu003Ebottom: 0;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.foot2{u003Cu002Fpu003Eu003Cpu003Ewidth: 45px;u003Cu002Fpu003Eu003Cpu003Eheight: 23px;u003Cu002Fpu003Eu003Cpu003Ebackground-color: #000;u003Cu002Fpu003Eu003Cpu003Eposition: absolute;u003Cu002Fpu003Eu003Cpu003Ebottom: 0;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.left3 .foot1{u003Cu002Fpu003Eu003Cpu003Eborder-radius: 0 0 10px 0;u003Cu002Fpu003Eu003Cpu003Eleft: 23px;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.left3 .foot2{u003Cu002Fpu003Eu003Cpu003Eborder-radius: 16px 0 3px 6px;u003Cu002Fpu003Eu003Cpu003Eleft: 0px;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.right3 .foot1{u003Cu002Fpu003Eu003Cpu003Eborder-radius: 0 0 0px 10px;u003Cu002Fpu003Eu003Cpu003Eright: 23px;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.right3 .foot2{u003Cu002Fpu003Eu003Cpu003Eborder-radius: 0 16px 6px 3px;u003Cu002Fpu003Eu003Cpu003Eright: 0px;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.arm{u003Cu002Fpu003Eu003Cpu003Ewidth: 50px;u003Cu002Fpu003Eu003Cpu003Eheight: 50px;u003Cu002Fpu003Eu003Cpu003Ebackground-color: #fcdf3b;u003Cu002Fpu003Eu003Cpu003Eborder:solid 3px #000;u003Cu002Fpu003Eu003Cpu003Eborder-radius: 10px;u003Cu002Fpu003Eu003Cpu003Etransform:rotate(45deg);u003Cu002Fpu003Eu003Cpu003Eposition: absolute;u003Cu002Fpu003Eu003Cpu003Etop: 290px;u003Cu002Fpu003Eu003Cpu003Ez-index: 77;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.arm.left{u003Cu002Fpu003Eu003Cpu003Eleft:133px;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.arm.right{u003Cu002Fpu003Eu003Cpu003Eleft:278px;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.trou{u003Cu002Fpu003Eu003Cpu003Ewidth: 50px;u003Cu002Fpu003Eu003Cpu003Eheight: 12px;u003Cu002Fpu003Eu003Cpu003Eborder: solid 3px #000;u003Cu002Fpu003Eu003Cpu003Ebackground-color: #1b7c9c;u003Cu002Fpu003Eu003Cpu003Eposition: absolute;u003Cu002Fpu003Eu003Cpu003Etop: 133px;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.trou.left{u003Cu002Fpu003Eu003Cpu003Eleft:-16px;u003Cu002Fpu003Eu003Cpu003Etransform:rotate(45deg);u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.trou.right{u003Cu002Fpu003Eu003Cpu003Eright:-16px;u003Cu002Fpu003Eu003Cpu003Etransform:rotate(-45deg);u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.lines{u003Cu002Fpu003Eu003Cpu003Edisplay: block;u003Cu002Fpu003Eu003Cpu003Ewidth: 30px;u003Cu002Fpu003Eu003Cpu003Eheight: 30px;u003Cu002Fpu003Eu003Cpu003Eborder-style: solid;u003Cu002Fpu003Eu003Cpu003Eborder-width: 3px;u003Cu002Fpu003Eu003Cpu003Eborder-radius: 50%;u003Cu002Fpu003Eu003Cpu003Eposition: absolute;u003Cu002Fpu003Eu003Cpu003Ebottom: 50px;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.lines.left{u003Cu002Fpu003Eu003Cpu003Eleft:-14px;u003Cu002Fpu003Eu003Cpu003Eborder-color: transparent transparent #000 transparent;u003Cu002Fpu003Eu003Cpu003Etransform:rotate(-45deg);u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.lines.right{u003Cu002Fpu003Eu003Cpu003Eright:-13px;u003Cu002Fpu003Eu003Cpu003Eborder-color: #000 transparent transparent transparent;u003Cu002Fpu003Eu003Cpu003Etransform:rotate(-135deg);u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.line_middle{u003Cu002Fpu003Eu003Cpu003Edisplay: block;u003Cu002Fpu003Eu003Cpu003Ewidth:3px;u003Cu002Fpu003Eu003Cpu003Eheight: 35px;u003Cu002Fpu003Eu003Cpu003Ebackground-color: #000;u003Cu002Fpu003Eu003Cpu003Eposition: absolute;u003Cu002Fpu003Eu003Cpu003Ebottom: 0;u003Cu002Fpu003Eu003Cpu003Eleft: 79px;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.hair{u003Cu002Fpu003Eu003Cpu003Ewidth: 47px;u003Cu002Fpu003Eu003Cpu003Eheight:77px;u003Cu002Fpu003Eu003Cpu003Eborder-color: #000 #000 transparent transparent;u003Cu002Fpu003Eu003Cpu003Eborder-style: solid;u003Cu002Fpu003Eu003Cpu003Eborder-width: 0 6px;u003Cu002Fpu003Eu003Cpu003Eborder-radius: 50%;u003Cu002Fpu003Eu003Cpu003Eposition: absolute;u003Cu002Fpu003Eu003Cpu003Eleft: 168px;u003Cu002Fpu003Eu003Cpu003Etop: 128px;u003Cu002Fpu003Eu003Cpu003Etransform:rotate(-90deg);u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.hairs{u003Cu002Fpu003Eu003Cpu003Ewidth: 27px;u003Cu002Fpu003Eu003Cpu003Eheight:47px;u003Cu002Fpu003Eu003Cpu003Eborder-color: #000 #000 transparent transparent;u003Cu002Fpu003Eu003Cpu003Eborder-style: solid;u003Cu002Fpu003Eu003Cpu003Eborder-width: 0 3px;u003Cu002Fpu003Eu003Cpu003Eborder-radius: 50%;u003Cu002Fpu003Eu003Cpu003Eposition: absolute;u003Cu002Fpu003Eu003Cpu003Eright: 2px;u003Cu002Fpu003Eu003Cpu003Etop: 26px;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.dialog{u003Cu002Fpu003Eu003Cpu003Eoverflow: hidden;u003Cu002Fpu003Eu003Cpu003Ewidth: 150px;u003Cu002Fpu003Eu003Cpu003Eheight: 75px;u003Cu002Fpu003Eu003Cpu003Eposition: absolute;u003Cu002Fpu003Eu003Cpu003Eright: 160px;u003Cu002Fpu003Eu003Cpu003Etop: 130px;u003Cu002Fpu003Eu003Cpu003Etransition:.3s;u003Cu002Fpu003Eu003Cpu003Eopacity: 0;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.sen{u003Cu002Fpu003Eu003Cpu003Ewidth: 140px;u003Cu002Fpu003Eu003Cpu003Eheight: 70px;u003Cu002Fpu003Eu003Cpu003Eborder: solid 2px green;u003Cu002Fpu003Eu003Cpu003Eborder-radius: 100%;u003Cu002Fpu003Eu003Cpu003Ecolor: orange;u003Cu002Fpu003Eu003Cpu003Efont-weight: bold;u003Cu002Fpu003Eu003Cpu003Eline-height: 70px;u003Cu002Fpu003Eu003Cpu003Etext-align: center;u003Cu002Fpu003Eu003Cpu003Eposition: absolute;u003Cu002Fpu003Eu003Cpu003Eright: 0px;u003Cu002Fpu003Eu003Cpu003Etop: 0px;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.tri{u003Cu002Fpu003Eu003Cpu003Edisplay: block;u003Cu002Fpu003Eu003Cpu003Ewidth: 10px;u003Cu002Fpu003Eu003Cpu003Eheight: 10px;u003Cu002Fpu003Eu003Cpu003Etransform:skewY(-45deg) rotate(-75deg);u003Cu002Fpu003Eu003Cpu003Eborder-style: solid;u003Cu002Fpu003Eu003Cpu003Eborder-width: 2px;u003Cu002Fpu003Eu003Cpu003Eborder-color: green transparent transparent green;u003Cu002Fpu003Eu003Cpu003Eposition: absolute;u003Cu002Fpu003Eu003Cpu003Ebottom: 7px;u003Cu002Fpu003Eu003Cpu003Eleft: 20px;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.dialog .line{u003Cu002Fpu003Eu003Cpu003Ewidth: 8px;u003Cu002Fpu003Eu003Cpu003Eheight: 3px;u003Cu002Fpu003Eu003Cpu003Ebackground-color: #c1fbff;u003Cu002Fpu003Eu003Cpu003Etransform:rotate(25deg);u003Cu002Fpu003Eu003Cpu003Eposition: absolute;u003Cu002Fpu003Eu003Cpu003Eleft: 23px;u003Cu002Fpu003Eu003Cpu003Etop: 60px;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E.dialogs{u003Cu002Fpu003Eu003Cpu003Eopacity: 1;u003Cu002Fpu003Eu003Cpu003Eright: 130px;u003Cu002Fpu003Eu003Cpu003Etop: 100px;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E#canvas{u003Cu002Fpu003Eu003Cpu003Edisplay: block;u003Cu002Fpu003Eu003Cpu003Emargin: 20px auto;u003Cu002Fpu003Eu003Cpu003Ebackground:#fff;u003Cu002Fpu003Eu003Cpu003Eborder:solid 1px #ff6600;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003E#canvas1{u003Cu002Fpu003Eu003Cpu003Edisplay: block;u003Cu002Fpu003Eu003Cpu003Ebackground-color: #ffff00;u003Cu002Fpu003Eu003Cpu003Emargin: 20px auto;u003Cu002Fpu003Eu003Cpu003E}u003Cu002Fpu003Eu003Cpu003Eu003Cstrongu003E最后,小编觉得以上的画不过是自己的兴趣同时也是举个例子,大家可以画出各种各样的你想要的图像,只要你动手画绝对没有问题。u003Cu002Fstrongu003Eu003Cu002Fpu003Eu003Cu002Fdivu003E”

原文始发于:必练案例来啦!用HTML和CSS徒手画哆啦A梦和小黄人

主题测试文章,只做测试使用。发布者:℅傍ㄖ免沦陷dε鬼,转转请注明出处:http://www.cxybcw.com/11284.html

联系我们

13687733322

在线咨询:点击这里给我发消息

邮件:1877088071@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code