麻烦老师检查一下，是否有需要优化改正的地方

来源：2-12 编程练习

要开心鸭

2019-08-29 10:14:18

<!DOCTYPE html>
<html>
<head>
	<title>测试</title>
	<meta charset="utf-8">
	<style type="text/css">
        *{
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
        }
        /*导航*/
        .header{
            width: 1600px;
            height: 100px;
            background: black;
            position: fixed;
            left: 50%;
            margin-left: -800px;
        }
        .logo{
            background: url(http://climg.mukewang.com/58c0d2d900016ce303000100.png) no-repeat;
            padding-left: 32px;
            width: 300px;
            height: 100px;
            vertical-align: middle;
            
            float: left;
        }
        .nav ul{
        	height: 100px;
        	line-height: 100px;
        	float: right;
        }
        .nav ul li{
            color: white;
            float: left;
            display: block;
            padding-right: 66px;
        }
        /*内容*/
        .content{
            width: 1600px;
            height: 400px;
            padding: 100px 0;
            background: rgb(185,215,228);
            margin: 0 auto;
            overflow: hidden;
            zoom:1;
        }
        p{
            margin: 10px 0;
            color: black;
        }
        p span{ margin-right: 20px;}
        input{
            width: 200px;
            height: 35px;
            background: white;
            margin: 10px 0;
            padding-left: 5px;
            display: block;
        }
        .left,.center,.right{
            width: 28%;
            height: 400px;
            padding: 100px 0 100px 5%;
            float: left;
        }
        .line{
            width: 1%;
            height: 400px;
            padding: 100px 0;
            background: orange;
            float: left;
        }
       
        .left p span:nth-child(1){
            background: pink;
        }
        .loginBtn{
            background: red;
            color: white;
            width: 210px;
            border:none;
        }
       
       
        /*底部*/
        .footer{
            width: 1600px;
            height: 100px;
            background: black;
            position: fixed;
            left: 50%;
            margin-left: -800px;
        }
        .footer ul{
            list-style-type: none;
            display: inline;
            height: 50px;
            line-height: 50px;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-top: -25px;
            margin-left: -492px;  
        }
        .footer ul li{
            color: white;
            float: left;
            padding-right: 100px;
        }
	</style>
</head>
<body>
    <div>
        <div class="header">
           <div class="logo"></div>
           <div class="nav">
               <ul>
                   <li>课程</li>
                   <li>职业路径</li>
                   <li>实战</li>
                   <li>猿问</li>
                   <li>手记</li>
               </ul>
           </div>
        </div>
        <div class="content">
            <div class="left">
               <h2>课程推荐</h2>
               <p><span>职业路径</span><span>HTML5与CSS3实现动态网页</span></p>
               <p><span>职业路径</span><span>零基础入门Android语法与界面</span></p>
               <p><span>职业路径</span><span>iOS基础语法与常用控件</span></p>
               <p><span>职业路径</span><span>PHP入门开发</span></p>
               <p><span>职业路径</span><span>JAVA入门开发</span></p>
            </div>
            <div class="center">
                <h2>课程推荐</h2>
                <p><span>HTML</span><span>CSS</span><span>JavaScript</span></p>
                <p><span>HTML5</span><span>CSS3</span><span>Jquery</span></p>
                <p><span>移动端基础</span><span>移动端APP开发</span></p>
            </div>
            <div class="line"></div>
            <div class="right">
                <h2>登录</h2>
                <input type="text" name="phone" placeholder="请输入登录邮箱/手机号">
                <input type="text" name="psd" placeholder="6-16位密码，区分大小写，不能用空格">
                <input type="button" value="登录" class="loginBtn">
            </div>
        </div>
        <div class="footer">
            <ul>
                   <li>网站首页</li>
                   <li>企业合作</li>
                   <li>人才招聘</li>
                   <li>联系我们</li>
                   <li>常见问题</li>
                   <li>友情链接</li>
               </ul>
        </div>
    </div>
</body>
</html>

写回答

1回答