2-11编程问题

来源：2-12 编程练习

helen_papa

2018-03-14 21:43:03

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style>
*{margin:0;
    padding:0;
font-family:"宋体";}
.header{width:100%;
          height:70px;
    background:black;
    position:fixed;
    }
.png{width:200px;
        height:70px;
  float:left;
  line-height:70px;}
.content{float:right;
            width:400px;
   height:70px;
   text-align:center;
   line-height:70px;
   }
a{text-decoration:none;}
ul li{display:inline-block;}
.content li{list-style:none;
     font-size:15px;
     color:white;
     margin:10px;
     margin-top:-10px;
}
.container{width:100%;
            height:1500px;
            background-color:teal;}
.one{width:33%;
     height:1500px;
  float:left;
  padding-left:80px;
  padding-top:100px;
      }
p{padding:15px;}
.two{width:20%;
      height:1500px;
   float:left;
   padding-left:40px;
   padding-top:100px;
      }
.two ul li{padding:15px;}
.three{width:0.5%;
        height:1500px;
     background-color:yellow;
     float:left;
     padding-top:100px;
     }
.four{width:35%;
        height:1500px;
     float:right;
     padding-right:30px;
     padding-top:100px;
         }
   input{display:block;
         margin:5px;}

.end{width:100%;
      height:80px;
   background-color:black;
   bottom:0;
   position:fixed;
   }
.end ul li{list-style:none;
            color:white;
            line-height:80px;
      padding:30px;
      margin-top:-30px;
}
    .end ul{width:700px;
         margin:0 auto;
   }


</style>
</head>
<body>
<div class="header">
     <img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" class="png">
      <ul class="content">
   <a href=""><li>课程</li></a>
   <a href=""><li>职业路径</li></a>
   <a href=""><li>实战</li></a>
   <a href=""><li>猿问</li></a>
<a href=""><li>手记</li></a>
   </ul>
      </div>
   <div class="container">
    <div class="one">

        <h2>课程推荐</h2>
        <p>职业路径  HTML5与CSS3实现动态网页</p>
        <p>职业路径  零基础入门Android语法与界面</p>
        <p>职业路径  iOS基础语法与常用控件</p>
        <p>职业路径  PHP入门开发</p>
        <p>职业路径  JAVA入门开发</p>
        </div>
    <div class="two">
        <h2>相关课程</h2>
        <ul>
            <li>HTML  CSS  JavaScript</li><br/>
            <li>HTML5  CSS3  Jquery</li><br/>
            <li>移动端基础  移动端APP开发</li>
        </ul>
    </div>
<div class="three"></div>
<div class="four">
<h2>登录</h2>
<form>
<input type="text" name="your name" value="" placeholder="请输入登录邮箱、手机号" style="width:200px;height:40px;">
    <input type="password" name="psw" value="" placeholder="6-16位密码,区分大小写,不能用空格" style="width:200px;height:40px;">
<input type="submit" value="登录" style="width:200px;height:40px;background:red;" >
</form>
</div>
   </div>
   <div class="end">
   <ul>
<a href="#"><li>网站首页</li></a>
   <a href="#"><li>企业合作</li></a>
<a href="#"><li>人才招聘</li></a>
   <a href="#"><li>联系我们</li></a>
<a href="#"><li>常见问题</li></a>
   <a href="#"><li>友情链接</li></a>
    </ul>
   </div>
</body>
</html>