設置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;
}
2015-11-24
嗯 這個方法是可以的
2015-11-24
問題已經解決，在兩個之間添加一個用于清除浮動的div即可