<!DOCTYPE html>
     <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    
    <style type="text/css">
        ul{
            width: 100px;
            margin: 0;
            padding: 0;
            list-style: none;
        }
        a{
        
            text-decoration: none;
            
        }
     ul ul li{
            border: 1px red solid;
            border-bottom: 0;
            border-left: 0 ;
            border-right:0;
            
            
        } 
        .blog{
            border: 1px red solid;
        }
        
        .inner{
            display: none;
        } 
    </style>
    
    
    
</head>
<body>
    
    <ul>
        <li id="blog" class="blog">
            <a id="text"  href="javascript:;">博客</a>
              <ul id="inner" class="inner">
                  <li><a href="">博客评论</a></li>
                  <li><a href="">未读提醒</a></li>
             </ul>
        </li>
        
        
    </ul>
    
    <!-- js -->
    
    <script type="text/javascript">
    // 根据id获取
    var oLi=document.getElementById('blog');
    var oUL=document.getElementById('inner');
    // var oText=document.getElemntById('text');
    //绑定事件 元素.事件
    //鼠标左键单击事件 onclick
    // 鼠标移入事件 onmouseover
    //鼠标移出事件  onmouseout
    oLi.onmouseover=tab;
    
    function tab(){
        // alert(123);
        oUL.style.display='block';
        oLi.style.background = 'yellow';
        oLi.style.width='200px';
        // oText.style.fontStyle='25px';
        
    }
    oLi.onmouseout=function(){
        oUL.style.display='none';
        oLi.style.background='#FFFFFF'
        oLi.style.width='100px';
    
    }
    </script>
     </body>
  </html>

练习--设置样式

    <!DOCTYPE html>
     <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    body{margin: 0;}    
    
        #box{
            width: 100px;
            height: 100px;
            border: 2px solid #000000;
        }
    
        #bg{
            width: 100%;
            height: 100%;
            background: #000000;
            opacity: 0.4;
            position: absolute;
            top: 0;
            
        }
            #zzc{
            display: none;
            
        }
        .content{
            width: 300px;
            height: 300px;
            position: absolute;
              left: 40%;
              top:30%;
              border: 2px #000000 solid;
              background: #FFFFFF;
            
        }
        
            .content p{
                text-align: left;
                line-height: 50px;
            }
    
        p span{
            border: 1px #000000 solid;
            cursor: pointer;
            padding: 5px;
        
        }
    </style>
    <script src="js/text.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
    <p>请为下面div设置样式：<button id="btn" type="button">点击设置</button></p>
    <div id="box">
        
    </div>
    <div id="zzc">
          <div id="bg"></div>
          <div class="content" >
              <p>请准备颜色 &nbsp;&nbsp;&nbsp;
              <span id="red" class="red">红</span> 
               <span id="yellow" class="yellow">黄</span> 
                <span id="blue" class="blue">蓝</span>
                </p>
                <p>请选择div的宽
                
                <span id="w1" class="w1">200px</span> 
                 <span id="w2" class="w2">500px</span> 
                <span id="w3" class="w3">700px</span>
                
                </p>
                <p>请选择div的高
                     
                    
                    <span id="h1" class="h1">200px</span> 
                     <span id="h2" class="h2">500px</span> 
                    <span id="h3" class="h3">700px</span>
                    
                    
                </p>
                
                <p style="text-align: center;">
                    <button id="bt" type="button">恢复</button>
                    <button id="bt1" type="button">确定</button>
                </p>
          </div>
    </div>

</body>
</html>

text.js

window.onload=function(){
        
        
        var oBtn=document.getElementById('btn');
        var oBox=document.getElementById('box');
        var oBg=document.getElementById('bg');
        var oZzc=document.getElementById('zzc');
        
        var oRed = document.getElementById('red');
        var oYellow = document.getElementById('yellow');
        var oBlue = document.getElementById('blue');
        
        var oW1=document.getElementById('w1');
        var oW2=document.getElementById('w2');
        var oW3=document.getElementById('w3');
        
        var oh1=document.getElementById('h1');
        var oh2=document.getElementById('h2');
        var oh3=document.getElementById('h3');
        
        var oBt=document.getElementById('bt')
        var oBt1=document.getElementById('bt1')
        
        oBtn.onclick=function(){
            oZzc.style.display='block';
           }
        oRed.onclick=function(){
            oBox.style.background='red';
        }
        
        oYellow.onclick=function(){
            oBox.style.background='yellow';
        }
        
        oBlue.onclick=function(){
            oBox.style.background='blue';
        }
        
        
        oW1.onclick=function(){
            
            oBox.style.width='200px';
        }
            
            oW2.onclick=function(){
            
            oBox.style.width='500px';
        }
        
            oW3.onclick=function(){
            
            oBox.style.width='700px';
        }
        
        
        
        oh1.onclick=function(){
            
            oBox.style.height='200px';
        }
            
            oh2.onclick=function(){
            
            oBox.style.height='500px';
        }
        
            oh3.onclick=function(){
            oBox.style.height='800px';
        }
        
        oBt.onclick = function(){
            
            oBox.style.width='100px';
            oBox.style.height='100px';
            oBox.style.background='#FFFFFF';
        }
        
        
        oBt1.onclick = function(){
            
            oZzc.style.display= 'none';
        }
        
        
        
        
        }