为了账号安全,请及时绑定邮箱和手机立即绑定

不知道怎么回事,救救孩子吧

http://img1.sycdn.imooc.com//60d00141000103ed11150538.jpg<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <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/myfocus-2.0.1.min.js" type="text/javascript"></script>

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

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

    <script type="text/javascript">

        myFocus.set({

           id:'picbox'

        })

    </script>

     <style>

        *{

          margin:0;

          padding: 0;

          font-size: 12px;

        }

        body{

          background-color: #f5f5f5;

        }

        .top{

          width: 100%;

          height: 27px;

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

          background-repeat: 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:990px;

          margin:0 auto;

        }

        .logo{

          height: 80px;

        }

        .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-left{

          width: 10px;

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

          background-repeat: no-repeat;

          float:left;

         }

         .nav-mid{

          width: 980px;

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

          background-repeat: repeat-x;

          float:left;

         }

         .nav-right{

          width:10px;

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

          background-repeat: no-repeat;

          float:left;

         }

         .nav-left,.nav-mid,.nav-right{

            float:left;

            height: 40px;

         }

         .nav-mid-left,.nav-mid-right{

           float:left;

           

         }

         .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 a:link,.nav-mid-left a:visited{

          text-decoration: none;

          color: #fff;

          font-size: 16px;

          font-family: "微软雅黑";

         }

          .nav-mid-left 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: 7px;

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

          background-repeat: no-repeat;

          background-position: right center;

          background-color: #fff;

          padding-right: 25px;

         }

         .ad{

          width:990px;

          height: 310px;

          overflow: hidden;

         }

     </style>

  </head>

 <body>

    

    <div class="top">

        <div class="top-content">

           <ul>

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

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

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

           </ul>

        </div>

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

 

    <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-left"></div>

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

                    <div class="nav-mid-right">

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

                           <input type="text" class="search-text">

                        </form>

                    </div>

                  </div>

               <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" alt=""></li>

                      <li><img src="images/ad3.jpg" alt=""></li>

                      <li><img src="images/ad4.jpg" alt=""></li>

                    </ul>

              </div>

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

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

  </body>

</html>


正在回答

3 回答

检查一些导航部分的浮动,上面多出来的那部分应该是导航的左侧部分

0 回复 有任何疑惑可以回复我~

检查一些导航部分的浮动,上面多出来的那部分应该是导航的左侧部分

0 回复 有任何疑惑可以回复我~

我遇到同样问题,但是在.nav{ }里加了个display:flex;就好了,也不知道为啥

1 回复 有任何疑惑可以回复我~

我也是这样,跟着她的做不行,会乱

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

不知道怎么回事,救救孩子吧

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信