3-3编程练习求问

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{margin:0;padding:0;}
    h2{font-family: "微软雅黑";font-size: 25px;margin-bottom: 0.5em;}
    body{background-color: pink;min-width: 978px;}
    .nav{width:100%;min-width:1000px;height:100px;background-color:black;position:fixed;top:0;z-index:999;}
    .logo{background: url("http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png"
) no-repeat top left;float: left;width:300px;height: 100px}
    .title{float:right;text-align: center;font-size:23px;margin-right:20px;}
    .list li{list-style:none;display:inline;color:white;line-height: 100px;margin:auto 30px;}
    .container{max-height:1000px;margin:0 auto;padding:100px 320px 0 320px;}
    .middle,.left,.right{position:relative;float:left;min-height:800px;padding-top:100px;}
    .left{background-color: #add8e6;width:300px;float:left;padding-left:20px;background-color:#FFDEAD;margin-left:-100%;left:-320px;}
    .left li{list-style: none;line-height: 2.5em;}
    .middle{width:100%;background-color: pink;margin:0 auto;text-align:center;}
/*    .middle img{position:relative;top:100px;}*/
    .right{width:300px;background-color: #add8e6;padding-left:20px;margin-left:-320px;right:-320px;}
    input,.login{width:250px;height:30px;margin-top: 20px;}
    .login{background-color: red;color:#fff;}
    #rec span{background-color: #FFB6C1;margin-right: 0.5em;}
    .rg{width:45%;float:left;}
    #kc{width:245px;}
    #kc a{text-decoration: none;color:inherit;line-height: 2.5em;margin-right: 1.5em;}
    .footer{width:100%;height:60px;position:fixed;bottom:0;background-color: black;text-align:center;}
    .footer li{list-style:none;display:inline;color:white;line-height: 60px;font-size:20px;margin:auto 40px;}
  </style>
</head>
<body>
    <div class="nav">
        <div class="logo"></div>
        <div class="title">
          <ul class="list">
            <li>课程</li>
            <li>职业路径</li>    
            <li>实战</li>
            <li>猿问</li>
            <li>手记</li>
          </ul>
        </div>
    </div>
    <div class="container">
      <div class="middle">
        <img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg">
      </div>
        <div class="left">
          <h2>课程推荐</h2>
          <ul id="rec">
            <li><span>职业路径</span> HTML5与CSS3实现动态网页</li>
            <li><span>职业路径</span> HTML5与CSS3实现动态网页</li>
            <li><span>职业路径</span> HTML5与CSS3实现动态网页</li>
            <li><span>职业路径</span> HTML5与CSS3实现动态网页</li>
            <li><span>职业路径</span> PHP入门开发</li>
            <li><span>职业路径</span> JAVA入门开发</li>
          </ul>
        </div>
        <div class="right">
          <form>
            <h2>登陆</h2>
            <input type="text" name="user" placeholder="请输入登陆邮箱/手机号">
            <input type="password" name="password" placeholder="6-12位密码，区分大小写，不能用空格" size="35">
            <br>
            <input type="button" value="登陆" size="35" class="login">
          </form>
        </div>
    </div>
    <div class="footer">
      <ul>
        <li>网站首页</li>
        <li>企业合作</li>
        <li>人才招聘</li>
        <li>联系我们</li>
        <li>常见问题</li>
        <li>友情链接</li>
      </ul>
    </div>
  <!-- 此处写代码 -->
</body>
</html>

老师，能帮忙看看我这个实现ok吗？

有一个疑问：为什么我的body要设置min-width: 978px？这个值是我拉伸窗口得出的，但不知道为什么是这个值，怎么算出来的？

还有登陆按钮设置不了高度?

其它的padding/margin值设置不知道合不合理?

吃面包超人 2018-01-10

源自：CSS网页布局基础 3-3 编程练习

收起

2回答

怎么都被占用了呢回答被采纳获得+3积分 2018-01-11 10:37:47

页面内出现了垂直滚动条，建议中间部分的高度适当调小一些

其次，min-width的临界值是960px，这个值是这么计算出来的，左右两边的元素是定宽300px*2+左右两边元素的左填充20px*2+右边元素的左边距320px=960

还有登录按钮是可以设置高度的，例如：

整体效果不错呢，继续加油吧~~~

收起回答

吃面包超人提问者 #1

谢谢老师！看得好仔细呀。那为什么左边元素的左边距不用加上，右边的就要加上呢？我这么理解可以吗？当我拖动窗口，两边的宽度不变，中间元素middle的宽度随着container一直在缩小，当小到比左边和右边元素盒子宽度320px还小的时候，即使设置了margin-left，元素也没办法跑上去第一行，只能被挤下来第二行了，然后位置在第二行的基础上到处跑。

2018-01-11 12:47:50
吃面包超人提问者 #2

谢谢老师~~~

2018-01-11 14:17:48