老师,怎样才可以使.left整体和.right整体向左移动?这个代码有没有问题或者可以改进的地方?

老师,怎样才可以使.left整体和.right整体向左移动?这个代码有没有问题或者可以改进的地方?

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{
        margin:0;
        padding:0;
        font-family:"微软雅黑";
    }
    .nav{
        width:100%;
        height:100px;
        background:black;
        
    }
    .logo{
        float:left;
    }
    .nav-li{
        float:right;
        color:white;
        line-height:100px;
      
    }
    .nav-li span{
          font-size:20px;
        margin-left:30px;
    }
    .main{
        background:#7DF;
        width:100%;
        height:500px;
    }
    .left{
        width:300px;
        float:left;
        padding-top:50px;
    }
    .right{
        float:right;
        padding-top:100px;
    }
    .left-li{
        background:#D87390;
    }
    .low{
        background:black;
        width:100%;
        height:100px;
        line-height:100px;
        bottom:0;
        padding-left:30%;
    }
    .low span{
        color:white;
        text-align:center;
        margin-left:20px;
    }
    dt{
        font-size:20px;
        font-weight:bold;
    }
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="nav">
      <div class="logo">
          <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png">
      </div>
      <div class="nav-li">
          <span>课程</span>
          <span>职业路径</span>
          <span>实战</span>
          <span>猿问</span>
          <span>手记</span>
          <span>&nbsp;</span>
      </div>
  </div>
  <div class="main">
      <div class="left">
        <dl>
            <dt>
            课程推荐    
            </dt>
             <br/>
            <dd>
                <span class="left-li">职业路径&nbsp;</span>
                <span>HTML5与CSS3实现动态网页</span>
            </dd>
            <br/>
            <dd>
                <span class="left-li">职业路径&nbsp;</span>
                <span>零基础入门Android语法与界面</span>
            </dd>
             <br/>
            <dd>
                <span class="left-li">职业路径&nbsp;</span>
                <span>ios基础语法与常用控件</span>
            </dd>
             <br/>
            <dd>
                <span class="left-li">职业路径&nbsp;</span>
                <span>PHP入门开发</span>
            </dd>
             <br/>
            <dd>
                <span class="left-li">职业路径&nbsp;</span>
                <span>JAVA入门开发</span>
            </dd>
             <br/>
        </dl>  
      </div>
      <div class="right">
      <dl>
            <dt>
            相关课程    
            </dt>
            <br/>
            <dd>
                <span>HTML&nbsp;CSS&nbsp;JavaScript</span>
            </dd><br/>
            <dd>
                <span>HTML5&nbsp;CSS3&nbsp;Jquery</span>
            </dd><br/>
            <dd>
                <span>移动端基础&nbsp;移动端APP开发</span>
            </dd>
       </dl>
      </div>
  </div>
  <div class="low">
    <span>网站首页</span>
    <span>企业合作</span> 
    <span>人才招聘</span> 
    <span>联系我们</span> 
    <span>常见问题</span> 
    <span>友情链接</span> 
  </div>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
小于飞飞 2017-11-20 09:55:05

当分辨率缩小时,导航会下移,导致布局错位,解决方法:1.可以给 nav、main 添加 如:min-width:900px ,使其小于900后不在变化。2. 关于整体向左,可以通过margin-left:负值 来设置。

  • 提问者 SiuNam #1
    老师,第二点 我是想把左边的栏目和右边的栏目分开一点,能够完全符合效果图,是应该加多一个空列或者是说还有更好的方法呢?我给.left弄了margin-left属性,但是并没有效果。。
    2017-11-20 22:10:43
  • 小于飞飞 回复 提问者 SiuNam #2
    如果是想两者之间有距离,可以在第一块添加margin-right,或者给第二个添加margin-left,使其间距变大。
    2017-11-21 09:11:16
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师