(篇幅有点长,请大家耐心观看,在这里谢谢大家)大家帮我看看,我这代码哪里写错了?不会滚动,而且加载的gif图片还占用了各种的位置,导致banner显示不全。

来源:3-8 企业网站制作之焦点图制作

qq_我只是昵称_03946678

2016-09-20 15:04

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<link href="css/main.css" rel="stylesheet" type="text/css"/>

<script src="js/setHomeSetFav.js"type="text/javascript" charset="gb2312"></script>

<script src="js/mfocus-2.0.1.min.js"type="text/javascript"></script>

<script src="js/js/mf-pattern/mF_dleung.js"type="text/javascript"></script>

<script type="text/javascript">myFocus.ste({id:"picBox"})</script>

<link href="js/js/mf-pattern/mF_dleung.css"rel="stylesheet" type="text/css"/>

</head>


<body>

<div class="top">

  <div class="top_content">

                <ul>

                            <li><a href="#">联系我们</a></li>

                                <li><a href="#" noclick="AddFavorite(window.location,docunment.title)">加入收藏</a></li>

                                 <li><a href="#"  noclick="SetHome(window.location)">设为首页</a></li>

                                

                            </ul>

                </div>

</div><!--top结束-->

<div class="wrap">

<div class="logo">

    <div class="logo_left">

                <a href ="#"><img src="images/logo.jpg" alt="慕课网"/></a>

                </div>

                <div class="logo_right">

                <img src="images/tel.jpg" alt="服务热线"/>24小时服务热线:<span class="tel">45-4444-56</span>

                </div>

    </div><!--logo结束-->

    <div class="nav">

    <div class=" nav_left"></div>

        <div class="nav_mid">

        <div class="nav_mid_left">

            <ul>

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

            <div class="nav_mid_right">

            <form action="" method="post">

                <input type="text" class="search_text"/>

                </form>

            </div>

        </div><!--nav_mid结束-->

        <div class="nav_right"></div>

    </div><!--nav结束-->

    <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><!--ad结束-->

 <div class="main">

  <div class="news"></div>

    <div class="course"></div>

    <div class="sidebar"></div>

 </div><!--main结束-->

</div><!--wrap结束-->

</body>

</html>

@charset "utf-8";
/* CSS Document */

*{
 margin:0;
 padding:0;
 font-size:12px;
	}
	body
	{
	background-colr:#F5F5F5;	
		}
   .top
   {
	width:100%;
	height:27px;
	background: url(../images/top_bg.jpg) repeat-x;
	   }
	   .top_content
	   {
		   width:1000px;
		   margin:0 auto;
		   }
		   .top_content li
		   {
			 list-style-image:url(../images/li_bg.gif);
			 float:right;
			 width:70px;  
			 line-height:27px;
			   }
			   
			   .top_content a:link,.top_content a:visited
			   {
				  color :#333;
				  text-decoration:none;
				   }
		   .top_content  a:hover,.top_content a:active
		   {
			  color:#900;
			  text-decoration:none; 
			   
		   }
		   .wrap
		   {
			   width:1000px;
			   margin:0 auto;
			   }
			   .logo
			   {
				 height:80px;
				 background-color:#FFF;  
				   
				   }
				   .logo_left
				   {
					 width:200px;
					 float:left;  
					   
					   }
					   .logo_right
					   {
						 width:300px;
						 float:right;
						 heighl:28px;
						 margin-top:30px; 
						 color:8e8e8e; 
						   
						   }
						   .logo_right img
						   {
							vertical-align:middle;
							margin-right:10px;   
							   
							   }
							   
							   .tel
							   {
								 font-family:"微软雅黑";
								 font-size:16px; color:#c00;
								   
								   }



.nav
{
	
height:40px;	
	
	}

.nav_left
{
	
width:10px; 
 background:url(../images/nav_left.jpg) no-repeat;

	}
	
.nav_mid
{
width:980px;
background:url(../images/nav_bg.jpg) repeat-x;
	
	
	}
.nav_right
{
width:10px;
 background:url(../images/nav_right.jpg) no-repeat;

	
	
	}
.nav_left,.nav_mid,.nav_right
{
 float:left;
 height:40px;	
	
	}

.nav_mid_left 
{
	width:680px;

	}

.nav_mid_right
{
	width:300px;

	
	}

.nav_mid_right,.nav_mid_left 
{
	float:left;
			
	
	}
	

.nav_mid_left li
{
	float:left;
	list-style-type:none;/*li消除小圆点*/
	width:100px;
	text-align:center;
	line-height:40px;
	
	
	}


.nav_mid_left  a:link,.nav_mid_left a:visited/*链接的初始状态link,访问状态visited*/
{
	text-decoration:none;/*清除下划线*/
	color:#fff;
	font-family:"微软雅黑";
	font-size:16px;
	
	
	}


.nav_mid_left  a:hover,.nav_mid_left a:active/*鼠标经过状态hover,鼠标点击状态active*/
{
	text-decoration:none;/*清除下划线*/
	color:#FF0;
	font-size:16px;
	font-family:"微软雅黑";
	
	}

.search_text
{
	width:190px;
	height:25px;
	margin-top:7px;/*离顶部距离7px*/
	background:url(../images/search.jpg) no-repeat right center;/*放大镜图标,不连续,右,中对齐*/
	background-color:#fff;/*填充搜索框白色*/
	padding-right:25px;/*//填充放大镜图标,以防输入盖过文字*/
	border:1px;/*<!--边框线-->*/
	
	
	}
	
 .ad
 { 
 height:310px;
 overflow:hidden;/*<!--当内容溢出biv时,隐藏	--> */
	 
	 }

http://img.mukewang.com/57e0df370001586313660639.jpg

写回答 关注

3回答

  • qq_顶着西瓜皮的籽_03776560
    2016-09-20 16:43:48

    文件位置没错吧,你要注明你的风格:pattern:mF_dleung

  • qq_顶着西瓜皮的籽_03776560
    2016-09-20 15:30:34

    还有你说的图片不会滚动,应该是要在myFocus.set方法下面指明它的pattern

    qq_我只是...

    额 意思就是我给的文件位置给错了? 没有完全领会你的回答。

    2016-09-20 15:48:03

    共 1 条回复 >

  • qq_顶着西瓜皮的籽_03776560
    2016-09-20 15:27:34

    我用ie浏览器是这样,换了个浏览器就好了。

    qq_我只是...

    还有这样的事,呵呵。好了,谢谢

    2016-09-20 15:53:08

    共 1 条回复 >

企业网站综合布局实战

本课程重点介绍HTML/CSS实现常见企业网站布局的方法

157042 学习 · 1984 问题

查看课程

相似问题