请查阅下代码还有哪里需要改进的地方哈

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>圣杯布局练习</title>
  <style type="text/css">
    /*圣杯布局练习 by SysHost 慕课*/
    * {
        padding: 0;
        margin: 0;
    }

    body {
      min-width: 1100px;
    }
    
    li {
        list-style: none;
    }

    a {
        text-decoration: none;
    }
    
    /*导航条整体*/
    .show { 
        width: 100%;
        height: 80px;
        background-color: black;
        overflow: hidden;
        *zoom: 1;
    }
    
    /*logo*/
    .logo  {
        width: 250px;
        height: 80px;
        line-height: 80px;
        float: left;
    }

    .logo img {
      width: 250px;
      height: 80px;
    }
    
    /*导航项*/
    .dhx {
        width: 800px;
        height: 80px;
        float: right;
        overflow: hidden;
        *zoom: 1;
    }

    .dhx ul {
        float: right;
    }

    .dhx li {
        font-size: 20px;
        margin-right: 80px;
        float: left;
    }

    .dhx ul li a {
        text-align: center;
        height: 80px;
        line-height: 80px;
        display: block;
        color: #fff;
    }

    .dhx ul li a:hover {
        color: #ccc;
    }
    
    /*内容*/  
    .container {
      padding: 0 300px 0 400px;
    }

    .container h2 {
      font-weight: 400;
    }

    .container ul li {
      height: 40px;
      line-height: 40px;
      font-size: 14px;
    }

    .left,.middle,.right {
      position: relative;
      float: left;

    }

    .left {
      margin-left: -100%;
      left: -400px;
      width: 350px;
      height: 720px;
      background: #DFFFDF;
      padding: 80px 0 0 50px;
    }

    .left span {
      background-color: #FFE66F;
      margin-right: 15px; 
    }

    .right {
      margin-left: -300px;
      right: -300px;
      width: 290px;
      height: 720px;
      background: #A6FFFF;
      padding: 80px 0 0 10px;
    }

    .middle {
      width: 100%;
      height: 800px;
      background: pink;
    }

    .middle a {
      display: inline-block;
      width: 600px;
      float: left;
      margin: 130px 0 0 65px;
    }

    /*页脚*/
    .footer {
      width: 100%;
      height: 60px;
      text-align: center;
      background-color: black;
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 999;
    }

    .footer ul {
      display: inline-block;
    }

    .footer li {
      float: left;
    }

    .footer ul li a {
      font-size: 20px;
      color: #fff;
      height: 60px;
      line-height: 60px;      
      padding: 0 20px;

    }
    .footer ul li a:hover {
      color: #ccc;

    }
  </style>
</head>
<body>
  <!-- 导航 -->
  <div class="show">
      <div class="logo">
          <a href="#">
              <img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" alt="" />
          </a>
      </div>
      <div class="dhx">
          <ul>
              <li><a href="#">课程</a></li>
              <li><a href="#">职业路径</a></li>
              <li><a href="#">实战</a></li>
              <li><a href="#">猿问</a></li>
              <li><a href="#">手记</a></li>
          </ul>
      </div>
  </div>
  <!-- 内容 -->
  <div class="container">  
      <div class="middle">  <!-- 中间显示 -->
        <a href="#"><img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg" alt=""></a>
      </div>
      <div class="left">         
        <h2>课程推荐</h2>
         <ul>
           <li><span>职业路径</span>HTML5与CSS3实现动态网页</li>
           <li><span>职业路径</span>零基础入门Android语法与界面</li>
           <li><span>职业路径</span>IOS基础语法与常用控件</li>
           <li><span>职业路径</span>PHP入门开发</li>
           <li><span>职业路径</span>JAVA入门开发</li>
         </ul></div>
      <div class="right">
        <form action="" method="">
          <h2>登录</h2>
          <br/>
          <input type="text" name="username" maxlength="6" placeholder="请输入登录邮箱/手机号" style="width: 260px; height: 35px;"> <br />
          <br />
          <input type="password" name="passw" maxlength="16" placeholder="6-16位密码，区分大小写，不能用空格" style="width: 260px; height: 35px;"> <br />
          <br />
          <input type="submit" value="登录" ame="submit" style=" color: #fff; width: 265px; height: 40px; border: 1px solid #ccc; background-color: red;">
        </form>
      </div>
  </div>
  <!-- 页脚 -->
<div class="footer">
  <ul>
    <li><a href="#">网站首页</a></li>
    <li><a href="#">企业合作</a></li>
    <li><a href="#">人才招聘</a></li>
    <li><a href="#">联系我们</a></li>
    <li><a href="#">常见问题</a></li>
    <li><a href="#">友情链接</a></li>
  </ul>
</div>
</body>
</html>

SysHost 2018-12-21

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

收起

1回答

好帮手慕糖回答被采纳获得+3积分 2018-12-21 16:38:13

你好，1、中间部分的图片没有实现居中，建议：可以给包裹图片的元素设置固定的宽高，然后结合定位来进行设置居中。（这里的宽高是按照图片本身的宽高来设置的，可以作为参考，若是设置其宽度，对应的margin-left与margin-top的值也需要调整下，margin-left为负的宽度的一半，margin-top为负的高度的一半。）例：