请老师帮我检查下

请老师帮我检查下

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{margin:0;
        padding:0;
    }
    .bg{background:black;
        width:100%;
        height:100px;
        position:absolute;
        top: 0;
            }
    .logo{
        background:url(http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png) no-repeat;
        width:30%;
        height:80px;
        float:left;

    }
    .dht{
      width:10%;
      height: auto;
      color: white;
      float: right;
      font-size: 20px;
      line-height: 100px;
      margin-left:30px;
      text-align: center; 
      cursor: pointer;         
    }
    .dht:nth-child(4){margin-left: 40px;}
    .wb{
      background-color: black;
      width: 100%;
      height: 100px;
      bottom: 0;
     position: absolute;

      
    }
   .no{width:50%;
   	margin: 0 auto;
   	height: 100px;

   }
    .ljq{color: white;
      line-height: 100px;
      width: 15%;
      float: left;    

  }
  .wbqy{width: 100%;
  	    height: 3000px;
  	    background-color:#8EE5EE;
  	    top: 100px;	
  	    }
  	.wby{width: 80%;
  		height: 3000px;
  	background-color:#8EE5EE;
  	margin: 100px auto
  	 }    
 	 	
  .left{width: 35%;
  	    float: left;
  	    	top: 100px;
  	    	height: 500px;}
  	.right {float: left;top: 100px;
  		width:  25%;}
  	h1{color:black;

  }
  span{background-color: #FF6347;}
 ul {list-style-type : none;}
 .baba{margin-top: 10%;width: 90%;height: 50%;}
 li{margin: 10px;}
 .chill{margin: 10px}
 .baba1{margin-top: 80px;}
  .dljm{
  	width: 35%;
  	height: 1000px;
  	float: right;
  	border-left: 10px solid orange;
  	top: 100px;
    padding-left: 3%;
  }
  .username input{
        height:35px;
        font-size: 13px;
   }
   .password input{
        height:35px;
        font-size:13px;
   }
   .submit input{
        height:35px;
        width:235px;
        background-color: red;
        color:white;
        border: 0;}
 	         .dljm ul{
 	         	padding-top: 100px;
 	         	padding-left: 100px;
 	         	
 	         		}
  </style>  
</head>
<body>
  <!-- 此处写代码 -->
  <div class="bg">
      <div class="logo"></div>
      <div class="dht">手记</div>
      <div class="dht">猿问</div>
      <div class="dht">实战</div>
      <div class="dht">职业路径</div>
      <div class="dht">课程</div>
  </div>
  <div class="wbqy">
  	<div class="wby">
  	<div class="left">

       <ul class="baba" ><div class="chill">课程推荐</div>
       	<li><span>职业路径</span>&nbsp;&nbsp;&nbsp;HTML5与CSS3实现动态网页</li>
       	<li><span>职业路径</span>&nbsp;&nbsp;&nbsp;零基础入门Android</li>
       	<li><span>职业路径</span>&nbsp;&nbsp;&nbsp;ios基础语法与常用控件</li>
       	<li><span>职业路径</span>&nbsp;&nbsp;&nbsp;hp入门开发</li>
       	<li><span>职业路径</span>&nbsp;&nbsp;&nbsp;JAVA入门开发</li>
       </ul>
  	</div>
  	<div class="right">
  		
       <ul class="baba1" ><div class="chill">相关课程</div>
    		<li>HTML&nbsp;&nbsp;&nbsp;CSS&nbsp;&nbsp;&nbsp;Javascirpt</li>
    		<li>HTML5&nbsp;&nbsp;&nbsp;CSS3&nbsp;&nbsp;&nbsp;Jquery</li>
    		<li>移动端基础&nbsp;&nbsp;&nbsp;移动端app开发</li>
       </ul>
  	</div>
  	<div class="dljm">
  	       <ul>
                <h2>登录</h2>
                <li class="username"><input type="text" name="username" placeholder="请登陆输入邮箱/手机号" size="35" ></li>
                <li class="password"><input type="password" name="password" placeholder="6-16位密码,区分大小写,不能用空格" size="35" ></li>
                <li class="submit"><input type="button" name="submit" value="登录"></li>
            </ul>
  	


  	</div>
  </div>
  </div>
 
  <div class="wb">
     <div class="no">
        <div class="ljq">网站首页</div>
        <div class="ljq">企业合作</div>
        <div class="ljq">人才招聘</div>
        <div class="ljq">联系我们</div>
        <div class="ljq">常见问题</div>
        <div class="ljq">友情链接</div>
      </div> 
  </div>
   
</body>
</html>


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

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

1回答
提问者 AiChiRol 2018-03-06 15:36:55

问一下老师我的‘left’和‘right’宽度分别是35%和25%,但是为什么我的‘dljm’宽度不能设置成40%。一设置成40%整个‘dljm’就会跑到下面去。。

  • dijm跑到最下面是因为dijm的左边框border-left占着10px的位置,padding-left占着3%的位置,所以dijm的宽度加起来就是10px+40%+3%,左右侧只剩下40%的宽度,所以肯定会掉下去。如果你就是想设置宽度为40%,可以给dijm添加一个属性box-sizing:border-box;会使盒子内容往里面填充,不会再把40%的宽度撑大,自己可以测试下。
    2018-03-06 16:18:18
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36713    个

从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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