请问一下出现这种是为什么呀？
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<link type="text/css" rel="stylesheet" href="practice.css">
</link>
<script src="js/setHomeSetFav.js" charset="gb2312" type="text/javascript"></script>
<script type="text/javascript" src="js/myfocus-2.0.1.min.js"></script>
<script src="js/mf-pattern/my_fancy.js" type="text/javascript">
</script>
<link href="js/mf-pattern/my_fancy.css" type="stylesheet" type="text/css">
<script type="text/javascript">
//设置
myFocus.set({
id: 'picBox', //ID
pattern: 'mF_fancy' //风格
});
</script>
</head>
<div class="box">
<div class="title">
<div class="title_left">
<img src="http://img1.sycdn.imooc.com//53edadad0001efe202000070.jpg">
</div>
<div class="title_right">
<ul>
<li><a href="#">首页</a>
<li><a href="#">产品特色</a>
<li><a href="#">解决方案</a>
<li><a href="#">产品价格</a>
<li><a href="#">帮助中心</a>
<li><a href="#">关于我们</a>
</ul>
</div>
</div>
<div class="ad" id="picBox">
<div class="loading"><img src="images/loading.gif" alt="图片加载中..."></div>
<div class="pic">
<ul>
<li><img src="images/ad2.jpg" /></li>
<li><img src="images/ad3.jpg" /></li>
<li><img src="images/ad4.jpg" /></li>
</ul>
</div>
</div>
</div>
<body>
</body>
</html>
* {
padding: 0;
margin: 0;
}
.box {
width: 1000px;
margin: 0 auto;
}
.title {
height: 70px;
}
.title_left img {
float: left;
}
.title_right li {
list-style-type: none;
display: inline-block;
width: 100px;
margin: 0 10px 0 0;
text-align: center;
}
.title_right li a {
display: inline-blcok;
text-decoration: none;
height:70px;
padding: 5px 10px;
color: black;
line-height: 70px;
}
.title_right li:link,
.title_right li:visited {
display: inline-blcok;
text-decoration: none;
color: black;
}
.title_right li:hover,
.title_right li:active {
display: inline-blcok;
text-decoration: none;
color:#fffff;
background: #A52A2A;
}
.pic{
height: 310px;
overflow: hidden;
}
