<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
a{ text-decoration:none; }
.box{
300px;
height: 200px;
margin: 100px auto;
border: 1px solid red;
padding: 10px 20px 20px 20px;
}
.tops{
height: 34px;
}
.tops a{
color: rgb(8, 115, 192);
font-size: 18px;
}
.top{
height: 80px;
overflow: hidden;
}
.icon{
height: 50px;
50px;
float: left;
background:url(astroIcon.png) no-repeat ;
}
.xz{
float: left;
220px;
height: 70px;
margin: 8px 0 0 8px;
}
.xza{
float: left;
}
.xza p{
display: inline-block;
}
.xza .yunshi {
display: inline-block;
80px;
height: 13px;
background: url(yunshi.png) no-repeat ;
position: relative;
}
.xza .star{
display: inline-block;
80px;
height: 13px;
position: absolute;
top:0px;
left:0px;
background: url(yunshi.png) no-repeat left bottom;
}
.xzt{
180px;
height: 22px;
display: block;
margin-bottom: 8px;
}
.down{
290px;
height: 90px;
}
.down p{
color: rgb(17, 18, 19);
line-height: 30px;
font-size: 17px;
font-family: 宋体;
}
.down a{
color: rgb(59, 99, 159);
}
</style>
<script>
window.onload = function(){
function $(id){return document.getElementById(id);}
var sele = document.getElementById("sele");
var arr = [10,5,8,7];
var textArr = ["今天是白羊座","今天是金牛座","今天是双子座","今天是巨蟹座"];
sele.onchange = function(){
$("ico").style.backgroundPosition = "0"+(-this.value*50)+ "px";
$("ys").style.width = arr[this.value]*8+ "px"; //一共分成10份,每份是8,运势是9,所以是9*8
$("content").innerHTML = textArr[this.value];
}
}
</script>
</head>
<body>
<div class="box">
<div class="tops"><h3><a href="#">星座运势</a></h3></div>
<div class="top">
<div class="icon" id="ico">
<a href="#" class="ic" ></a>
</div>
<div class="xz">
<div class="xza">
<select id="sele">
<option value="0">白羊座(03.21-04.19)</option>
<option value="1">金牛座(04.20-05.20)</option>
<option value="2">双子座(04.20-05.20)</option>
<option value="3">巨蟹座(04.20-05.20)</option>
</select>
<div>
<p>今日运势:</p>
<div class="yunshi" >
<span class="star" id="ys"></span>
</div>
</div>
</div>
</div>
</div>
<div class="down" id="content">
<p>今天情绪容易受到社交方面的影响，特别是子女方面也容易产生影响，会有一些小人损友损害到自己的...<a href="#">[详细]</a></p>
</div>
</div>
</body>
</html>
