按照视频，可是第一层li 没办法左浮动，全竖排着，帮我看看。。。
<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;
}
个回答
-
- 慕仙5237505
- 2017-12-04 15:10:10
这是html 部分<body>
<!--<div class="top">
<div class="top-content">
<ul>
<li>首页</li>
<li>收藏</li>
<li>联系</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小时服务热线</span>
</div>
</div>
<div class="nav">
<div class="nav_left"></div>
<div class="nav_middle">
<div class="nav_middle_left">
<ul>
<li><a href="#">首页</a></li>
<li><a href="ajax.html">关于慕课</a></li>
<li><a href="#">动态</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结束-->
<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>活动时间5.20<br><a href="#">获奖时间>></a></p>
</div> <!--pic照片电影-->
<div class="new_list">
<ul><!--把span放左边可以解决ie下的日期位置偏下问题-->
<li><span>2011-1</span><a href="button.html"> 学习路径 \ Web前端工程师路径介绍</a></li>
<li><span>22</span><a href="button.html">Web前端工程师已参加该路径 退出该路径</a></li>
<li><a href="button.html">随着互联网的发展速度迅猛，前端工程师职业</a><span>33</span></li>
<li><a href="button.html">该路径从基础知识到实战案例演练，一步步为</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>随着互联网的发展速度迅猛，前端工程师职业越来越火热，该路径从基础知识到实战案例演练，一步步为您打开WEB前端工程师大门。 </p>
</div>
-
- 慕仙5237505
- 2017-12-04 15:08:31
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>练习</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;
}
/*没点的和点过的状态*/
.nav_middle_left a:link,.nav_middle_left a:visited{
text-decoration:none;
color:#fff;
font-size:16px;
font-family:"微软雅黑";
}
/*经过的和点击的状态*/
.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> -
- 慕仙5237505
- 2017-12-04 14:51:28
为什么我的没有浮动？我的第一排收起那左边的全是区块显示竖着的排着，没有浮动横起来，我用火狐，你呢
-
- 泪竹殇
- 2017-12-04 12:15:46
什么都没改把你的代码贴上去是浮动的
