<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日 周三 中山市 小雨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>
