CSS畫出一個(gè)可愛神奇的多啦A夢(mèng)

2024-07-11 08:25:43

字體：大中小

供稿：網(wǎng)友

小叮當(dāng)簡單顏色單一，操作起來也很容易上手。接下來的一個(gè)實(shí)例就是用css畫出一個(gè)多啦A夢(mèng)，首先將其分為頭部，和身體。然后，再根據(jù)身體各部分細(xì)節(jié)進(jìn)行進(jìn)一步的具體刻畫。

由于最近一直在學(xué)習(xí)JavaWeb方面的東西，所以，我的這個(gè)小叮當(dāng)就是用jsp頁面進(jìn)行映襯。

代碼如下：首先是寫jsp頁面，將其分成多個(gè)塊，然后再分塊操作：

XML/HTML Code復(fù)制內(nèi)容到剪貼板

<%@ 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>