第十五节（项目实战5-页面翻转） 

<style type="text/css">
            *{margin:0;padding:0;}
            body{background:url("images/bg.png");font-size:12px;font-family:"微软雅黑";color:#666;}
            img{border:0;}
            /*mini start*/
            .mini{width:698px;height:500px;margin:22px auto;}
            .mini .m_header{width:698px;height:30px;}
            .mini .m_header a{float:left;}
            .mini .m_header span{float:left;line-height:30px;margin-left:20px;}
            .mini .m_nav{width:698px;height:32px;margin-top:13px}
            .mini .m_nav ul li{list-style:none;float:left;line-height:32px;padding:0 16px;font-size:14px;color:#0B3B8C;}
            .mini .m_nav ul .sel{background:url("images/icon.png") no-repeat 25px -433px;color:#000;font-weight:bold;}
            .mini .m_content{width:698px;height:394px;margin-top:10px;}
            .mini .m_content .list{display:none;}
            .mini .m_content .show{display:block;}
            /*end mini*/

</style>



<body>

    <!--mini start-->
    <div class="mini">
        <div class="m_header">
            <a href="#"><img src="images/minilogo.png" alt="软件学院" width="150" height="30"/></a>
            <span>10月29日 &nbsp;&nbsp;&nbsp;&nbsp;周三&nbsp;&nbsp;中山市 &nbsp;&nbsp;小雨14°C</span>
        </div>
        <div class="m_nav">
            <ul id="m_ul">
                <li class="sel">新闻</li>
                <li>视频</li>
                <li>财经</li>
                <li>娱乐</li>
                <li>时尚</li>
                <li>体育</li>
                <li>科技</li>
                <li>汽车</li>
                <li>游戏</li>
                <li>军事</li>
                <li>微视</li>
            </ul>
        </div>
        <div class="m_content">
            <div class="list show"><img src="images/1.jpg" alt="" width="674" height="394" /></div>
            <div class="list"><img src="images/2.jpg" alt="" width="674" height="394" /></div>        
            <div class="list"><img src="images/3.jpg" alt="" width="674" height="394" /></div>
            
            <!--这里有很多的list-->

        </div>
    </div>
    <!--end mini-->

<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
    $("#m_ul").find("li").hover(function(){
        $(this).addClass("sel").siblings().removeClass("sel");
        var _index = $(this).index();
        $(".list").hide().eq(_index).show();
    });
</script>

</body>





 






		

		
posted @ 
2015-01-25 10:19 
哥的笑百度不到 
阅读(225) 
评论(0) 
 
收藏 
举报