                        課程
                    
                        /前端開發
                        
                            /HTML/CSS
                        
                        /企業網站綜合布局實戰

請問一下出現這種是為什么呀？

<!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;

}