课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

为啥我的list_main页面浮动出错了呢

来源：4-3 企业网站左侧列表制作

qq_放纵你江湖_0

2015-12-16 22:40

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>无标题文档</title>

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

<script src="js/setHomeSetFav.js" type="text/javascript" charset="gb2312"></script>


</head>


<body>

<div class="top">

  <div class="top_content">

    <ul>

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

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

      <li><a href="#" onclick="SetHome(window.location)">设为首页</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">

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

     </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" style="height:243px">

     <img src="images/ad.jpg" />

  </div>

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

  <div class="list_main">

    <div class="news_type"></div>

    <div class="list_box"></div>

  </div>

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

<div class="copyright">

  <div class="copyright_content">

    <ul>

      <li><a href="#">关于</a>

          <ul>

            <li>品牌故事</li>

            <li>联系我们</li>

            <li>加入我们</li>

            <li>版权声明</li>

          </ul>

      </li>

      <li><a href="#">课程</a>

         <ul>

            <li>PHP开发</li>

            <li>前端开发</li>

            <li>JAVA开发</li>

            <li>Android开发</li>

          </ul>

      </li>

      <li><a href="#">留言</a>

         <ul>

            <li>新浪微博</li>

            <li>腾讯微博</li>

            <li>企业微信</li>

            <li>QQ空间</li>

          </ul>

      </li>

      <li><a href="#">关注</a>

         <ul>

            <li>意见反馈</li>

            <li>问题留言</li>

            <li>媒体联络</li>

            <li>在线客服</li>

          </ul>

      </li>

      <li><a href="#"><img src="images/weixin.png"/ alt="微信关注" width="30" height="27">微信关注</a>

       <ul><li><img src="images/qrcode.jpg"/ alt="扫描关注慕课网官方微信" width="102" height="102"></li></ul>

      </li>

    </ul>

  </div>

</div>

</body>

</html>


写回答 关注

5回答

  • JIan單
    2015-12-17 10:59:22

    你把list_main下面的div元素的width改为百分比试试看

    0 0
  • echo_kinchao
    2015-12-17 09:35:55

    是不是父级元素的宽度不够 引起的错位

    0 0
  • china_hechuan
    2015-12-16 22:59:55

    没啥问题，可能你测试屏幕宽度太小，两个块就错开了

    0 0
  • qq_放纵你江湖_0
    2015-12-16 22:49:16

    @charset "utf-8";

    /* CSS Document */


    *

    {

      margin:0;

      padding:0;

      font-size:12px;

    }

    body

    {

      background-color:#F5F5F5;

    }

    .top

    {

      width:100%;

      height:27px;

      background:url(../images/top_bg.jpg) 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:1000px;

      margin:0 auto;

    }

    .logo

    {

     height:80px;

     background-color:#FFF;

    }

    .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:url(../images/nav_left.jpg) no-repeat;

    }

    .nav_mid{

    width:980px;

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

        }

    .nav_right{

    width:10px;

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

    }

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

    text-align:center;

    line-height:40px;

    width:100px;

    }

    .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:5px;

    background:url(../images/search.jpg) no-repeat right center ;

    background-color:#FFF;

    padding-right:25px;

    border:1px solid #FFF;  }

    .ad{

    height:310px;

    overflow:hidden;

    }

    .main{

    height:250px;

    background-color:#FFF;

    margin-top:5px;

    }

    .news{

    width:340px;

    border:1px solid #8E8E8E;

    }

    .course{

    width:410px;

    border:1px solid #8E8E8E;

    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:#786F66;

    float:left;

    line-height:35px;

    padding-left:20px;

    }

    .title_right{

    width:20%;

    float:right;

    line-height:35px;

    text-align:right;

    }

    .title_right a {

        text-decoration:none;

    }

    .pic_news{

    height:80px;

    margin-top:10px;

    line-height:22px;

    }

    .pic_news img,.course_pic img{

    float:left;

    margin:0 5px;

    }

    .pic_news a,.course_pic a{

    color:#C00;

    text-decoration:none;

    }

    .news_list{

        margin-top:20px;

    }

    .news_list li{

        list-style-type:none;

    background:url(../images/list.jpg) no-repeat;

    padding-left:10px;

    margin:8px;

    border-bottom:1px dotted #CCC;

    }

    .news_list a:link,.news_list a:visited{

    text-decoration:none;

    color:#000;

    }

    .news_list a:hover,.news_list a:active{

        text-decoration:none;

    color:#F00;

    }

    .news_list span{

    color:#999;

    float:right;

    }

    .course_pic{

    height:120px;

    margin-top:10px;

    line-height:22px;

    }

    .course_type{

        height:37px;

    width:372px;

    background:url(../images/product_type_bg.jpg) no-repeat;

    margin:20px auto;

    }

    .course_type li{

        list-style-type:none;

    float:left;

    line-height:37px;

    margin:0 15px;

    text-align:center;

    }

    .video{

    height:185px;

    border:1px solid #E8E8E8;

    }

    .video_content{

    height:150px;

    }

    .sidebar_ad{

    height:55px;

    border:1px solid #E8E8E8;

    margin-top:10px;

    }

    .copyright

    {

    width:100%;

    height:200px;

    background-color:#E8E8E8;

    }

    .copyright_content{

    width:1000px;

    margin:0 auto;

    padding-top:20px;

    }

    .copyright_content li{

        list-style-type:none;

    float:left;

    width:200px;

    background:url(../images/line.png) no-repeat right center;

    text-align:center;

    line-height:30px;

    font-family:"微软雅黑"

    }

    .copyright_content a{

    text-decoration:none;

    color:#999;

    font-size:18px;

    }

    .copyright_content li ul li a{

    font-size:14px;

    }

    .list_main{

    min-height:350px;

    _height:350px;

    background-color:#FFF;

    margin-top:10px;

    }

    .news_type{

    width:220px;

    height:350px;

    border:1px solid #E8E8E8;

    background-color:#9FC;

    float:left;

    }

    .list_box{

        width:770px;

    min-height:350px;

    _height:350px;

    background-color:#F9F;

    border:1px solid #E8E8E8;

    float:right;

    }


    0 0
  • china_hechuan
    2015-12-16 22:46:58

    list_main里面啥都没有啊

    1 0

    qq_放纵你...

    我知道，是样式的问题吗我只是在作页面，你帮我看看我的list_main样式有没有问题，，在我的评论，，，样式回复不了太多了嘿嘿

    2015-12-16 22:49:03

    共 1 条回复 >

企业网站综合布局实战

本课程重点介绍HTML/CSS实现常见企业网站布局的方法

157038 学习 · 2134 问题

查看课程

相似问题

我就想问了，为啥我给li设置右浮动之后top里面的图片就无效了呢？求解答

回答 2

我的右浮动为什么不是那么靠右呢

回答 4

左浮动和右浮动后list_boxs会前左浮动去了。这是为什么。

回答 3

清除box的浮动，为啥是在box3中清除

回答 4

为什么list_main的高度不是352

回答 1

打开慕课网App查看更多内容