2-11编程问题

来源：2-12 编程练习

qq_暮色兮凉城_2

2018-05-21 16:59:43

<html>
<head>
  <meta charset="UTF-8">
  <title>2-11</title>
  <style type="text/css">
    /*此处写代码*/
    *{
      margin:0;
      padding:0;
    }
    .zt{
      width:100%;
      height:100%;
    }
    .title{
      width:100%;
      height:100px;
      background-color:#000;
      position:fixed;
      z-index:10;
    }
    .logo{
      top:0;
      left:0;
    }
    .foot{
      height:100px;
      height:20px;
      position:absolute;
      top:50%;
      margin-top:-12px;
      right:40px;
    }
    .foot a{
      font-size:24px;
      color:#fff;
      text-decoration:none;
      margin-left:40px;
    }
    .text{
      width:100%;
      height:1000px;
      background-color:#97cbff;
      position:absolute;
      top:100px;
    }
    .text_1{
      float:left;
      width:25%;
      height:1000px;
      margin:50px 5% 0% 10%;
    }
    .text_2{
      widows: 16px;%;
      height:1000px;
      float:left;
      margin:50px 5% 0% 0%;
    }
    .text_2 span{
      margin-right:10px;
    }
    .text_1,.text_2{
      font-size:16px;
      line-height:40px;
    }
    .text_1 span{
      background-color:#ff7575;
      margin-right:20px;
    }
    .text_3{
      float:left;
      height:1000px;
      width:30%;
      border-left:5px solid orange;
    }
    .text_3 form{
      margin:50px 0 0 20%;
    }
    .text_3 p{
      font-size:20px;
    }
    .text_3 input{
      width:250px;
      height:40px;
    }
    .tj{
      background-color:red;
    }
    .bottom{
      width:100%;
      height:100px;
      bottom:0;
      position:fixed;
      background-color:black;
      z-index:10;
    }
    .bottom_1{
      height:100px;
      width:auto;
      text-align:center;
      word-spacing:50px;
      line-height:100px;
    }
    .bottom_1 a{
      text-decoration:none;
      color:#fff;
      font-size:24px;
    }
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="zt">
    <div class="title">
      <div class="logo">
        <img src="http://climg.mukewang.com/59093e9c00016ce303000100.png">
      </div>
      <div class="foot">
        <a href="#">课程</a>
        <a href="#">职业路径</a>
        <a href="#">实战</a>
        <a href="#">猿问</a>
        <a href="#">手记</a>
      </div>
    </div>
    <div class="text">
      <div class="text_1">
        <h3>课程推荐</h3>
        <p><span>职业路径</span>HTML5与CSS实现动态网页</p>
        <p><span>职业路径</span>零基础入门Android语法与界面</p>
        <p><span>职业路径</span>IOS基础语法与常用控件</p>
        <p><span>职业路径</span>PHP入门开发</p>
        <p><span>职业路径</span>JAVA入门开发</p>
      </div>
      <div class="text_2">
        <h3>相关课程</h3>
          <p><span>HTML</spam><span>CSS</span><span>JavaScript</span></p>
          <p><span>HTML5</span><span>CSS3</span><span>Jquery</span></p>
          <p><span>移动端基础</span><span>移动端APP开发</span></p>
      </div>
      <div class="text_3">
        <form>
          <p>登录</p><br/>
          <input type="text" name="zh" placeholder="请输入登录帐号/手机号"/>
          <br/>
          <br/>
          <input type="password" name="mm" placeholder="6-16为密码 区分大小写 不能用空格" maxlength="16"/>
          <br/>
          <br/>
          <input type="submit" name="tj" value="登录" class="tj"/>
        </form>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom_1">
        <a href="#">网站首页</a>
        <a href="#">企业合作</a>
        <a href="#">人才招聘</a>
        <a href="#">联系我们</a>
        <a href="#">常见问题</a>
        <a href="#">友情链接</a>
      </div>
    </div>
  </div>
</body>
</html>