首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

CSS画出一个可爱神奇的多啦A梦

所属分类： 网页制作 / CSS 阅读数： 1091
收藏 0 赞 0 分享

小叮当简单颜色单一，操作起来也很容易上手。接下来的一个实例就是用css画出一个多啦A梦，首先将其分为头部，和身体。然后，再根据身体各部分细节进行进一步的具体刻画。
 
由于最近一直在学习JavaWeb方面的东西，所以，我的这个小叮当就是用jsp页面进行映衬。
 
代码如下：首先是写jsp页面，将其分成多个块，然后再分块操作：
 

XML/HTML Code复制内容到剪贴板
  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>  
  87.   


再接下来就是每一个div的细致描写刻画：

XML/HTML Code复制内容到剪贴板
  1. @CHARSET "UTF-8";   
  2. .CC{   
  3.       font-size:100px;   
  4.       font-weight:600;   
  5.       font-family:"华文楷体";   
  6.       text-align: center;   
  7. }   
  8.   
  9. .doraemon{   
  10.     position:relative;   
  11.     margin-top:5px;   
  12.     margin-left:530px;   
  13. }   
  14. .doraemon .head{   
  15.     width:320px;   
  16.     height:300px;   
  17.     border-radius:150px;   
  18.     background:#07bbee;   
  19.     background:-webkit-radial-gradient(right top,#fff 10%, #07bbee 20%,#10a6ce 75%,#000);   
  20.     background:-moz-radial-gradient(right top,#fff 10%, #07bbee 20%,#10a6ce 75%,#000);   
  21.     background:-ms-radial-gradient(right top,#fff 10%, #07bbee 20%,#10a6ce 75%,#000);   
  22.     border:#555 2px solid;   
  23.     box-shadow:-5px 10px 15px rgba(0,0,0,0.45);   
  24.     position:relative;   
  25. }   
  26.   
  27. .doraemon .face{   
  28.     position:relative;   
  29.     z-index:2;   
  30. }   
  31. .doraemon .face .white{   
  32.     border:#000 2px solid;   
  33.     width:265px;   
  34.     height:195px;   
  35.     border-radius:150px 150px;   
  36.     position:absolute;   
  37.     top:75px;left:25px;   
  38.     background:#fff;   
  39.     background:-webkit-radial-gradient(right top,#fff 75%, #eee 75%,#eee 80%,#999 90%,#444);   
  40.     background:-moz-radial-gradient(right top,#fff 75%, #eee 75%,#eee 80%,#999 90%,#444);   
  41.     background:-ms-radial-gradient(right top,#fff 10%, #eee 75%,#eee 80%,#999 90%,#444);   
  42. }   
  43. .doraemon .face .nose{   
  44.     border: 2px solid #000;   
  45.     width:30px;   
  46.     height:30px;   
  47.     border-radius:30px;   
  48.     position:absolute;   
  49.     background:#c93300;   
  50.     top:110px;left:140px;   
  51.     z-index:3;   
  52. }   
  53. .doraemon .face .nose .light{   
  54.     border-radius:5px;   
  55.     box-shadow:19px 8px 5px #FFF;   
  56.     width:10px;   
  57.     height:10px;   
  58. }   
  59. .doraemon .face .nose_line{   
  60.     background:#333;   
  61.     width:3px;   
  62.     height:100px;   
  63.     top:140px;left:155px;   
  64.     position:absolute;   
  65.     z-index:3;   
  66. }   
  67. .doraemon .face .mouth{   
  68.     width:220px;   
  69.     height:400px;   
  70.     border-radius:120px;   
  71.     border-bottom:3px solid #333;   
  72.     position:absolute;   
  73.     top:-160px;left:45px;   
  74. }   
  75. .doraemon .eyes{   
  76.     position:relative;   
  77.     z-index:3;   
  78. }   
  79. .doraemon .eyes .eye{   
  80.     width:72px;   
  81.     height:82px;   
  82.     position:absolute;   
  83.     top:40px;   
  84.     background:#fff;   
  85.     border: 2px solid #000;   
  86.     border-radius:35px 35px;   
  87. }   
  88. .doraemon .eyes .eye .black{   
  89.     width:14px;   
  90.     height:14px;   
  91.     background:#000;   
  92.     border-radius:14px;   
  93.     position:relative;   
  94.     top:40px;   
  95. }       
  96. .doraemon .eyes .left{   
  97.     left:82px;   
  98. }   
  99. .doraemon .eyes .right{   
  100.     left:156px;   
  101. }   
  102. .doraemon .eyes .eye .bleft{   
  103.     left:50px;   
  104. }   
  105. .doraemon .eyes .eye .bright{   
  106.     left:7px;   
  107. }   
  108. .doraemon .whiskers{   
  109.     width:220px;   
  110.     height:80px;   
  111.     background:#fff;   
  112.     position:relative;   
  113.     border-radius:15px;   
  114.     top:120px;left:45px;   
  115.     z-index:2;   
  116. }   
  117. .doraemon .whiskers .whisker{   
  118.     background:#333;   
  119.     width:60px;   
  120.     height:2px;   
  121.     position:absolute;   
  122.     z-index:2;   
  123. }   
  124. .doraemon .whiskers .rTop{   
  125.     top:25px;left:165px;   
  126. }   
  127. .doraemon .whiskers .rt{   
  128.     top:45px;left:167px;   
  129. }   
  130. .doraemon .whiskers .rBottom{   
  131.     top:65px;left:165px;   
  132. }       
  133. .doraemon .whiskers .lTop{   
  134.     top:25px;left:0px;   
  135. }   
  136. .doraemon .whiskers .lt{   
  137.     top:45px;left:-2px;   
  138. }   
  139. .doraemon .whiskers .lBottom{   
  140.     top:65px;left:0px;   
  141. }       
  142. .doraemon .whiskers .r160{   
  143.     transform:rotate(160deg);   
  144.     -webkit-transform:rotate(160deg);   
  145. }       
  146. .doraemon .whiskers .r20{   
  147.     transform:rotate(20deg);   
  148.     -webkit-transform:rotate(20deg);   
  149. }   
  150.   
  151. .doraemon .choker{   
  152.     position:relative;   
  153.     z-index:4;   
  154.     top:-40px;left:45px;   
  155.     background:#c40;   
  156.     background:-webkit-gradient(linear,left top,left bottom,from(#c40),to(#800400));   
  157.     background:-moz-linear-gradient(center top,#c40,#800400);   
  158.     background:-ms-linear-gradient(center top,#c40,#800400);   
  159.     border: 2px solid #000000;   
  160.     border-radius:10px 10px 10px 10px;   
  161.     width:230px;   
  162.     height:20px;   
  163. }   
  164. .doraemon .choker .bell{   
  165.     width:40px;   
  166.     height:40px;   
  167.     _overflow:hidden;   
  168.     border-radius:50px;   
  169.     border: 2px solid #000;   
  170.     background:#f9f12a;   
  171.     background:-webkit-gradient(linear,left top,left bottom,from(#f9f12a),color-stop(0.5,#e9e11a),to(#a9a100));   
  172.     background:-moz-linear-gradient(top,#f9f12a,#e9e11a 75%,#a9a100);   
  173.     background:-ms-linear-gradient(top,#f9f12a,#e9e11a 75%,#a9a100);   
  174.     box-shadow:-5px 5px 10px rgba(0,0,0,0.25);   
  175.     position:relative;   
  176.     top:5px;left:90px;   
  177. }   
  178. .doraemon .choker .bell_line{   
  179.     background:#c40;   
  180.     border-radius:3px 3px 0px 0px;   
  181.     border:2px solid #333333;   
  182.     height:2px;width:36px;   
  183.     position:relative;   
  184.     top:10px;   
  185. }   
  186. .doraemon .choker .bell_circle{   
  187.     background:#000;   
  188.     border-radius:5px;   
  189.     height:10px;width:12px;   
  190.     position:relative;   
  191.     top:10px;   
  192.     left:13px;   
  193. }   
  194. .doraemon .choker .bell_circle{   
  195.     background:#000;   
  196.     border-radius:5px;   
  197.     height:10px;width:12px;   
  198.     position:relative;   
  199.     top:10px;   
  200.     left:13px;   
  201. }   
  202. .doraemon .choker .bell_under{   
  203.     background:#000;   
  204.     height:15px;width:3px;   
  205.     top:10px;   
  206.     left:18px;   
  207.     position:relative;   
  208. }   
  209. .doraemon .choker .bell_light{   
  210.     border-radius:10px;   
  211.     box-shadow:19px 8px 5px #fff;   
  212.     height:11px;width:11px;   
  213.     position:relative;   
  214.     top:-34px;   
  215.     left:4px;   
  216.     opacity:0.7;   
  217. }   
  218.   
  219.   
  220. .doraemon .bodys{   
  221.     position:relative;   
  222.     top:-310px;   
  223. }   
  224. .doraemon .bodys .body{   
  225.     background:#07beea;   
  226.     background:-webkit-gradient(linear,right top,left top,from(#07beea),color-stop(0.5,#0073b3),color-stop(0.75,#00b0e0),to(#0096be));   
  227.     background:-moz-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);   
  228.     background:-ms-linear-gradient(right center,#07beea,#0073b3 50%,#00b0e0 75%,#0096be 100%);   
  229.     border: 2px solid #333;   
  230.     height:165px;width:220px;   
  231.     position:absolute;   
  232.     top:265px;   
  233.     left:50px;   
  234. }   
  235. .doraemon .bodys .wraps{   
  236.     background:#fff;   
  237.     background:-webkit-gradient(linear,right top,left bottom,from(#fff),color-stop(0.75,#fff),color-stop(0.83,#eee),color-stop(0.90,#999),color-stop(0.95,#444),to(#000));   
  238.     background:-moz-linear-gradient(right top,#fff,#fff 50%,#eee 75%,#eee 83%,#999 90%,#444 95%,#000);   
  239.     background:-ms-linear-gradient(right top,#fff,#fff 50%,#eee 75%,#eee 83%,#999 90%,#444 95%,#000);   
  240.     border: 2px solid #000;   
  241.     border-radius:85px;   
  242.     position:absolute;   
  243.     height:170px;width:170px;   
  244.     top:230px;   
  245.     left:72px;   
  246. }   
  247.   
  248. .doraemon .bodys .pocket{   
  249.     position:relative;   
  250.     height:130px;width:130px;   
  251.     border-radius:65px;   
  252.     background:#fff;   
  253.     background:-webkit-gradient(linear,right top,left bottom,from(#fff),color-stop(0.70,#fff),color-stop(0.75,#f8f8f8),color-stop(0.80,#eee),color-stop(0.88,#ddd),to(#fff));   
  254.     background:-moz-linear-gradient(right top,#fff,#fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%,#fff);   
  255.     background:-ms-linear-gradient(right top,#fff,#fff 70%,#f8f8f8 75%,#eee 80%,#ddd 88%,#fff);   
  256.     border: 2px solid #000;   
  257.     top:250px;   
  258.     left:92px;   
  259. }   
  260. .doraemon .bodys .pocket_mask{   
  261.     position:relative;   
  262.     height:60px;width:134px;   
  263.     background:#fff;   
  264.     border-bottom:2px solid #000;   
  265.     top:125px;   
  266.     left:92px;   
  267. }   
  268.   
  269. .doraemon .hand_right{   
  270.     height:100px;width:100px;   
  271.     position:absolute;   
  272.     top:272px;   
  273.     left:248px;   
  274. }   
  275. .doraemon .hand_left{   
  276.     height:100px;width:100px;   
  277.     position:absolute;   
  278.     top:272px;   
  279.     left:-10px;   
  280. }   
  281. .doraemon .arm{   
  282.     background:#07beea;   
  283.     background:-webkit-gradient(linear,left top,left bottom,from(#07beea),color-stop(0.85,#07beea),to(#555));   
  284.     background:-moz-linear-gradient(center top,#07beea,#07beea 85%,#555);   
  285.     background:-ms-linear-gradient(center top,#07beea,#07beea 85%,#555);   
  286.     border: 1px solid #000000;   
  287.     position:relative;   
  288.     height:50px;width:80px;   
  289.     box-shadow:-10px 7px 10px rgba(0,0,0,0.35);   
  290.     z-index:-1;   
  291. }   
  292.   
  293. .doraemon .hand_right .arm{   
  294.     top:17px;   
  295.     transform:rotate(35deg);   
  296.     -webkit-transform:rotate(35deg);   
  297. }   
  298. .doraemon .hand_left .arm{   
  299.     top:17px;   
  300.     background:#0096be;   
  301.     box-shadow:5px -7px 10px rgba(0,0,0,0.25);   
  302.     transform:rotate(145deg);   
  303.     -webkit-transform:rotate(145deg);   
  304. }   
  305. .doraemon .circle{   
  306.     background:#fff;   
  307.     background:-webkit-gradient(linear,right top,left bottom,from(#fff),color-stop(0.5,#fff),color-stop(0.7,#eee),color-stop(0.8,#ddd),to(#999));   
  308.     background:-moz-linear-gradient(right top,#fff,#fff 50%,#eee 70%,#ddd 80%,#999);   
  309.     position:absolute;   
  310.     height:60px;width:60px;   
  311.     border: 2px solid #000;   
  312.     border-radius:30px;   
  313. }   
  314.   
  315. .doraemon .hand_right .circle{   
  316.     left:40px;   
  317.     top:32px;   
  318. }   
  319. .doraemon .hand_left .circle{   
  320.     left:-20px;   
  321.     top:32px;   
  322. }   
  323. .doraemon .arm_rewrite{   
  324.     background:#07beea;   
  325.     position:relative;   
  326.     height:45px;width:5px;   
  327. }   
  328. .doraemon .hand_right .arm_rewrite{   
  329.     left:20px;   
  330.     top:-45px;   
  331. }       
  332. .doraemon .hand_left .arm_rewrite{   
  333.     left:60px;   
  334.     top:-45px;   
  335.     background:#0096be;   
  336. }       
  337. .doraemon .foot{   
  338.     height:40px;   
  339.     left:20px;   
  340.     position:relative;   
  341.     top:-141px;   
  342.     width:280px;       
  343. }       
  344. .doraemon .foot .left{   
  345.     background:#fff;   
  346.     background:-webkit-gradient(linear,right top,left bottom,from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee),to(#999));   
  347.     background:-moz-linear-gradient(right top,#fff,#fff 75%,#eee 85%,#999);   
  348.     background:-ms-linear-gradient(right top,#fff,#fff 75%,#eee 85%,#999);   
  349.     border: 2px solid #333;   
  350.     border-radius:80px 60px 60px 40px;   
  351.     box-shadow:-6px 0 10px rgba(0,0,0,0.35);   
  352.     height:30px;   
  353.     left:14px;   
  354.     position:relative;   
  355.     top:69px;   
  356.     width:125px;   
  357. }       
  358. .doraemon .foot .right{   
  359.     background:#fff;   
  360.     background:-webkit-gradient(linear,right top,left bottom,from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee),to(#999));   
  361.     background:-moz-linear-gradient(right top,#fff,#fff 75%,#eee 85%,#999);   
  362.     background:-ms-linear-gradient(right top,#fff,#fff 75%,#eee 85%,#999);   
  363.     border: 2px solid #333;   
  364.     border-radius:80px 60px 60px 40px;   
  365.     box-shadow:-6px 0 10px rgba(0,0,0,0.35);   
  366.     height:30px;   
  367.     left:141px;   
  368.     position:relative;   
  369.     top:39px;   
  370.     width:125px;   
  371. }   
  372. .doraemon .foot .foot_rewrite{   
  373.     position:relative;   
  374.     top:0px;   
  375.     left:132px;   
  376.     _left:127px;   
  377.     width:20px;   
  378.     height:11px;   
  379.     background:#fff;   
  380.     background:-webkit-gradient(linear,right top,left bottom,from(#666),color-stop(0.83,#fff),to(#fff));   
  381.     background:-moz-linear-gradient(right top,#666,#fff 83%,#fff);   
  382.     background:-ms-linear-gradient(right top,#666,#fff 83%,#fff);   
  383.     border-top:2px solid #000;   
  384.     border-right:2px solid #000;   
  385.     border-left:2px solid #000;   
  386.     border-top-right-radius:40px;   
  387.     border-top-left-radius:40px;   
  388. }       
  389.   


这个是整体的描绘，接下来，我来根据自己的理解更加深刻地理解每一个特效的来源。
 
background:-webkit-radial-gradien ：这个属性是讲颜色的渐变，比如哆啦A梦的蓝色，从右上再到左下，颜色逐渐加深，线性渐变；
 
线性渐变实例：

border-radius：转换为圆角；   
 
z-index：指定该元素的层叠顺序，比如说图片，若z-index为-1，覆盖在图片上面的字就会显示出来。
 
rgba(0,0,0,0.45)：表示透明度的；
 
—overflow:设置当元素的内容溢出其区域时发生的事情,hidden,隐藏。
 
transform:转换和旋转；
 
这里还有一个动画效果，目的是让小叮当的眼睛动起来~ 

CSS Code复制内容到剪贴板
  1. <style type="text/css">   
  2.     @-webkit-keyframes eyemove{   
  3.         80%{margin:0; }   
  4.         85%{margin:-20px 0 0 0;}   
  5.     &nb
更多精彩内容其他人还在看

CSS教程:CSS命名参考

在XHTML中定义ID、CLASSS都用得上，主要是方面CSS定义样式时能一眼看穿。所以，CSS命名仅作参考。 (1)页面结构类 容器: container 页头：header 内容：content/container 页面主体：main 页尾：footer 导航：na
收藏 0 赞 0 分享

CSS教程:控制网页文件大小通过精简CSS实现

尽管对于现如今的带宽来说，网页文件那仅以K来算的大小实在是微不足道，但如何将这以K来计算的网页文件精简到最小还是网页设计师们所应该考虑的问题之一。 众所周之，在不影响整个网页构架与功能的情况下，网页文件越小越好，因为更小的网页文件有利于浏览器对网页的解释
收藏 0 赞 0 分享

CSS教程:关于文字溢出问题的研究

首先引起对这个溢出问题进行研究是因为看到一个朋友的帖子，里面提到ie7下出现的文字溢出问题； 于是又重新翻了以前怿飞斑竹的帖子，他提到的是注释引起的文字溢出问题，我今天看的时候发现在ie7下并没有产生多猪的问题(以前我没有装ie7，所以没有测试)，今天看到这个新
收藏 0 赞 0 分享

符合web标准的嵌入Flash的方法

　　常有网友提问，如何让网页中嵌入的Flash标签也符合web标准。目前还没有一个完美的解决办法，这篇文章中，我们将Flash嵌入标签写入js文件中，通过变量传递参数的办法来回避不符合标准的标签。 　　请注意，这只是一个变通的方法，换汤不换药，并未能最终解决存在的
收藏 0 赞 0 分享

学习WEB标准必备的四项技能

今天在群里，熊猫君提议整理一个帖子，一方面为初学者提供一个入门指南，另一方面也象借此和已经在从事这个行业进行一点交流。下面是我从事这个行当多年的一些经验总结，希望抛砖引玉，大家不吝赐教。 １、必备工具 其实web标准并不是很复杂的技术，实现web标准的工具
收藏 0 赞 0 分享

CSS对表格单元格强制换行和不换行

CSS控制Table单元格强制换行与强制不换行 　　我们知道Div的换行和不换行的css写法。但对于表格单元格只知道一个属性nowrap可以使其不换行。 　　近日有此需要，但发现加上nowrap在某些情况下还是会换行！无奈，没有一个强制不换行的方法吗？ 　　用C
收藏 0 赞 0 分享

CSS制作符合网站标准的细线表格

css教程：实现符合Web标准的细线表格 　　随着应用CSS网页布局构建网页， 　　以及web标准的广泛普及与发展， 　　表格渐渐被人们遗忘， 　　但是表格还是有它优秀的一面， 　　数据处理用表格的确省了不少麻烦！ 　　这个是细表格的代码，并且通过了标准验证！ tab
收藏 0 赞 0 分享

区分IE6,IE7和firefox的CSS hack

这篇文章主要为介绍了CSS小技巧之有效区分IE6,IE7,Firefox，需要的朋友可以参考下
收藏 0 赞 0 分享

CSS教程:用dl dt dd来制作列表

　　今天有人发邮件问的一个问题,最开始的想法是用ul列表来实现;但是这样用出现两个比较麻烦的地方： 　　1、如果用UL还布局，右边一栏比较麻烦； 　　2、文字外边的边框自适应比较麻烦； 　　3、很可能要定死高度； 　　所以，细细地看一看这个布局，想一想还是用DL.DT.DD作
收藏 0 赞 0 分享

性感的CSS菜单(Menus)

当你需要一个简单易用的导航菜单得时候。CSSMenu是个不错的选择。相对于Flash/Javascript，他们小巧轻便，而且方便使用。当然，他们也能做出很多很漂亮的效果。 CssMenuExample 这里有几个专门收集CSS导航菜单的站点，其中有很多优秀的作品。也许能给
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22