请老师点评下,是否有需要改进的地方,谢谢~

请老师点评下,是否有需要改进的地方,谢谢~

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

    /*此处写代码*/

    *{margin:0;padding:0;}

    body{min-width:900px;font-size:16px;font-family:"微软雅黑";}

    

    /*页头和页脚*/

    .header,.footer{

        float:left;

        background:black;

        width:100%;

        height:80px;

        color:white;

    }

    .header .logo img{

        width:250px;

        float:left;

    } 

    .header .nav{

        float:right;

        width:50%;

        cursor:pointer;

    }

    

    .header .nav ul,.footer ul{

        list-style:none;

        height:80px;

        line-height:80px;

    }

    .header .nav ul li{

        float:right;

        margin:0px 30px;

        font-size:18px;

    }

    .header .nav ul li:hover{

        color:orange;

    }

    

    .footer ul{

        width:720px;

        margin:0 auto;

    }

    .footer ul li{

        width:120px;

        float:left;

        margin:0 ;

        text-align:center;

    }

    

    /*内容部分*/

    .container{

        padding:0px 280px 0px 350px;

    }

    .middle,.left,.right{

        position:relative;

        float:left;

        height:800px;

    }

    .middle{

        width:100%;

        background:#FFC0CB;

    }

    .left{

        width:350px;

        background:#FFEFD5;

        margin-left:-100%;

        left:-350px;

    }

    .right{

        width:280px;

        background:#AFEEEE;

        margin-left:-280px;

        right:-280px;

    }

    

    .middle img,.course,.login{

        position:absolute;

        top:100px;

    }

    .middle img{

        left:50%;

        margin-left:-300px;    

    }


    .left .course{

    left:40px;

    }

    span{

    background: #F08080;

    }

    p{margin-top:25px;}


    .right .login{

    width:260px;

    left:10px;


    }

    input{

    width:260px;

    height:40px;

    display:block;

    margin-top:20px;

    }

    input:nth-child(3){

    background:red;

    color:white;

    font-size:18px;

    }

 

  </style>

</head>

<body>

  <!-- 此处写代码 -->

  <div class="header">

      <div class="logo">

      <img src="http://img1.sycdn.imooc.com/climg//590037f600016ce303000100.png" />

      </div>

      <div class="nav">

        <ul>

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

          <div class="course">

              <h2>课程推荐</h2>

              <p><span>职业路径</span>&nbsp;&nbsp;HTML5与CSS3实现动态网页</p>

              <p><span>职业路径</span>&nbsp;&nbsp;零基础入门Android语法与界面</p>

              <p><span>职业路径</span>&nbsp;&nbsp;iOS基础语法与常用控件</p>

              <p><span>职业路径</span>&nbsp;&nbsp;PHP入门开发</p>

              <p><span>职业路径</span>&nbsp;&nbsp;JAVA入门开发</p>

          </div>

      </div>

      <div class="right">

          <div class="login">

              <h2>登录</h2>

              <form name="login" method="post" action="#">

                  <input type="text" name="text" placeholder="请输入登录邮箱/手机号" />

                  <input type="password" name="pasw" placeholder="6-16位密码,区分大小写,不能用空格" />

                  <input type="button" name="button" value="登录" />

              </form>

          </div>

      </div>

  </div>

  <div class="footer">

      <ul>

          <li>网站首页</li>

          <li>企业合作</li>

          <li>人才招聘</li>

          <li>联系我们</li>

          <li>常见问题</li>

          <li>友情链接</li>

      </ul>

  </div>

</body>

</html>


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

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

2回答
好帮手慕夭夭 2018-07-06 11:54:23

上传的代码测试 , 页面缩小后显示如下 : 

http://img1.sycdn.imooc.com//climg/5b3ee790000166d808440933.jpg

所以还是建议同学要分别设置一下最小宽度效果更好一些哦 , 祝学习愉快 !

  • 提问者 钰与宸 #1
    我说了我上传的代码不完善,我修改了,只是没有贴修改后的代码。但不是因为你说的要分别设置最小宽度的问题(我按你建议,还是一样会脱文档流),我也说了很多次是因为两侧宽度设置的问题。我修改后的代码是可以正常显示 的。感觉你没懂我的意思。 反正都可以啦,我也意识到我的问题。解决了就是。不在这个问题纠结了。最后非常感谢你~
    2018-07-07 09:20:43
好帮手慕夭夭 2018-07-04 13:54:34

建议为头部 ,中间部分和尾部都设置min-width:900px , 登录按钮设置border:none 效果更好哦 , 完善一下吧 , 祝学习愉快 !

  • 提问者 钰与宸 #1
    我刚好在想那个按钮怎么比较短,不知道怎么弄。谢谢。 另一个问题,说建议在头部、中间、尾部设置min-width,但我在代码中是直接设置在body里,可以吗?还是得改成分别设置?
    2018-07-05 09:09:54
  • 好帮手慕夭夭 回复 提问者 钰与宸 #2
    需要分别设置最小宽度哦
    2018-07-05 09:50:05
  • 提问者 钰与宸 回复 好帮手慕夭夭 #3
    可是我放body里也是可以的呀,为什么? 再者,发现原来我代码缩小后,中间部分会变形,于是看文件,把中间两侧宽度修改了下,使min-width>=2倍左侧+右侧宽度,这样缩小时就不会了。
    2018-07-05 11:15:52
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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