老师看一下有需要优化的地方嘛

来源：2-10 编程练习

bao_

2020-01-26 11:09:07

<!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: 70%;
            height: 800px;
            background: #00ccff;
            margin:0 auto;
            overflow:hidden;
            zoom: 1;
            margin-top:100px;
            margin-bottom:100px;
        }
        h3{
            line-height: 30px;
        }
        .content .content_left ul {
            list-style: none;
        }

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

        .content_left {
            width: 55%;
            float: left;
            margin-top:80px;
        }
        .content_left ul li{
            line-height: 30px;
        }
        .content_right {
            width: 45%;
            float: right;
            margin-top:80px;
        }
        .content_right ul li{
            line-height:30px;
        }
        .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_right">
                <h3>相关课程</h3>
                <ul>
                    <li>HTML CSS JavaScript</li>
                    <li>HTML5 CSS3 Query</li>
                    <li>移动端基础 移动端基础APP开发</li>
                </ul>
            </div>
        </div>
        <div class="footer">
            <ul>
                <li>网站首页</li>
                <li>企业合作</li>
                <li>人才招聘</li>
                <li>联系我们</li>
                <li>常见问题</li>
                <li>友情链接</li>
            </ul>
        </div>
    </div>
</body>

</html>

写回答

1回答