2-9作业批阅

来源：2-10 编程练习

SsssZzzz

2018-03-05 10:53:12

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{margin:0; padding:0;list-style: none;}
    a{text-decoration: none; color:#fff;}
    .content a{color:#000;}
    .header{
        width:100%;
        height:10vh;
        background:black;
        margin:0 auto;
        position:fixed;
        top:0;
    }
    .nav{
      height: 100px;
      float:right;
      font-size: 1.5em;
      line-height: 100px;
    }
    .nav li{
      display:inline;
      margin-right: 20px;
    }
    .content{
        width:100%;
        height:90vh;
        background:rgb(176,216,229);
        margin-top: 10vh;
        font-weight: bold;
    }
    .content span{
      background: orange;
      margin-right: 1em;
    }
    .content li{
      margin-top:1em;
    }
    .left{
      width: 50%;
      height: 90vh;
      float: left;
      position: absolute;
      top: 18%;
      left: 20%;
    }
    .right{
      width: 50%;
      height: 90vh;
      float: left;
      position: absolute;
      top: 18%;
      left: 60%;
    }
    .footer{
        width:100%;
        height:10vh;
        background:black;
        margin: 0 auto;
        position: fixed;
        bottom:0;
    }
    .link{
      width: 100%;
      height: 10vh;
      text-align: center;
      line-height: 10vh;
      font-size: 1.3em;
      word-spacing: 1em;
    }
    .link li{
      display: inline;
    }
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="header">
    <a href="#"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" alt=""></a>
    <ul class="nav">
      <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 class="content">
    <div class="left">
      <h2 class="title">课程推荐</h2>
      <ul class="course">
        <li><span>职业路径</span><a href="#">HTML5与CSS3实现动态网页</a></li>
        <li><span>职业路径</span><a href="#">零基础入门Android语法与界面</a></li>
        <li><span>职业路径</span><a href="#">iOS基础语法与常用控件</a></li>
        <li><span>职业路径</span><a href="#">PHP入门开发</a></li>
        <li><span>职业路径</span><a href="#">JAVA入门开发</a></li>
      </ul>
    </div>
    <div class="right">
      <h2 class="title">相关课程</h2>
      <ul class="course">
        <li>
          <a href="#">HTML</a>
          <a href="#">CSS</a>
          <a href="#">JavaScript</a>
        </li>
        <li>
          <a href="#">HTML5</a>
          <a href="#">CSS3</a>
          <a href="#">JQuery</a>
        </li>
        <li>
          <a href="#">移动端基础</a>
          <a href="#">移动端APP开发</a>
        </li>
      </ul>
    </div>
  </div>
  <div class="footer">
    <ul class="link">
      <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>

写回答

1回答