<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="JS/jquery-1.7.2.min.js"></script>
<style type="text/css">
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.db {
z-index: 100;
position: absolute;
margin: 0 auto;
top: -5px;
height: 40px;
width: 300px;
background-color: #FFC125;
border-radius: 5px;
}
.dbback {
top: 300px;
position: relative;
margin: 0 auto;
background-color: #CDC9C9;
height: 40px;
width: 300px;
border-radius: 5px;
}
.d1 {
border-radius: 5px;
margin-left: 5px;
margin-top: 9px;
float: left;
height: 27px;
width: 27px;
background-color: #CDC9C9;
}
.d2 {
text-align: center;
line-height: 27px;
color: white;
border-radius: 5px;
margin-top: -5px;
height: 27px;
width: 27px;
background-color: #FF4500;
cursor: pointer;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<div class="dbback">
<div class="db">
<div class="d1">
<div class="d2">1</div>
</div>
<div class="d1">
<div class="d2">2</div>
</div>
<div class="d1">
<div class="d2">3</div>
</div>
<div class="d1">
<div class="d2">4</div>
</div>
<div class="d1">
<div class="d2">5</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
<script type="text/javascript">
$(".d2").mousedown(function () { $(this).css("marginTop", "0px"); });
$(".d2").mouseup(function () { $(this).css("marginTop", "-5px"); });
</script>
时间： 2024-12-27 09:33:30