码迷,mamicode.com
首页 > 其他好文 > 详细

星座运势

时间:2018-03-22 20:04:32      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:html   ...   content   技术分享   load   自己的   size   img   abs   

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    *{margin: 0;padding: 0;}
    a{ text-decoration:none; }
    
    .box{
         width: 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;
        width: 50px;
        float: left;
        background:url(astroIcon.png)  no-repeat ;
        
    }
    
    

    .xz{
        float: left;
        width: 220px;
        height: 70px;
        margin: 8px 0 0 8px;
    }

    .xza{
        float: left;
    }
    .xza p{
        display: inline-block;
    }
    .xza .yunshi {
        display: inline-block;
        width: 80px;
        height: 13px;
        background: url(yunshi.png)  no-repeat ;
        position: relative;
    }

    .xza .star{
        display: inline-block;
        width: 80px;
        height: 13px;
        position: absolute;
        top:0px;
        left:0px;
        background: url(yunshi.png) no-repeat  left bottom;

    }
    .xzt{
        width: 180px;
        height: 22px;
        display: block;
        margin-bottom: 8px;
    }

    
    .down{
        width: 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>

技术分享图片技术分享图片

星座运势

标签:html   ...   content   技术分享   load   自己的   size   img   abs   

原文地址:https://www.cnblogs.com/zhoujingguoguo/p/8626037.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!