末尾一行不知为何总是换行,还有请老师帮我精简一下代码,感觉很乱,谢谢

<html>

<head>

  <meta charset="UTF-8">

  <title></title>

  <style type="text/css">

        *{

         margin:0;

         padding:0;  }

        .header{background:black;width:100%;height:100px;min-width:900px;}

        .header-1{float:left;}

        .header-2{float:right;}

        .header ul li{display:inline;}

        .contin{padding:0 180px 0 220px;height:700px;}

        .middle{width:100%;height:700px;background:pink;position:relative;float:left;min-width:500px;}

        .middle img{width:400px;height:500px;position:absolute;top:50%;left:50%;margin-top:-250px;margin-left:-200px;}

        .left{float:left;background:yellow;height:700px;width:300px;position:relative;left:-220px;margin-left:-100%;text-align:center;}

        .left-1{height:120px;position:relative;top:20%;}

        .left-1 h2{position:relative;left:-50px;}

        .right{float:left;background:blue;width:180px;height:700px;position:relative;right:-180px;margin-left:-180px;text-align:center;}

        .right div{position:relative;top:120px;}

        span{background:pink;}

        .left ul li{margin-left:3px;margin-bottom:25px;list-style-type:none;}

        input{width:150px;height:40px;margin-top:20px;}

        .d22{background:red;}

        .right_1text h2{position:relative;left:-50px;}

        .footer{background:green;width:100%;height:100px;text-align:center;}

        

        .footer ul li{display:inline-block;line-height:100px;}

        .footer ul li a{text-decoration:none; }

        

    /*此处写代码*/

  </style>

</head>

<body>

    <div class="header">

    <div class="header-1"><img src="http://climg.mukewang.com/590037f600016ce303000100.png" /></div>

    <div class="header-2">

        <ul>

            <li>手记</li>

            <li>猿问</li>

            <li>实战</li>

            <li>职业路径</li>

            <li>课程</li>

        </ul>       

    </div>


</div>

    <div class="contin">

        <div class="middle">

            <img src="http://climg.mukewang.com/590037e00001fab706000400.jpg">

        </div>

        <div class="left">

            <div class="left-1">

                <h2>课程推荐</h2>

                <ul>

                    <li><span>职业路径</span>HTML5和CSS3实现动态网页</li>

                    <li><span>职业路径</span>HTML5和CSS3实现动态网页</li>

                    <li><span>职业路径</span>HTML5和CSS3实现动态网页</li>

                    <li><span>职业路径</span>HTML5和CSS3实现动态网页</li>

                    <li><span>职业路径</span>HTML5和CSS3实现动态网页</li>

                </ul>

            </div>

        </div>

        <div class="right">

            <div class="right_1text">

                <h2>登录</h2>

                <form>

                    <input type="text" name="user" placeholder="请输入登录邮箱/手机号" /><br/>

                    <input type="password" name="pass" placeholder="6-16位密码,区分大小写,不能有空格" /><br/>

                    <input type="button" value="登录" class="d22"/>

                </form>

            </div>

        </div>

    </div>

        <div class="footer">

            <ul>

                <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>


慕尼黑1589570
浏览 1970回答 1
1回答
打开App,查看更多内容
随时随地看视频慕课网APP