关于2-11问题

来源：2-12 编程练习

hy_wang

2017-12-12 18:53:19

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
<title></title>
<style type="text/css">
 *{
  padding: 0;
  margin:0;
 }
     .yemian{
      background-color:#00ffff;
      width: 100%;
      height: 1000px;
     }
 .nav{
  height:100px;
  width: 100%;
  background-color: black;
  color:white;
  position: fixed;
  top: 0;
     }
 .nav .logo{
  height:100px;
  float: left;

 }
.nav span{
  float: right;
  height: 100px;
        text-align: center;
  line-height: 100px;
  word-spacing: 50px;
   padding-right: 100px;}
    .container{
     width: 70%;
     height: 800px;
     margin:0 auto;
     padding-top: 100px;
     padding-bottom: 100px;
     
    }
    .one{
     width: 35%;

        float: left;}
    .one1{
     width: 500px;
     height: 50px;
     margin:10px 0;
     word-spacing: 10px;
    }
    .one1 span{

        background-color:#d2691e;
    }
    .two{
      width: 35%;
      height: 700px;
     
      float: left;
      word-spacing: 10px;}
    .two div{
     margin: 15px 0;
     font-weight: 700;
    }
    .footer{
      text-align: center;
      height: 100px;
      width: 100%;
      line-height: 100px;
      word-spacing: 15px;
      background-color: black;
      color:white;
      position: fixed;
      bottom: 0px;
    } 
    .three{
     width: 25%;
     height: 800px;
     float: left;
     background-color:#00ffff; 
     position: relative;
     border-left: thick solid orange;
    }
    .three .biaodan{
     width: 100px;
     height: 100px;
        position: absolute;
        top:50%;
        left: 50%;
        margin-top: -50px;
        margin-left: -50px;
    }
    .sub{
     background-color: red;
     color: white;
     display: inline-block;
     width:100px;
     height:50px;
     text-align: center;
    }
    .biaodan h1,input{
     margin: 10px auto;
    }
   </style>
</head>
<body>
<div class="yemian">
<div class="nav">
<div class="logo"><img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png"/></div>
<span>课程 职业路径 实战 猿问 手记</span>
</div>
<div class="container">
<div class="one">
<h1>课程推荐</h1>
<div class="one1"><span>职业路径</span> HTML5与CSS3实现动态网页</div>
<div class="one1"><span>职业路径</span> 零基础入门Android语法与界面</div>
<div class="one1"><span>职业路径</span> Ios基础语法与常用控件</div>
<div class="one1"><span>职业路径</span> PHP入门开发</div>
<div class="one1"><span>职业路径</span> Java入门开发</div>
</div>
<div class="two">
<h1>相关课程</h1>
<div>HTML CSS JAVAScript</div>
<div>HTML CSS5 Jquery</div>
<div>移动端基础 移动端app开发</div>
   </div>
   <div class="three">
    <form>
    <div class="biaodan">
    <h1>登录</h1>
    <input type="text" name="name" placeholder="请输入登录邮箱/手机号" /><br/>
    <input type="password" name="pd" placeholder="请输入密码"/><br/>
    <input type="submit" name="sub" class="sub" />
    </div>
    </form>
   </div>
</div>
   <div class="footer">
    <span>网站首页 企业合作 人才招聘 联系我们 常见问题 友情链接</span><br/>
   </div>
</div>
</body>
</html>
请问老师关于这段代码我有两个疑问想请教老师。
1.我应该怎样将one，two里的内容居中？因为我给代码已设置position就会发生重叠现象。
2.请问老师我的页面右侧的three为什么下滑的时候会覆盖fixed的页头部分？

写回答

2回答