为什么我的图片不能轮播而且还跟菜单栏没法居中?

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

WJJJJJ

2017-08-06 09:33

<!DOCTYPE html>

<html>

<head>

<!--myFoucs库文件及调用内容-->

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

</script>

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

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

<script type="text/javascript">

myfocus.set({id:"picBox"})

</script>

<style type="text/css">

.top{

width: 1000px;

height: 27px;

background-color: #FFFAFA ;

}

.top_content{

width: 1000px;

background-image: url(images/top_bg.jpg);

}

.top_content li{

float: right;

width: 70px;

line-height: 27px;

}

.top_content a:link,.top_content a:visited{

text-decoration: none;

color:#FF7F50  ;

}

.top_content a:hover,.top_content a:active{

text-decoration: none;

color: #008B8B ;

}

.wrap{

width: 1000px;

margin: 0 auto ;

}

.logo{

height: 80px;

background-color: white;

}

.logo_left{

width: 200px;

float: left;

}

.logo_right{

width: 300px;

float: right;

height: 28px;

margin: 30px;

}

.logo_right img{

vertical-align: middle;

margin-right: 10px;

}

.tel{

font-family: "微软雅黑";

font-size: 20px;

color: red;

}

.nav_left{

height: 40px;

width: 10px;

float: left;

background: url(images/nav_left.jpg)no-repeat;

}

.nav_mid{

height: 40px;

width: 960px;

float: left;

background: url(images/nav_bg.jpg) repeat-x;

}

.nav_mid_left{

width: 680px;

}

.nav_mid_right{

width: 300px;

float: right;

height: 20px;

}

.nav-right{

height: 40px;

width: 10px;

float: 10px;

background: url(images/nav_right.jpg) no-repeat;

}

.nav_mid_left li{

float:left;

list-style-type: none;

width:100px;

text-align: center;

height: 40px;

}

.nav_mid_left a:link,.nav_mid_left a:visited{

color: white;

text-decoration: underline;

font-size: 16px;

font-family: Lobster;

}

.nav_mid_left a:hover,.nav_mid_left a:active{

color: yellow;

text-decoration: underline;

font-size: 16px;

font-family: Lobster;

}

.search_text{

width: 100px;

height: 15px;

margin: 0 auto;

background:url(images/search.jpg) no-repeat right center white;

    padding-right: 25px;

    border: 1px,white,solid;

}

.ad{

width: 1000px;

height: 310px;

overflow: hidden;

}

</style>

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

<title></title>

</head>

<body>

<div class="big">

<!--top区域-->

<div class="top">

<div class="top_content">

<ul>

<li><a href="#">L</a></li>

<li><a href="#">F</a></li>

<li><a href="#">Z</a></li>

</ul>

</div>

</div>

</div>

 <!--中间区域-->

 <div class="wrap">

  <div class="logo">

  <div class="logo_left"><img src="images/logo.jpg" alt="imooc"></div>

    <div class="logo_right"><img src="images/tel.jpg" alt="tel"><span class="tel">142857</span></div>

 </div>

 <!--导航部分-->

<div>

<div class="nav ">

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

<div class="nav_mid">

   <div class="nav_mid_left">

<div>

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

   <div class="nav_mid_right">

<form action="save.php" method="post"> 

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

</form>

   </div>

</div>

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

</div>

<!--动态图片制作-->

<div class="ad" id="picBox">

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

</body>

</html>>


写回答 关注

0回答

还没有人回答问题,可以看看其他问题

企业网站综合布局实战

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

157042 学习 · 1984 问题

查看课程

相似问题