第一个小案列是自己写着玩的 ，小时候玩的小霸王游戏手柄
效果图：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="bd fl"></div>
<div class="bd fl"></div>
<div class="bd fl"></div>
<div class="bd fl"></div>
<div class="bd fl"></div>
<div class="by fl"></div>
<div class="by fl"></div>
<div class="by fl"></div>
<div class="by fl"></div>
<div class="bd fl"></div>
<div class="bd fl"></div>
<div class="bd fl"></div>
<div class="bd fl"></div>
<div class="by fl"></div>
<div class="by fl"></div>
<div class="by fl"></div>
<div class="by fl"></div>
<div class="bd fl"></div>
<div class="bd fl"></div>
<div class="bd fl"></div>
<div class="bd fl"></div>
<div class="by"></div>
<div class="by"></div>
<div class="by"></div>
<div class="by"></div>
<div class="bd"></div>
<div class="bd"></div>
<div class="bd fl"></div>
<!-- 十字 -->
<div class="fl" style="margin-left: 90px;margin-top: -240px;">
<div class="by" style="margin-left: -52px; top: 104px;"></div>
<div class="by fl"></div>
<div class="by fl"></div>
<div class="by fl"></div>
<div class="by" style="margin-top: 52px;margin-left: 52px;"></div>
<!-- 中间按键区 -->
<div class="br fl" style="left: 300px; top: -55px;" ></div>
<div class="br fl" style="left: 407px; top: -107px;"></div>
<!-- 四个 按键区 -->
<div class="br fl" style="left: 650px; top: -280px;"></div>
<div class="br fl" style="left: 650px; top: -220px;"></div>
<div class="br fl" style="left: 785px; top: -385px;"></div>
<div class="br fl" style="left: 785px; top: -325px;"></div>
</div>
<div class="bd fl"></div>
<div class="by fl"></div>
<div class="by fl"></div>
<div class="by fl"></div>
<div class="by fl"></div>
<div class="bd fl"></div>
<div class="bd fl"></div>
<div class="bd fl"></div>
<div class="bd fl"></div>
<div class="by fl"></div>
<div class="by fl"></div>
<div class="by fl"></div>
<div class="by fl"></div>
<div class="bd fl"></div>
<div class="bd fl"></div>
<div class="bd fl"></div>
<div class="bd fl"></div>
<div class="by fl"></div>
<div class="by fl"></div>
<div class="by fl"></div>
<div class="by fl" style="left: -52px; top:-54px;"></div>
<div class="bd fl" style="left: -104px; top:-108px;"></div>
<div class="bd fl" style="left: -156px; top:-160px;"></div>
<div class="bd fl" style="left: -208px; top:-212px;"></div>
<div class="bd fl" style="left: -260px; top:-264px;"></div>
</body>
</html>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 50px;
height: 50px;
}
.fl{
float: left;
}
#d1{
margin-top: 300px;
width: 800px;
height: 200px;
margin-left: 22%;
border: 1px solid black;
}
.bd
{
background-color: black;
position: relative;
border: 1px solid white;
}
.bc{
background-color: darkgray
position: relative;
border: 1px solid white;
}
.by{
background-color: yellow;
position: relative;
border: 1px solid white;
}
.br{
background-color: red;
position: relative;
border: 1px solid white;
}
</style>
![怎样使用SpringMVC控制页面[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)