按照視頻，可是第一層li 沒辦法左浮動(dòng)，全豎排著，幫我看看。。。
???
?? ??? ?<div class="copyright">
?? ??? ??? ?<div class="copyright_content">
?? ??? ??? ??? ?<ul>
?? ??? ??? ??? ??? ?<li><a href="#">aa</a>
?? ??? ??? ??? ??? ??? ?<ul>
?? ??? ??? ??? ??? ??? ??? ?<li><a href="#">aa</a></li>
?? ??? ??? ??? ??? ??? ??? ?<li><a href="#">ss</a></li>
?? ??? ??? ??? ??? ??? ??? ?<li><a href="#">dd</a></li>
?? ??? ??? ??? ??? ??? ??? ?<li><a href="#">ff</a></li>
?? ??? ??? ??? ??? ??? ?</ul>
?? ??? ??? ??? ??? ?</li>
?? ??? ??? ??? ??? ?<li><a href="#">ss</a>
?? ??? ??? ??? ??? ??? ?<ul>
?? ??? ??? ??? ??? ??? ??? ?<li><a href="#">aa</a></li>
?? ??? ??? ??? ??? ??? ??? ?<li><a href="#">ss</a></li>
?? ??? ??? ??? ??? ??? ??? ?<li><a href="#">dd</a></li>
?? ??? ??? ??? ??? ??? ??? ?<li><a href="#">ff</a></li>
?? ??? ??? ??? ??? ??? ?</ul>
?? ??? ??? ??? ??? ?</li>
?? ??? ??? ??? ??? ?<li><a href="#">dd</a>
?? ??? ??? ??? ??? ??? ?<ul>
?? ??? ??? ??? ??? ??? ??? ?<li><a href="#">aa</a></li>
?? ??? ??? ??? ??? ??? ??? ?<li><a href="#">ss</a></li>
?? ??? ??? ??? ??? ??? ??? ?<li><a href="#">dd</a></li>
?? ??? ??? ??? ??? ??? ??? ?<li><a href="#">ff</a></li>
?? ??? ??? ??? ??? ??? ?</ul>
?? ??? ??? ??? ??? ?</li>
?? ??? ??? ??? ??? ?<li><a href="#">ff</a>
?? ??? ??? ??? ??? ??? ?<ul>
?? ??? ??? ??? ??? ??? ??? ?<li><a href="#">aa</a></li>
?? ??? ??? ??? ??? ??? ??? ?<li><a href="#">ss</a></li>
?? ??? ??? ??? ??? ??? ??? ?<li><a href="#">dd</a></li>
?? ??? ??? ??? ??? ??? ??? ?<li><a href="#">ff</a></li>
?? ??? ??? ??? ??? ??? ?</ul>
?? ??? ??? ??? ??? ?</li>
?? ??? ??? ??? ??? ?<li><a href="#"><img src="../js/js/mf-pattern/img/mF_51xflash/tit-ar.gif">微信</a>
?? ??? ??? ??? ??? ??? ?<ul>
?? ??? ??? ??? ??? ??? ??? ?<li><img src="../img/GM.ico"/></li>
?? ??? ??? ??? ??? ??? ?</ul>
?? ??? ??? ??? ??? ?</li>
?? ??? ??? ??? ?</ul>
?? ??? ??? ?</div>
?? ??? ?</div>
?? ?</body>
??? .sidebar1 img{width:100%; height:50px;}
?? ??? ?.copyright{
?? ??? ??? ?width:100%;
?? ??? ??? ?height:200px;
?? ??? ??? ?background:#e8e8e8;
?? ??? ?}
?? ??? ?.copyright_content{
?? ??? ??? ?width:1000px;
?? ??? ??? ?margin:0 auto;
?? ??? ?}
?? ??? ?.copyright_content li{
?? ??? ??? ?list-style-type:none;
?? ??? ??? ?float:left;
?? ??? ??? ?width:200px;
?? ??? ?}
2017-12-04
這是html 部分<body>
?? ??? ?<!--<div class="top">
?? ??? ??? ?<div class="top-content">
?? ??? ??? ??? ?<ul>
?? ??? ??? ??? ??? ?<li>首頁(yè)</li>
?? ??? ??? ??? ??? ?<li>收藏</li>
?? ??? ??? ??? ??? ?<li>聯(lián)系</li>
?? ??? ??? ??? ?</ul>
?? ??? ??? ?</div>
?? ??? ?</div>-->
?? ??? ?<div class="wrap">
?? ??? ??? ?<div class="logo">
?? ??? ??? ??? ?<div class="logo_left">
?? ??? ??? ??? ??? ?<img src="../img/1H.ico"/>
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?<div class="logo_right">
?? ??? ??? ??? ??? ?<img src="../xampp-win32-7.1.11-0-VC14-installer/.rsrc/ICON/7.ico"/>
?? ??? ??? ??? ??? ?<span class="tel">24小時(shí)服務(wù)熱線</span>
?? ??? ??? ??? ?</div>
?? ??? ??? ?</div>
?? ??? ?
?? ??? ??? ?<div class="nav">
?? ??? ??? ??? ?<div class="nav_left"></div>
?? ??? ??? ??? ?<div class="nav_middle">
?? ??? ??? ??? ??? ?<div class="nav_middle_left">
?? ??? ??? ??? ??? ??? ?<ul>
?? ??? ??? ??? ??? ??? ??? ?<li><a href="#">首頁(yè)</a></li>
?? ??? ??? ??? ??? ??? ??? ?<li><a href="ajax.html">關(guān)于慕課</a></li>
?? ??? ??? ??? ??? ??? ??? ?<li><a href="#">動(dòng)態(tài)</a></li>
?? ??? ??? ??? ??? ??? ?</ul>
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ?<div class="nav_middle_right">
?? ??? ??? ??? ??? ??? ?<form action="" method="post">
?? ??? ??? ??? ??? ??? ??? ?<input type="text" class="search_text"/>
?? ??? ??? ??? ??? ??? ?</form>
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?<div class="nav_right"></div>
?? ??? ??? ?</div>
?? ??? ??? ?<div class="add" id="picBox">
?? ??? ??? ??? ?<div class="loading"><img src="../img/TB.ico" alt="圖片加載中"/></div>
?? ??? ??? ??? ?<div class="pic">
?? ??? ??? ??? ??? ?<ul>
?? ??? ??? ??? ??? ??? ?<li><img src="../img1/1a.jpg"/></li>
?? ??? ??? ??? ??? ??? ?<li><img src="../img1/2a.jpg"></li>
?? ??? ??? ??? ??? ??? ?<li><img src="../img1/3a.jpg"></li>
?? ??? ??? ??? ??? ??? ?<li><img src="../img1/4a.jpg"></li>
?? ??? ??? ??? ??? ??? ?<li><img src="../img1/5a.jpg"></li>
?? ??? ??? ??? ??? ?</ul>
?? ??? ??? ??? ?</div>
?? ??? ??? ?</div><!--add結(jié)束-->
?? ??? ??? ?
?? ??? ??? ?<div class="main">
?? ??? ??? ??? ?<div class="news">
?? ??? ??? ??? ??? ?<div class="title">
?? ??? ??? ??? ??? ??? ?<h2 class="title_left">新聞</h2><span class="title_right"><a href="index.html">More>></a></span>
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ?<div class="pic_news">
?? ??? ??? ??? ??? ??? ?<img src="../img/JM.ico"/><h2><a href="#">520模女神喊你表白</a></h2>
?? ??? ??? ??? ??? ??? ?<p>活動(dòng)時(shí)間5.20<br><a href="#">獲獎(jiǎng)時(shí)間>></a></p>
?? ??? ??? ??? ??? ?</div> <!--pic照片電影-->
?? ??? ??? ??? ??? ?<div class="new_list">
?? ??? ??? ??? ??? ??? ?<ul><!--把span放左邊可以解決ie下的日期位置偏下問題-->
?? ??? ??? ??? ??? ??? ??? ?<li><span>2011-1</span><a href="button.html">?? ? 學(xué)習(xí)路徑 \ Web前端工程師路徑介紹</a></li>
?? ??? ??? ??? ??? ??? ??? ?<li><span>22</span><a href="button.html">Web前端工程師已參加該路徑 退出該路徑</a></li>
?? ??? ??? ??? ??? ??? ??? ?<li><a href="button.html">隨著互聯(lián)網(wǎng)的發(fā)展速度迅猛，前端工程師職業(yè)</a><span>33</span></li>
?? ??? ??? ??? ??? ??? ??? ?<li><a href="button.html">該路徑從基礎(chǔ)知識(shí)到實(shí)戰(zhàn)案例演練，一步步為</a><span>2017.4.4</span></li>
?? ??? ??? ??? ??? ??? ?</ul>
?? ??? ??? ??? ??? ?</div> <!--list清單目錄-->
?? ??? ??? ??? ?</div>
?? ??? ??? ??? ?<div class="course">
?? ??? ??? ??? ??? ?<div class="title">
?? ??? ??? ??? ??? ??? ?<h2 class="title_left">課程中心</h2><span class="title_right"><a href="#">more>></a></span>
?? ??? ??? ??? ??? ?</div>
?? ??? ??? ??? ??? ?
?? ??? ??? ??? ??? ?<div class="course_pic">
?? ??? ??? ??? ??? ??? ?<img src="../img/WPH.ico"/><h2><a href="#">路徑介紹</a></h2>
?? ??? ??? ??? ??? ??? ?<p>隨著互聯(lián)網(wǎng)的發(fā)展速度迅猛，前端工程師職業(yè)越來越火熱，該路徑從基礎(chǔ)知識(shí)到實(shí)戰(zhàn)案例演練，一步步為您打開WEB前端工程師大門。 </p>
?? ??? ??? ??? ??? ?</div>
?? ????
2017-12-04
<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title>練習(xí)</title>
?? ??? ?<style type="text/css">
?? ??? ?/**{margin:0;
?? ??? ? padding:0;
?? ??? ? font-size:12px;}
?? ??? ? body{background-color:#f5f5f5;}
?? ??? ? .top{
?? ??? ? ?? ?width:100%;
?? ??? ? ?? ?height:27px;
?? ??? ? ?? ?background-image:url(../img/1H.ico) repeat-x;
?? ??? ? }
?? ??? ? .top-content{width:1000px;
?? ??? ? margin:0 auto;
?? ??? ? }
?? ??? ? .top-content li{
?? ??? ? ?? ?list-style-image:url(../xampp-win32-7.1.11-0-VC14-installer/.rsrc/ICON/7.ico);
?? ??? ? ?? ?float:left;
?? ??? ? ?? ?width:70px;
?? ??? ? ?? ?line-height:27px;
?? ??? ? }*/
?? ??? ?*{padding:0; margin:0;}
?? ??? ?.wrap{width:1000px; margin:0 auto;}
?? ??? ?.logo{height:60px; background:#FF00FF;}
?? ??? ?.logo_left{width:200px; float:left;}
?? ??? ?.logo_right{width:300px;
?? ??? ??? ? float:right;
?? ??? ??? ? margin-right:30px;
?? ??? ??? ? color:#8e8e8e;
?? ??? ??? ? }
?? ??? ?.logo_right img{
?? ??? ??? ?vertical-align:middle;
?? ??? ??? ?margin-right:10px;
?? ??? ?}
?? ??? ?.logo_right .tel{
?? ??? ??? ?font-family:"微軟雅黑";
?? ??? ??? ?font-size:16px;
?? ??? ??? ?color:#f00;
?? ??? ?}
?? ??? ?.nav{height:40px; background:#ccc;}
?? ??? ?.nav_left{width:10px;
?? ??? ??? ?height:40px;
?? ??? ??? ?background:url(../img/YMX.ico) no-repeat;
?? ??? ??? ?float:left;
?? ??? ??? ?}
?? ??? ?.nav_middle{
?? ??? ??? ?width:980px;
?? ??? ??? ?background:url(../xampp-win32-7.1.11-0-VC14-installer/.rsrc/BITMAP/BUTTONS.bmp) repeat-x;
?? ??? ??? ?float:left;
?? ??? ?}
?? ??? ?.nav_right{
?? ??? ??? ?width:10px;
?? ??? ??? ?height:40px;
?? ??? ??? ?background:url(../img/YMX.ico) no-repeat;
?? ??? ??? ?float:left;
?? ??? ?}
?? ??? ?.nav_middle_left,.nav_middle_right{
?? ??? ??? ?float:left;
?? ??? ?}
?? ??? ?.nav_middle_left{width:680px; }?? ?
?? ??? ?.nav_middle_right{width:300px; }
?? ??? ?.nav_middle_left li{
?? ??? ??? ?list-style-type:none;
?? ??? ??? ?width:100px;
?? ??? ??? ?float:left;
?? ??? ??? ?line-height:40px;
?? ??? ??? ?text-align:center;
?? ??? ?}
?? ??? ?/*沒點(diǎn)的和點(diǎn)過的狀態(tài)*/
?? ??? ?.nav_middle_left a:link,.nav_middle_left a:visited{
?? ??? ??? ?text-decoration:none;
?? ??? ??? ?color:#fff;
?? ??? ??? ?font-size:16px;
?? ??? ??? ?font-family:"微軟雅黑";
?? ??? ?}
?? ??? ?/*經(jīng)過的和點(diǎn)擊的狀態(tài)*/
?? ??? ?.nav_middle_left a:hover,.nav_middle_left a:active{
?? ??? ??? ?text-decoration:none;
?? ??? ??? ?color:#ff0;
?? ??? ??? ?font-size:16px;
?? ??? ??? ?font-family:"微軟雅黑";
?? ??? ?}
?? ??? ?.search_text{
?? ??? ??? ?width:190px;
?? ??? ??? ?height:25px;
?? ??? ??? ?margin-top:5px;
?? ??? ??? ?background:url(../img/SN.ico) no-repeat right center;
?? ??? ??? ?background-color:#fff;
?? ??? ??? ?padding-right:45px;
?? ??? ??? ?border:1px solid #fff;
?? ??? ?}
?? ??? ?.add{
?? ??? ??? ?width:1000px;
?? ??? ??? ?height:300px;
?? ??? ??? ?overflow:hidden;
?? ??? ??? ?clear:both;
?? ??? ?}
?? ??? ?.add img{
?? ??? ??? ?display:block;
?? ??? ?}
?? ??? ?.main{
?? ??? ??? ?height:250px;
?? ??? ??? ?background-color:#f6f;
?? ??? ??? ?margin-top:5px;
?? ??? ?}
?? ??? ?.news{
?? ??? ??? ?width:340px;
?? ??? ??? ?border:1px solid #e8e8e8;
?? ??? ?}
?? ??? ?.course{
?? ??? ??? ?width:410px;
?? ??? ??? ?border:1px solid #e8e8e8;
?? ??? ??? ?margin:0 7px;
?? ??? ?}
?? ??? ?.sidebar{
?? ??? ??? ?width:230px;
?? ??? ?}
?? ??? ?.news,.course,.sidebar{
?? ??? ??? ?height:250px;
?? ??? ??? ?float:left;
?? ??? ?}
?? ??? ?.title{
?? ??? ??? ?height:35px;
?? ??? ??? ?border-bottom:2px solid #e8e8e8;
?? ??? ?}
?? ??? ?.title_left{
?? ??? ??? ?width:70%;
?? ??? ??? ?font-family:"微軟雅黑";
?? ??? ??? ?font-size:14px;
?? ??? ??? ?font-weight:bold;
?? ??? ??? ?color:#88E1E6;
?? ??? ??? ?float:left;
?? ??? ??? ?line-height:35px;
?? ??? ??? ?padding-left:10px;
?? ??? ?}
?? ??? ?
?? ??? ?.title_right{
?? ??? ??? ?width:20%;
?? ??? ??? ?float:right;
?? ??? ??? ?line-height:35px;
?? ??? ??? ?text-align:right;
?? ??? ?}
?? ??? ?.title_right a {
?? ??? ??? ?text-decoration:none;
?? ??? ??? ?color:#999;
?? ??? ?}
?? ??? ?.pic_news{
?? ??? ??? ?height:80px;
?? ??? ??? ?margin-top:10px;
?? ??? ??? ?line-height:22px;
?? ??? ?}
?? ??? ?.pic_news img,.course_pic img{
?? ??? ??? ?float:left;
?? ??? ??? ?margin:0 5px;
?? ??? ??? ?width:30%;
?? ??? ??? ?height:80px;
?? ??? ?}
?? ??? ?.pic_news h2,.course_pic h2{font-size:16px;}
?? ??? ?.pic_news a,.course_pic a{
?? ??? ??? ?text-decoration:none;
?? ??? ??? ?color:#c00;
?? ??? ?}
?? ??? ?
?? ??? ?.new_list{
?? ??? ??? ?margin-top:10px;
?? ??? ?}
?? ??? ?.new_list li{
?? ??? ??? ?list-style-type:none;
?? ??? ??? ?background:url(../img/YMX.ico) no-repeat ;
?? ??? ??? ?background-size:5%;
?? ??? ??? ?padding-left:30px;
?? ??? ??? ?padding:0 0 5px 20px;
?? ??? ??? ?border-bottom:1px dotted #ccc;
?? ??? ??? ?font-size:12px;
?? ??? ?}
?? ??? ?.new_list li a:link,.new_list li a:visited{
?? ??? ??? ?text-decoration:none;
?? ??? ??? ?color:#000;
?? ??? ?}
?? ??? ?.new_list li a:hover,.new_list li a:active{
?? ??? ??? ?text-decoration:none;
?? ??? ??? ?color:#f00;
?? ??? ?}
?? ??? ?.new_list span{
?? ??? ??? ?color:#666;
?? ??? ??? ?float:right;
?? ??? ?}
?? ??? ?.course_pic{
?? ??? ??? ?height:120px;
?? ??? ??? ?margin-top:10px;
?? ??? ??? ?line-height:22px;
?? ??? ?}
?? ??? ?.course_type{
?? ??? ??? ?height:37px;
?? ??? ??? ?width:372px;
?? ??? ??? ?background:url(../img/DD.ico) no-repeat;
?? ??? ??? ?background-size: 372px 37px;
?? ??? ??? ?
?? ??? ?}
?? ??? ?.course_type li{
?? ??? ??? ?list-style-type:none;
?? ??? ??? ?float:left;
?? ??? ??? ?text-align:center;
?? ??? ??? ?margin:0 15px;
?? ??? ??? ?line-height:37px;
?? ??? ?}
?? ??? ?.video{
?? ??? ??? ?height:185px;
?? ??? ??? ?border:1px solid #f00;
?? ??? ?}
?? ??? ?.video_content{
?? ??? ??? ?height:150px;
?? ??? ?}
?? ??? ?.video_content iframe{height:150px; width:100%;}
?? ??? ?.sidebar1{
?? ??? ??? ?height:55px;
?? ??? ??? ?border:1px solid #efefef;
?? ??? ??? ?margin-top:10px;
?? ??? ?}
?? ??? ?.sidebar1 img{width:100%; height:50px;}
?? ??? ?.copyright{
?? ??? ??? ?width:100%;
?? ??? ??? ?height:200px;
?? ??? ??? ?background:#e8e8e8;
?? ??? ?}
?? ??? ?.copyright_content{
?? ??? ??? ?width:1000px;
?? ??? ??? ?margin:0 auto;
?? ??? ?}
?? ??? ?.copyright_content li{
?? ??? ??? ?list-style-type:none;
?? ??? ??? ?float:left;
?? ??? ??? ?width:200px;
?? ??? ??? ?background:url(../img/4.png)no-repeat right center;
?? ??? ??? ?text-align:center;
?? ??? ??? ?line-height:30px;
?? ??? ?}
?? ??? ?.copyright_content a{
?? ??? ??? ?text-decoration:none;
?? ??? ??? ?color:#999;
?? ??? ??? ?font-size:18px;
?? ??? ?}
?? ??? ?</style>
?? ??? ?<script type="text/javascript" src="../js/js/myfocus-2.0.1.min.js"></script>
?? ??? ?<script type="text/javascript" src="../js/js/mf-pattern/mF_YSlider.js"></script>
?? ??? ?<link rel="stylesheet" href="../js/js/mf-pattern/mF_YSlider.css" type="text/css"/>
?? ??? ?<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
?? ??? ?<script type="text/javascript">
?? ??? ??? ?myFocus.set({
?? ??? ??? ??? ?id:"picBox"
?? ??? ??? ?});
?? ??? ?</script>
?? ?</head>
2017-12-04
為什么我的沒有浮動(dòng)？我的第一排收起那左邊的全是區(qū)塊顯示豎著的排著，沒有浮動(dòng)橫起來，我用火狐，你呢
2017-12-04
什么都沒改把你的代碼貼上去是浮動(dòng)的