                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /企业网站综合布局实战

按照视频，可是第一层li 没办法左浮动，全竖排着，帮我看看。。。

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

11:42

慕仙5237505

2017-12-02

源自：企业网站综合布局实战 3-17

关注问题我要回答

1180

操作

收起

4 回答

慕仙5237505 提问者
2017-12-04

这是html 部分<body>
       
       <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>

           <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> 
                   <div class="new_list">
                       <ul>
                           <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> 
               </div>
               <div class="course">
                   <div class="title">
                       <h2 class="title_left">课程中心</h2><span class="title_right"><a href="#">more&gt&gt</a></span>
                   </div>

                   <div class="course_pic">
                       <img src="../img/WPH.ico"/><h2><a href="#">路径介绍</a></h2>
                       <p>随着互联网的发展速度迅猛，前端工程师职业越来越火热，该路径从基础知识到实战案例演练，一步步为您打开WEB前端工程师大门。 </p>
                   </div>

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

收起回答

慕仙5237505 提问者
2017-12-04

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