问答详情
源自:3-8 企业网站制作之焦点图制作

焦点图在wrap框架之外?

.ad {    height: 310px;    width: 1000px;    margin: 0 auto;    overflow: hidden;    clear: both; } 为什么我的要设置宽度和margin、clear之后才会有一样的效果,不然会跑到wrap的框架之外

提问者:慕婉清5048815 2016-05-03 17:41

个回答

  • 188_整垮互联网
    2016-05-04 14:04:14
    已采纳

    CSS样式表也要啊

  • 188_整垮互联网
    2016-05-04 15:28:27

    你的<div class="wrap">居然在</div><!--nav结束-->这个位置就结束了,也就是说div结束位置错了,你的注释也就错了

  • 188_整垮互联网
    2016-05-04 15:25:49

    根据你发过来的,我看了一下。你的类选择器为wrap的div跟它结束的DIV不匹配,也就是说你的焦点图DIV并没有嵌套在WRAP这个DIV里。你最好理清楚哪个是哪个结束语,不然很容易混淆了

  • 慕婉清5048815
    2016-05-04 14:39:51

    *
    {
       margin: 0;
       padding: 0;
       font-size: 12px;
    }

    body
    {
       background-color: #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: #8E8E8E;
       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: #ffffff;
    }

    .logo_left
    {
       width: 200px;
       float: left;
    }

    .logo_right
    {
       width: 300px;
       float:right;
       height: 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_mid
    {
       width: 1000px;
       background: url("../images/nav_bg.jpg")repeat-x;
       float: left;
    }

    .nav_mid_left,.nav_mid_right
    {
       float: left;
    }
    .nav_mid_left
    {
       width: 680px;
    }
    .nav_mid_left
    {
       width: 680px;
    }
    .nav_mid_right
    {
       width: 300px;
    }

    .nav_mid_left li
    {
       float: left;
       list-style-type: none;
       width: 100px;
       text-align: center;
       line-height: 40px;
    }

    .nav_mid_left li a:link,.nav_mid_left a:visited
    {
       text-decoration: none;
       color: #FFF;
       font-size: 16px;
       font-family: 微软雅黑;
    }

    .nav_mid_left li a:hover,.nav_mid_left a:active
    {
       text-decoration: none;
       color: #FF0;
       font-size: 16px;
       font-family: 微软雅黑;
    }

    .search_text
    {
       width: 190px;
       height: 25px;
       margin-top: 5px;
       background: url("../images/search.jpg")no-repeat right center;
       background-color: white;
       padding-right: 25px;
       border: 1px solid white;
    }

    .ad
    {
       height: 310px;
       width: 1000px;
       margin: 0 auto;
       overflow: hidden;
       clear: both;
    }

  • 慕婉清5048815
    2016-05-04 13:48:27

    <div class="wrap">
       <div class="logo">
           <div class="logo_left">
           <img src="images/logo.jpg" alt="慕课网"/>
           </div>
           <div class="logo_right">
           <img src="images/tel.jpg" alt="服务热线"/>24小时服务热线:<span class="tel"> 123-456-7890</span>
           </div>
       </div><!--logo结束-->
       <div class="nav">
           <div class="nav_mid">
             <div class="nav_mid_left">
               <ul>
                   <li><a href="#">首页</a> </li>
                   <li><a href="list.html">关于慕课</a> </li>
                   <li><a href="list.html">新闻动态</a> </li>
                   <li><a href="list.html">课程中心</a> </li>
                   <li><a href="list.html">在线课程</a> </li>
                   <li><a href="list.html">人才招聘</a> </li>
               </ul>
             </div>
                 <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>

  • 慕婉清5048815
    2016-05-04 13:47:26

    <div class="wrap">
       <div class="logo">
           <div class="logo_left">
           <img src="images/logo.jpg" alt="慕课网"/>
           </div>
           <div class="logo_right">
           <img src="images/tel.jpg" alt="服务热线"/>24小时服务热线:<span class="tel"> 123-456-7890</span>
           </div>
       </div><!--logo结束-->
       <div class="nav">
           <div class="nav_mid">
             <div class="nav_mid_left">
               <ul>
                   <li><a href="#">首页</a> </li>
                   <li><a href="list.html">关于慕课</a> </li>
                   <li><a href="list.html">新闻动态</a> </li>
                   <li><a href="list.html">课程中心</a> </li>
                   <li><a href="list.html">在线课程</a> </li>
                   <li><a href="list.html">人才招聘</a> </li>
               </ul>
             </div>
                 <form action="" method="post">
                     <input type="text" class="search_text"/>
                 </form>
             </div>
           </div><!--nav_mid结束-->
           <div class="nav_right"></div>

  • 188_整垮互联网
    2016-05-03 22:19:55

    你的全部代码发过来看下啊,只有这点,看不出你哪里出错的。有可能是你的焦点图这个DIV没有嵌套在WRAP这个DIV里面。


  • 188_整垮互联网
    2016-05-03 22:17:34

    你为什么要设置margin: 0 auto?