2-11 麻烦老师批改

来源：2-12 编程练习

金属girl

2018-01-28 12:00:33

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{
      margin:0; padding:0;
    }
    ul li{	
    	list-style-type: none;
	}

    .head{
       width:100%;
    		height:100px;
        background-color:#000;
        position:fixed;
        top: 0;
    }
    .left{float:left;}
    .right{float:right;}
    .right ul li{list-style:none; float:left; margin-right:20px;
           height:100px; line-height:100px;color:#fff;
    }
    
    .container{
        width:80%;
        height:600px;
        background-color:#aed8e6;
        padding: 0 10%;
        padding-top:100px;
    }
    .con-left{
   		width: 40%;
      height: 100%;
  		float: left;
     	}

  	.con-left ul li,.con-mid ul li {
  		height: 40px;
  		line-height: 40px;
  	}
  	.con-left span{
  		margin-right:20px;
  		background-color: #ff979b;}
  	.con-mid{
  		width: 30%;
      height: 100%;
  		float: left;
  	}
    .con-mid ul{float: left;}

    .con-mid span{margin-right: 20px;}
   .mid-border{
      background-color:  #ff979b;
      width: 8px;
      height: 100%;
      float: right;
    }
    .con-right{
      width: 30%;
      height: 100%;
      float: left;
    }
    .footer{
        position:fixed;
        bottom:0;
        width:100%;
        height:100px;
        background:#000;
        color:#fff;
        height:100px;
        line-height:100px;
        text-align: center;
        
    }
    .footer ul{
    	display: inline-block;
    }
    .footer ul li{
        list-style:none;
        float:left;
        font-size: 14px;
		    padding-right:150px;         
     }
    .footer li:nth-child(6){padding-right: 0px;}
    form{margin-left: 30px;float: right;}
    input{
      height: 50px;
      width: 260px;
      margin-bottom: 30px;
    }
    .container .c-top{margin-top: 100px;}
  </style>
</head>
<body>
  <!-- 此处写代码 -->
 
  <div class="head">
            <div class="left">
          <img src="http://climg.mukewang.com/58c0d2d900016ce303000100.png">
      </div>
      <div class="right">
          <ul>
              <li>课程</li><li>职业路径</li><li>实战</li><li>提问</li><li>手记</li>
          </ul>
      </div>
  </div>

  <div class="container">
    <div class="con-left c-top">
  		<ul>
  			<li><h2>课程推荐</h2></li>
  			<li><span>职业路径</span>HTML5与CSS3实现动态网页</li>
  			<li><span>职业路径</span>零基础入门Android语法与界面</li>
  			<li><span>职业路径</span>iOS基础语法与常用控件</li>
  			<li><span>职业路径</span>PHP入门开发</li>
  			<li><span>职业路径</span>JAVA入门开发</li>
  		</ul>
		
   </div>
    <div class="con-mid">
  		<ul class="c-top">
  			<li><h2>相关课程</h2></li>
  			<li><span>HTML</span><span>CSS</span><span>JavaScript</span></li>
  			<li><span>HTML5</span><span>CSS3</span><span>Jquery</span></li>
  			<li><span>移动端基础</span><span>移动端APP开发</span></li>
  		</ul>
		<div class="mid-border"></div>
    </div>
    <div class="con-right c-top">
      <form>
        <h2>登录</h2><br>
        <input type="email" name="phone"  placeholder="请输入登录邮箱/手机号"><br>
        <input type="password" name="password" placeholder="6-16位密码，区分大小写，不能用空格"><br>
        <input type="button" style="background-color: red;color: #fff;border: none;" name="login" value="登录">
      </form>
    </div>
  </div>

  <div class="footer">
      <ul>
          <li>网站首页</li>
          <li>企业合作</li>
          <li>人才招聘</li>
          <li>联系我们</li>
          <li>常见问题</li>
          <li>友情链接</li>
      </ul>
  </div>
 
</body>
</html>

写回答

1回答