小叮当简单颜色单一，操作起来也很容易上手。接下来的一个实例就是用css画出一个多啦A梦，首先将其分为头部，和身体。然后，再根据身体各部分细节进行进一步的具体刻画。
由于最近一直在学习JavaWeb方面的东西，所以，我的这个小叮当就是用jsp页面进行映衬。
代码如下：首先是写jsp页面，将其分成多个块，然后再分块操作：
1 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 2 <% 3 String path = request.getContextPath(); 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 5 %> 6 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 8 <html> 9 <head> 10 <base href="<%=basePath%>"> 11 <link rel="stylesheet" type="text/css" href="bootstrap-3.3.5-dist/css/bootstrap.min.css"> 12 <link rel="stylesheet" type="text/css" href="css/DLAM.css"> 13 <title>here</title> 14 15 <meta http-equiv="pragma" content="no-cache"> 16 <meta http-equiv="cache-control" content="no-cache"> 17 <meta http-equiv="expires" content="0"> 18 <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> 19 <meta http-equiv="description" content="This is my page"> 20 <!-- 21 <link rel="stylesheet" type="text/css" href="styles.css"> 22 --> 23 24 </head> 25 <body> 26 <div class="doraemon"> 27 <div class="head"> 28 <div class="eyes"> 29 <div class="eye left"><div class="black bleft"></div></div> 30 <div class="eye right"><div class="black bright"></div></div> 31 </div> 32 33 <div class="face"> 34 <div class="white"></div> 35 <div class="nose"><div class="light"></div></div> 36 <div class="nose_line"></div> 37 <div class="mouth"></div> 38 <div class="whiskers"> 39 <div class="whisker rTop r160"></div> 40 <div class="whisker rt"></div> 41 <div class="whisker rBottom r20"></div> 42 <div class="whisker lTop r20"></div> 43 <div class="whisker lt"></div> 44 <div class="whisker lBottom r160"></div> 45 </div> 46 </div> 47 </div> 48 49 <div class="choker"> 50 <div class="bell"> 51 <div class="bell_line"></div> 52 <div class="bell_circle"></div> 53 <div class="bell_under"></div> 54 <div class="bell_light"></div> 55 </div> 56 </div> 57 58 <div class="bodys"> 59 <div class="body"></div> 60 <div class="wraps"></div> 61 <div class="pocket"></div> 62 <div class="pocket_mask"></div> 63 </div> 64 65 <div class="hand_right"> 66 <div class="arm"></div> 67 <div class="circle"></div> 68 <div class="arm_rewrite"></div> 69 </div> 70 71 <div class="hand_left"> 72 <div class="arm"></div> 73 <div class="circle"></div> 74 <div class="arm_rewrite"></div> 75 </div> 76 77 <div class="foot"> 78 <div class="left"></div> 79 <div class="right"></div> 80 <div class="foot_rewrite"></div> 81 </div> 82 83 </div> 84 85 </body> 86 </html>