head部分
<head>
<title>h-3.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="js/jquery1.4.2.js" type='text/javascript'></script>
<link rel="stylesheet" type="text/css" href="css/jobbasic.css">
<script>
$(function(){
$('.rightInnerDiv3 div').click(function(){
$('.zhe1').slideDown('1000');
$('.zhe2').text($(this).text());
$('.zhe2').css("background-color",$(this).css("background-color"));
$('.zhe2').slideDown('1000');
$('.zhe2').click(function(){
$('.zhe1').slideUp("1000");;
$('.zhe2').slideUp("1000");;
});
});
})
</script>
<style>
<!--
html {
font-family: 微软雅黑;
}
.rightInnerDiv3 {
width: 700px;
margin-top: 90px;
height: 150px;
margin-left: -15px;
text-align: center;
line-height: 50px;
}
.rightInnerDiv3 div {
float: left;
width: 70px;
height: 70px;
text-align: center;
margin-left: 48px;
background-color: #F1F1F1;
cursor: pointer;
border-radius: 20px;
line-height: 30px;
opacity: 0.9;
}
.rightInnerDiv3 div:hover {
background-color: #fff;
color: black;
}
.zhe1{
width: 100% ;
height: 100% ;
opacity: 0.8;
border-radius: 10px;
background-color: #ddd;
z-index: 6;
display: none;
position: absolute;
}
.zhe2{
float:left;
width: 20% ;
height: 100px ;
opacity: 0.8;
margin:0 auto;
margin-top:200px;
border-radius: 10px;
background-color: #FFF;
z-index: 7;
display: none;
position: absolute;
margin-left: 450px;
font-size: 20px;
line-height: 100px;
text-align: center;
cursor: pointer;
}
-->
</style>
</head>
<div class="zhe1">
<div class="zhe2" ></div>
</div>
**body部分**
<div class="rightInnerDiv3">
<div style="line-height: 70px; background-color: #ffd700;">
满意
</div>
div>