美文网首页
2018-07-24

2018-07-24

作者: wlki | 来源:发表于2018-07-24 11:01 被阅读0次

    1.左边栏

    css样式

    *{margin:0px;padding:0px;}
    a{text-decoration:none;}

    menu{width:210px;height:468px;background:#C81623;position:relative;left:70px;top:120px;}

    menu ul li{list-style:none;width:100%;height:30px;/background:blue;/line-height:30px;}

    menu>ul>li{/color:white;/font-size:14px;/font-size:16px;//font-family:微软雅黑 ;/font-family:microsoft yahei;}

    menu>ul>li>a{color:white;margin-left:10px;}

    menu>ul>li>span{float:right;margin-right:10px;color:#F7F7F7;}

    menu>ul>li:hover>a{color:#C81623;}

    menu>ul>li>ul{width:300px;height:468px;background:#CCC;/display:none;/position:absolute;top:0px;left:210px;display:none;}

    menu>ul>li>ul>li{height:30px;width:100%;}

    menu>ul>li>ul>li>a{color:black;margin-left:10px;}

    div

    <div id="menu">
    <ul>
    <li>
    <a href="#">家用电器</a><span>></span>
    <ul>[]
    <li><a href="">大家电</a></li>
    <li><a href="">小家电</a></li>
    <li><a href="">生活电器</a></li>
    </ul>
    </li>
    <li>
    <a href="#">手机、数码</a><span>></span>
    <ul>
    <li><a href="">手机通讯</a></li>
    <li><a href="">京东通讯</a></li>
    <li><a href="">运营商</a></li>
    </ul>
    </li>
    <li><a href="#">电脑、办公</a><span>></span></li>
    <li><a href="#">家具、家居</a><span>></span></li>
    <li><a href="#">男装、女装</a><span>></span></li>
    <li><a href="#">宠物、保洁</a><span>></span></li>
    <li><a href="#">运动、户外</a><span>></span></li>
    <li><a href="#">图书、电子书</a><span>></span></li>
    <li><a href="#">图书、电子书</a><span>></span></li>
    <li><a href="#">图书、电子书</a><span>></span></li>
    <li><a href="#">图书、电子书</a><span>></span></li>
    <li><a href="#">图书、电子书</a><span>></span></li>
    <li><a href="#">图书、电子书</a><span>></span></li>
    <li><a href="#">图书、电子书</a><span>></span></li>
    <li><a href="#">图书、电子书</a><span>></span></li>
    </ul>
    </div>
    script

    二级联动菜单
    获取第一级所有的菜单li

    var lis = document.getElementById('menu').children[0].children;
    遍历,给每一个li,设置over事件

        for(var i=0;i<lis.length;i++){
            // 鼠标进入
            lis[i].onmouseover = function(){
                // 当前元素的背景,设置为灰色
                this.style.background = '#F7F7F7';
    
                // 子元素ul显示
                this.children[2].style.display = 'block';
                // console.log(this.children[0]);
            }
    
            // 鼠标离开
            lis[i].onmouseout = function(){
                // 取消背景
                this.style.background = '';
    
                // 当鼠标离开时,儿子ul隐藏
                this.children[2].style.display = 'none';
            }
        }
        var love = document.getElementById('menu').children[0].children[0].children[2].children;
        for(var i=0;i<love.length;i++){
            // 鼠标进入
            love[i].onmouseover = function(){
                // 当前元素的背景,设置为灰色
                this.style.background = '#F7F7F7';
    
                // 子元素ul显示
                
                // console.log(this.children[0]);
            }
            // 鼠标离开
            love[i].onmouseout = function(){
                // 取消背景
                this.style.background = '';
    
                // 当鼠标离开时,儿子ul隐藏
                // this.children[2].style.display = 'none';
            }
        }
    

    2.点击换色标题栏

    css样式

    *{margin:0;padding:0;}
    li{list-style: none;}
    a{text-decoration: none;}
    .skin{margin-top:50px;}
    .skin>li{width:10px;height:10px;margin-right: 20px;}.skin>li:first-child{background: #f00;}
    .skin>li:nth-child(2){background: #0f0;}
    .skin>li:nth-child(3){background: #000;}
    ul{width:500px;margin:0 auto;overflow: hidden;}
    .nav{background: red;}
    .nav{margin-top:10px;}
    .nav>li>a{display: inline-block;width:82px;height:35px;line-height: 35px;color:#fff;
    text-align: center;border-left:1px solid #fff;}
    div

    <div>
    <ul class='skin'>
    <li class='red'></li>
    <li class='blue'></li>
    <li class='black'></li>
    </ul>
    <ul class='nav'>
    <li><a href="#">新闻</a></li>
    <li><a href="#">电影</a></li>
    <li><a href="#">娱乐</a></li>
    <li><a href="#">体育</a></li>
    <li><a href="#">音乐</a></li>
    <li><a href="#">旅游</a></li>
    </ul>
    </div>
    script

    var arr=['pink','purple','yellow'];
    var skin=document.querySelectorAll('.skin>li');
    var nav=document.querySelector('.nav');
    var body=document.querySelector('body');
    for(var i=0;i<skin.length;i++){
    skin[i].onclick=function(){
    var num=arr[i];
    console.log(num);
    var a=this.className;
    console.log(a);
    this.style.background='#fff';
    b='5px solid'+'\t'+a;
    console.log(b);
    this.style.border=b;
    console.log(this.style.border);
    nav.style.background=a;
    console.log(nav.style.background);
    console.log(arr[num]);
    body.style.background=arr[num];
    }
    }

    相关文章

      网友评论

          本文标题:2018-07-24

          本文链接:https://www.haomeiwen.com/subject/pijemftx.html