老师请检查，那块可以优化

来源：2-10 编程练习

keepangry2297447

2020-03-18 16:55:01

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3-7编程练习</title>
<style>
  *{
   padding: 0;
   margin: 0;
  }
  .big{
   width: 100%;
   position: relative;
   background: #99cccc;
  }
  .header{
   width: 100%;
   height: 100px;
   background-color: #000;
   overflow:hidden;
   zoom:1;
   position: fixed;
   top: 0;
  }
  .header img{
   display: block;
   float: left;
   margin-left: 30px;
   line-height: 100px;
   cursor: pointer;
  }
  .header li{
   font-family: "微软雅黑"；
   font-size:16px;
   color: #fff;
   list-style: none;
   float: left;
   line-height: 100px;
   padding: 0 15px;
   cursor: pointer;
  }
  .header ul{
   float: right;
   margin-right:50px;
  }
  .content{
   background: #99cccc;
   width: 80%;
   height: 1000px;
   margin-top: 100px;
   margin-right: auto;
   margin-left: auto;
   padding: 60px 0 0 60px;
   overflow: hidden;
   zoom:1;  }
  .content p{
   display: inline-block;
   background: pink;
   margin: 10px;
   padding: 5px;
  }
  p,span{
   font-family: "微软雅黑";
   font-size: 20px;
   line-height: 30px;
  }
  .left{
   float: left;
   width: 50%
   height:100px;
  }
  .right{
   float: right;
   width: 50%;
   height: 100px;  }
  .right span{
   display: inline-block;
   margin: 10px;  }  .footer{
   width: 100%;
   height: 100px;
   overflow: hidden;
   zoom:1;
   position: fixed;
   bottom: 0;
   background: #000;
  }
  .footer li{
   float: left;
   font-family: "微软雅黑";
   font-size: 16px;
   color: #fff;
   text-align: center;
   list-style: none;
   line-height: 100px;
   padding:0 35px;
   cursor: pointer;
  }
  .footer ul{
   text-align: center;
   height: 100px;
   width: 805px;
   margin:0 auto;
  } </style>
</head>
<body>
<div class="big">
  <div class="header">
   <div><img src="http://img1.sycdn.imooc.com\/climg/58c0d2d900016ce303000100.png"></div>
   <ul>
    <li>课程</li>
    <li>职业路径</li>
    <li>实战</li>
    <li>猿问</li>
    <li>手记</li>
   </ul>
  </div>
  <div class="content">
   <div class="left">
    <h2>课程推荐</h2>
    <p>职业路径</p><span>HTML5和CSS实现动态网页</span><br/>
    <p>职业路径</p><span>零基础入门Android语法与界面</span><br/>
    <p>职业路径</p><span>iOS基础语法与常用控件</span><br/>
    <p>职业路径</p><span>PHP入门开发</span><br/>
    <p>职业路径</p><span>Java入门开发</span><br/>   </div>
   <div class="right">
    <h2>相关课程</h2>
    <span>HTML</span><span>CSS</span><span>JavaScript</span><br/>
    <span>HTML5</span><span>CSS3</span><span>Jquery</span><br/>
    <span>移动端基础</span><span>移动端app开发</span><br/>   </div>
  </div>
  <div class="footer">
   <ul>
    <li>网站首页</li>
    <li>企业合作</li>
    <li>人才招聘</li>
    <li>联系我们</li>
    <li>常见问题</li>
    <li>友情链接</li>
   </ul>
  </div>
</div>
</body>
</html>