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

设置margin不起作用,无法将代码中的lb块和news块隔开

<!DOCTYPE HTML>

<html>

  <head>

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

    <title>企业网站</title>

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

    <script src="http://demo.jb51.net/js/myfocus/content/templates/myfocus/js/myfocus-2.0.1.min.js"></script>

    <script type="text/javascript">

        myFocus.set({

            id:'idbox'

        });

    </script>

  </head>

  <body>

  <div class="header">

      <div class="logo"><img src="http://img1.sycdn.imooc.com//53edadad0001efe202000070.jpg"></div>

      <div class="nav">

          <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="wrap">

      <div class="center">

          <div class="lbt" id="idbox">

              <div class="loading"><img src="http://img1.sycdn.imooc.com//53edad8c000175cb00300029.jpg"></div>

              <div class="pic">

                  <ul>

                      <li><img src="http://img1.sycdn.imooc.com//53edad3e0001afad10000318.jpg">

                      </li>

                      <li><img src="http://img1.sycdn.imooc.com//53edad2c0001b61310000314.jpg">

                      </li>

                      <li><img src="http://img1.sycdn.imooc.com//53edad1600019ae910000310.jpg">

                      </li>

                  </ul>

              </div>

          </div>

          <div class="news">

              <div class="news_top">

                  <ul>

                      <li><a href="#">滚动新闻</a></li>

                      <li><a href="#">这是滚动新闻</a></li>

                  </ul>

              </div>

              <div class="news_bottom">

                  <ul>

                      <li><img src="http://img1.sycdn.imooc.com//53edad54000119fb03300130.jpg"><span>玩转bootstrap</span></li>

                      <li class="mr_3"><img src="http://img1.sycdn.imooc.com//53edad690001260a03300130.jpg"><span>企业网站实战</span></li>

                      <li><img src="http://img1.sycdn.imooc.com//53edad7a0001cde803300130.jpg"><span>javascript基础</span></li>

                  </ul>

              </div>

          </div>

          <div class="lb">

              <div class="xw">

                  <div class="xw_top">新闻中心</div>

                  <div class="xw_bottom">

                      <ul>

                          <li><span>8月23日</span><h2>培训计划“安卓工程师养成”</h2><p>想成为安卓工程师?没有任何基础,不知道从何学起?想开发一款属于自己的APP?</p></li>

                          <li><span>8月23日</span><h2></h2><p></p></li>

                          <li><span>8月23日</span><h2></h2><p></p></li>

                      </ul>

                  </div>

              </div>

              <div class="hd"></div>

              <div class="lx"></div>

          </div>

      </div>

      <div class="footer"></div>

  </div>

  </body>

</html>



*{

    margin:0;

    padding:0;

    font-family:"微软雅黑";}

.header{

    width:100%;

    height:80px;

}

.logo{

    float:left;

    margin-right:10px;}

.nav li{

    float:left;

    list-style:none;

    text-align:center;

}

.nav a:link,.nav a:visited{

    text-decoration:none;

    display:block;

    width:110px;

    height:65px;

    line-height:65px;

    color:black;

    font-family:"微软雅黑";

}

.nav a:hover{

    background-color:red;

}

.wrap{

    width:1000px;

    margin:0 auto;

}


.lbt{

    height:310px;

    width:1000px;

    overflow:hidden;

}


.news_top{

    height:40px;

    background-color:gray;

    margin-top:10px;

}

.news_top li{

    list-style:none;

    float:left;

    text-align:center;

}

.news_top a:link,.news_top a:visited{

    display:block;

    height:40px;

    width:100px;

    text-decoration:none;

    color:white;

    font-family:"微软雅黑";

    line-height:40px;

}

.news_top a:hover{

    background-color:red;

}

.news_bottom{

    margin-top:10px;

    margin-bottom:20px;

}

.news_bottom li{

    list-style:none;

    float:left;

    width:330px;

    text-align:center;

}

.mr_3{

    margin:0 3px;

}

.lb{

    clear:both;

    height:350px;

}

.xw,.hd,.lx{

    width:330px;

}

.xw_top,.hd_top,.lx_top{

    height:30px;

    background-color:red;

    color:white;

    padding-left:20px;

    line-height:30px;

}


正在回答

2 回答

嗯 这个方法是可以的

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

问题已经解决,在两个之间添加一个用于清除浮动的div即可

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

逃离星球

学习~~~
2016-05-02 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

设置margin不起作用,无法将代码中的lb块和news块隔开

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