2-11练习问题

来源：2-12 编程练习

qq_太平一姐_0

2017-07-05 20:38:13

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
  body{
      padding:0;
      margin:0;
      background:pink;
      width:100%;
      height:1000px;
  }
  .head{
      width:100%;
      height:100px;
      background:black;
      font-size:20px;
      color:white;
       position: relative;
  }
  .head ul{
      list-style:none;
      float:right;
      
  }
  .head li{
      float:left;
      margin:20px 20px;
      
  }
  .left{
      width:30%;
      float:left;
      margin:100px auto;
       position: relative;
  }
  .left ul{
      list-style:none;
      float:left;
      line-height:40px;
  }
  .right{
      width:40%;
      float:right;
      margin:120px 0;
       position: relative;
  }
  form{
        float:left;
        margin-left:150px;
        
    }  
  .input{
      width:180px;
      height:40px;
      font-size:10px;
  }
  .submit{
      width:180px;
      height:40px;
      background:red;
      color:white;
      border:red;
      }
  .center{
      line-height:40px;
      float:left;
      width:30%;
      margin:100px auto;
  }
  .center ul{
      float:left;
      list-style:none;
  }
  .list1{
      font-size:30px;
  }
  .list{
      background:orange;
  }
  .foot{
      width:100%;
      height:100px;
      background:black;
      color:white;
      float:left;
      margin:0 auto;
  }
  .foot li{
      float:left;
      margin:0 20px;
      list-style:none;
      line-height:100px;
  }
  
    /*此处写代码*/
  </style>
</head>
<body>
    <div class="head">
        <img src="http://climg.mukewang.com/59093e9c00016ce303000100.png">
        <ul>
            <li>课程</li>
            <li>职业路径</li>
            <li>实战</li>
            <li>猿问</li>
            <li>手记</li>
        </ul>
    </div>
    <div class="con">
        <div class="left">
            <ul>
            <span class="list1">课程推荐</span>
            <li><span class="list">职业路径</span> html与css实现网页动态</li>
            <li><span class="list">职业路径</span> 零基础入门安卓语法和界面</li>
            <li><span class="list">职业路径</span> ios基础入门</li>
            <li><span class="list">职业路径</span> php入门开发</li>
            <li><span class="list">职业路径</span> java入门开发</li>
            </ul>
            </div>
        <div class="right">
            <form class="dl">
            <span class="list1">登陆</span>
            <p><input class="input" type="text" name="username" placeholder="请输入登录邮箱/手记"/></p>
            <p><input class="input" type="password" name="paw" placeholder="6-16位密码，区分大小写，不能用空格"></p>
            <p><input class="submit" type="submit"  name="user_submit" value="登陆" class="land"></p>
            </form>
            </div>
        <div class="center">
            <ul>
            <span class="list1">相关课程</span>
            <li>html css javascript</li>
            <li>html5 css jquery</li>
            <li>移动端基础 移动端开发</li>
            </ul>
            </div>
    </div>
    <div class="foot">
        <ul>
            <li>网站首页</li>
            <li>企业合作</li>
            <li>人才招聘</li>
            <li>联系我们</li>
            <li>友情链接</li>
            <li>常见问题</li>
        </ul>
    </div>
  <!-- 此处写代码 -->
</body>
</html>

老师页脚怎么沉到网页底部，里面内容怎么水平垂直居中，分割线怎么完成，登陆与相关问题不在一个水平，微调才勉强保持，程序还有什么问题，请指出，求解决方案，谢谢老师

写回答

1回答