老师帮忙看下2.10的作业，还有可以优化的地方吗？谢谢！

来源：2-11 经典的三列布局

Zcper

2017-04-13 14:20:21

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    *{
        margin:0;
        padding:0;
        text-align:center;
        text-size:20px;
        color: #fff;
        background:rgb(173,216,230);
    }
    .header{
        width: 100%; 
        height:80px;
        background: #000;
        margin: 0 auto;
        position: fixed;
    }
    .logo{
       width:128px;
        height:40px;
        background:url("http://class.imooc.com/static/module/common/img/logo.png") center no-repeat;
        padding: 20px 20px;
        float:left;
    }
    .nav{
        width:auto;
        height:auto;
        float:right;
        background:#000;
    }
    .nav span{
        width:auto;
        height:80px;
        line-height:80px;
        margin:0 20px;
        float:left;
        background:#000;
    }
     .footer{
      margin: 0 auto;
      width: 100%;
      height: auto;
      background: #000;
      position: fixed;
      bottom: 0;
    }
    .footer span{
      width:auto;
      height: 60px;
      line-height: 60px;
      margin: 10px;
      background:#000;
    }
    .main{
        width:80%;
        height:1500px;
        padding-top:80px;
        margin: 0 auto;/
    }
    h1{
        text-align:left;
        color:#000;
        margin: 30px 0;
    }
    .left{
        width:30%;
        height:800px;
        float:left;
        padding-right: 5%;
    }
    .middle{
        width:30%;
        height:800px;
        float:left;
    }
    .left ul li{
        list-style:none;
        text-align:left;
        color:#000;
        height:50px;
        line-height:50px;
    }
    .left ul li span{
        background:rgb(255,153,153);
        color:#000;
    }
    .aaa{
        list-style:none;
        text-align:left;
        color:#000;
        width: auto;
        height:50px;
        line-height:50px;
        margin: 0;
        float: left;
        margin-right: 40px;
    }
    .right{
    	width: 25%;
    	height: 800px;
    	float: right;
    	border-left: 5px orange solid;
    	padding-left: 8%;
    }
    .login{
    	text-align: left;
	}
   	input{
    	text-align:left;
    	background: white;
    	width: 250px;
    	height: 50px;
    }
	button{
		height: 40px;
		width: 250px;
		background: red;
	}
  </style>
</head>
<body>
  <div class="header">
      <div class="logo"></div>
      <div class="nav">
          <span>课程</span>
          <span>职业路径</span>
          <span>实战</span>
          <span>猿问</span>
          <span>手记</span>
      </div>
  </div>
  <div class="main">
      <div class="left">
          <h1>课程推荐</h1>
          <ul>
              <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="middle">
          <h1>相关课程</h1>
            <div class="aaa">HTML</div>
            <div class="aaa">CSS</div>
            <div class="aaa">JavaScript</div>
            <div class="aaa">HTML5</div>
            <div class="aaa">CSS3</div>
            <div class="aaa">Jquery</div>
            <div class="aaa">移动端基础</div>
            <div class="aaa">移动端APP开发</div>
      </div>
      <div class="right">
      	<h1>登录</h1>
      	<div class="login">
      		<input type="text" name="username" size="50px" placeholder="请输入登录邮箱/手机号"><br /><br />
      		<input type="password" name="password" size="50px" placeholder="6-16位密码，区分大小写，不能用空格"><br /><br />
      		<button type="button">登录</button>
      	</div>
      </div>
  </div>
  <div class="footer">
        <span>网站首页</span>
        <span>企业合作</span>
        <span>人才招聘</span>
        <span>联系我们</span>
        <span>常见问题</span>
        <span>友情链接</span>
  </div>
</body>
</html>

写回答

1回答