3-3编程练习请老师完善

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    /*此处写代码*/
    *{margin:0;padding:0;}
    body{min-width:700px;}
    ul{list-style:none;}
    a{text-decoration:none;}
    .header,
    .footer{width:100%;height:100px;
            background:#333;
            overflow:hidden;zoom:1;
    }
    li a{line-height:100px;
        font-family:"微软雅黑";
        font-size:20px;
        color:#fff;
    }
    a:hover{color: orange; 
    }
    .header .logo{float:left;}
    .header .nav {float:right;}
    .header .nav li{float:left;margin-right:20px;}
    .footer .nav1{width:75%;float:right;} 
    .footer .nav1 li a{float:left;margin:20px;
                       display:block;
                       line-height:100px;
    }
    .container{padding:0 300px 0 400px;
    }
    .left,
    .middle,
    .right{
           position: relative;
           float: left;
         min-height: 700px;
   }
    .middle{width:100%;background:pink;}
     
    .left{width:400px;background:#FFE4B5;
         margin-left:-100%;
         left:-400px;
    }
   .left h3{margin:100px 0 0 50px;
    }
    p{margin:0 0 0 50px;}
    span{background: pink;}
    .right{width:300px;background:skyblue;
            margin-right: -300px;
    }
    .right h3{margin:100px 0 0 50px;}
    input{margin:0 0 0 50px;}
    img{ position:absolute;
         left:0px;
        top:0px;
         right:0px;
         bottom:0px;
         margin:auto auto; 
  }
     
  </style>
</head>
<body>
  <!-- 此处写代码 -->
  <div class="header">
      <div class="logo"><a href="#"><img src="http://img1.sycdn.imooc.com/climg//590037f600016ce303000100.png"/></a></div>
      <ul class="nav" >
            <li><a href="#">课程</a></li>
            <li><a href="#">职业路径</a></li>
            <li><a href="#">实战</a></li>
            <li><a href="#">猿问</a></li>
            <li><a href="#">手记</a></li>
        </ul>
  </div>
  <div class="container">
      <div class="middle">
           
          <img src="http://img1.sycdn.imooc.com/climg//590037e00001fab706000400.jpg"/></div>
           
      <div class="left">
           
                <h3>课程推荐</h3>
                <br/>
                <p><span>职业路径</span>&nbsp;&nbsp; HTMLS与CSS3实现动态网页</p>
                <br/>
                <p> <span>职业路径</span>&nbsp;&nbsp;零基础入门Android语法与界面</p>
                <br/>
                <p><span>职业路径</span>&nbsp;&nbsp; ios基础语法与常用控件</p>
                <br/>
                <p><span>职业路径</span>&nbsp;&nbsp; PHP入门开发</p>
                <br/>
                <p><span>职业路径</span>&nbsp;&nbsp;JAVA入门开发</p>
             
      </div>
      <div class="right">
           
            <h3>登录</h3>
            <br/>
            <input type="text" name="usre" size="20"
            style="height:50px;width:200px"
            placeholder="请输入登录邮箱/手机号">
            <br/>
            <br/>
            <input type="password" name="pas"
            style="height:50px;width:200px;
                   size:8px;"
            placeholder="6-16位密码.区分大小写.不能用空格.">
            <br/>
            <br/>
            <input type="button" value="登录"
            style="background:red;height:50px;
            width:200px;border:none;color:#fff">
      
      </div>
  </div>
  <div class="footer">
      <ul class="nav1">
              <li><a href="#">网站首页</a></li>
              <li><a href="#">企业合作</a></li>
              <li><a href="#">人才招聘</a></li>
              <li><a href="#">联系我们</a></li>
              <li><a href="#">常见问题</a></li>
              <li><a href="#">友情链接</a></li>
          </ul>
  </div>
</body>
</html>