2-9作业题

来源:2-10 编程练习

想取的名字都被占了

2017-08-18 15:40:02

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style>

            *{

                margin: 0;

                padding: 0;

            }

        .nav{

        width:100%;

        height:100px; 

        background:black; 

        position: fixed;   

    }

    .text{

        float:right;

    }

    .text li{

        display:inline-block;

        width:120px;

        height: 100px;

        text-align: center;

        line-height: 100px;

        color: #fff;

        font-family: "微软雅黑";

        font-size: 20px;

    }

    .logo{

        float: left;

    }

    .body{

        padding-top: 100px;

        width: 100%;

        height: 500px;

        background: lightblue;  

        font-family: "微软雅黑"; 

    }

    .body1{

        float: left;

        width:60%;

        line-height: 40px;

        padding-top: 80px;

    } 

    .body2{

        float: right;

        width:40%;

        line-height: 40px;

        padding-top: 80px;

    }

    .abc{margin-left:120px; }

    span{background:#FFB6C1;}

    .foot1{

      background: black;

      width: 100%;

      height: 50px;

      text-align: center;

      color: white;

      line-height:50px;

    }

        </style>

    </head>

    <body>

        <div class="nav">

            <div class="logo">

                <img  src="http://climg.mukewang.com/58c0d2d900016ce303000100.png" />

            </div>

            <div class="text">

                <ul>

                    <li>课程</li>

                    <li>职业路径</li>

                    <li>实战</li>

                    <li>提问</li>

                    <li>手记</li>

                </ul>

            </div>

        </div>

        <div class="body">

            <div class="body1">

                <h1 class="abc">课程推荐</h1>

                <p class="abc"><span>职业路径</span>&nbsp;&nbsp;HTML5与CSS3实现动态网页</p>

                <p class="abc"><span>职业路径</span>&nbsp;&nbsp;零基础入门</p>

                <p class="abc"><span>职业路径</span>&nbsp;&nbsp;iOS 11入门</p>

                <p class="abc"><span>职业路径</span>&nbsp;&nbsp;PHP入门</p>

                <p class="abc"><span>职业路径</span>&nbsp;&nbsp;Java开发入门</p>

            </div>

            <div class="body2">

                <h1>相关课程</h1>

                <p>HTML&nbsp;&nbsp;CSS&nbsp;&nbsp;JavaScrip</p>

                <p>HTML5&nbsp;&nbsp;CSS3&nbsp;&nbsp;Jquery</p>

                <p>移动端基础&nbsp;&nbsp;移动端APP开发</p>

            </div>

        </div>

        <div class="foot1">

        网站首页&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;企业合作&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;人才招聘&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;联系我们&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;常见问题&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;友情链接

        </div>

</body>

</html>


写回答

1回答

Miss路

2017-08-18

可以的,基本的大块做到了,但是有些小的细节,做的不好,或者说是标签的使用还不是很会用,比如,footer中有好多个导航项,最好不用要每个之间加上空格(&nbsp;),可以像头部的导航一样,使用ul和li来实现。继续加油!

0

0 学习 · 36712 问题

查看课程

相似问题