老师帮忙检查一下，非常感谢！

来源：2-12 编程练习

bao_

2020-01-26 18:16:12

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        .header {
            width: 100%;
            height: 100px;
            background: black;
            overflow: hidden;
            zoom: 1;
            position: fixed;
            top: 0px;
        }

        .nav_logo img {
            width: 300px;
            height: 100px;
            line-height: 100px;
            float: left;
        }

        .header .nav_list ul {
            list-style: none;
            line-height: 100px;
            float: right;

        }

        .header .nav_list ul li {
            display: inline-block;
            padding: 0 30px;
            color: white;
        }


        .content {
            width: 90%;
            height: 800px;
            background: #00ccff;
            margin: 0 auto;
            overflow: hidden;
            zoom: 1;
            margin-top: 100px;
            margin-bottom: 100px;
        }

        h3 {
            font-size:30px;
            line-height: 60px;
        }

        .content .content_left ul {
            list-style: none;
        }

        .content .content_left ul li::before {
            content: "职业路径";
            background: pink;
            margin-right: 10px;
        }

        .content .content_middle ul {
            list-style: none;
        }

        .content_left {
            width: 35%;
            float: left;
            margin-top: 80px;
        }

        .content_left ul li {
            line-height: 30px;
        }

        .content_middle {
            width: 30%;
            float: left;
            margin-top: 80px;
        }

        .content_middle ul li {
            line-height: 30px;
        }

        .content_right {
            width: 35%;
            height: 800px;
            float: right;
            border-left: 10px solid pink;
            box-sizing: border-box;
        }
        .content_r{
            margin:80px 20% 0 20%;
        }
        input{
            border: 1px #aaa solid;
            border-radius: 4px;
            background:white;
            text-align: left;
            font-size: 18px;
            width: 187px;
            height: 30px;
            line-height: 50px;
            padding: 0 10px;
            margin: 10px 0; 
        }
        .btn_login{
            width: 207px;
            height: 35px;
            font-size: 26px;
            font-family: "楷体";
            background-color: #CC0033;
            border: #CC0033;
            margin-top: 10px;
            cursor: pointer;
            border-radius: 4px;

        }
        .footer {
            width: 100%;
            height: 100px;
            background: black;
            text-align: center;
            position: fixed;
            bottom: 0px;
        }

        .footer ul {
            list-style: none;
            line-height: 100px;

        }

        .footer ul li {
            display: inline-block;
            line-height: 100px;
            padding: 0 30px;
            color: white;

        }

        body {
            background: #00ccff;
        }
    </style>
</head>

<body>
    <div class="big_content">
        <div class="header">
            <div class="nav_logo"><img src="http://img1.sycdn.imooc.com\/climg/58c0d2d900016ce303000100.png" /></div>
            <div class="nav_list">
                <ul>
                    <li>课程</li>
                    <li>职业路径</li>
                    <li>实战</li>
                    <li>猿问</li>
                    <li>手记</li>
                </ul>
            </div>
        </div>
        <div class="content">
            <div class="content_left">
                <h3>课程推荐</h3>
                <ul>
                    <li>HTML5与CSS3实现动态网页</li>
                    <li>零基础入门Android语法与界面</li>
                    <li>iOS基础语法与常用控件</li>
                    <li>PHP入门开发</li>
                    <li>JAVA入门开发</li>
                </ul>

            </div>
            <div class="content_middle">
                <h3>相关课程</h3>
                <ul>
                    <li>HTML&nbsp;&nbsp;CSS&nbsp;&nbsp;JavaScript</li>
                    <li>HTML5&nbsp;&nbsp;CSS3&nbsp;&nbsp;Query</li>
                    <li>移动端基础&nbsp;&nbsp;移动端基础APP开发</li>
                </ul>
            </div>
            <div class="content_right">
                <div class="content_r">
                    <h3>登录</h3>
                    <input type="text" placeholder="请输入登陆邮箱/手机号"/>
                    <br/>
                    <input type="password" placeholder="6-16位密码,区分大小写,不能用空格" />
                    <br />
                    <button type='button' class="btn_login">登录</button>
                </div>
            </div>
        </div>
        <div class="footer">
            <ul>
                <li>网站首页</li>
                <li>企业合作</li>
                <li>人才招聘</li>
                <li>联系我们</li>
                <li>常见问题</li>
                <li>友情链接</li>
            </ul>
        </div>
    </div>
</body>

</html>

麻烦老师检查代码的同时能给我一些建议,还有哪些地方可以优化一下,非常感谢!

写回答

1回答