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

2024-07-11 08:25:43

字体：大中小

来源：转载

供稿：网友

小叮当简单颜色单一，操作起来也很容易上手。接下来的一个实例就是用css画出一个多啦A梦，首先将其分为头部，和身体。然后，再根据身体各部分细节进行进一步的具体刻画。

由于最近一直在学习JavaWeb方面的东西，所以，我的这个小叮当就是用jsp页面进行映衬。

代码如下：首先是写jsp页面，将其分成多个块，然后再分块操作：

XML/HTML Code复制内容到剪贴板

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%
String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
<head> <base href="<%=basePath%>">
<link rel="stylesheet" type="text/css" href="bootstrap-3.3.5-dist/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/DLAM.css">
<title>here</title>
<meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page"> <!--
<link rel="stylesheet" type="text/css" href="styles.css"> -->
</head>
<body> <div class="doraemon">
<div class="head"> <div class="eyes">
<div class="eye left"><div class="black bleft"></div></div> <div class="eye right"><div class="black bright"></div></div>
</div>
<div class="face"> <div class="white"></div>
<div class="nose"><div class="light"></div></div> <div class="nose_line"></div>
<div class="mouth"></div> <div class="whiskers">
<div class="whisker rTop r160"></div> <div class="whisker rt"></div>
<div class="whisker rBottom r20"></div> <div class="whisker lTop r20"></div>
<div class="whisker lt"></div> <div class="whisker lBottom r160"></div>
</div> </div>
</div>
<div class="choker"> <div class="bell">
<div class="bell_line"></div> <div class="bell_circle"></div>
<div class="bell_under"></div> <div class="bell_light"></div>
</div> </div>
<div class="bodys">
<div class="body"></div> <div class="wraps"></div>
<div class="pocket"></div> <div class="pocket_mask"></div>
</div>
<div class="hand_right"> <div class="arm"></div>
<div class="circle"></div> <div class="arm_rewrite"></div>
</div>
<div class="hand_left"> <div class="arm"></div>
<div class="circle"></div> <div class="arm_rewrite"></div>
</div>
<div class="foot"> <div class="left"></div>
<div class="right"></div> <div class="foot_rewrite"></div>
</div>
</div>
</body> </html>