老师这个我是这么布局的 iphone6下这头部点击有效果的我写不出来不知道怎么写

首页课程实战体系课手记专栏慕课教程

来源：3-2 作业题

鹿人神经粉

2019-12-17 10:16:04

写回答

5回答

好帮手慕言

2019-12-24

同学你好，项目作业是没有源码的。老师在这里给同学写下顶部的代码，其他的同学要自己写（只需要在不同设备下调整样式就可以了），这样才能提升自己的技术。

css：

代码：

<body>
    <div id="main">
        <div class="background-overlay">
            <div class="container">
                <div class="content-wrap">
                    <nav>
                        <ul>
                            <li><a href="">前端</a></li>
                            <li><a href="">java</a></li>
                            <li><a href="">ios</a></li>
                            <li><a href="">Android</a></li>
                            <li><a href="">php</a></li>
                        </ul>
                        <span></span>
                    </nav>
                    <div class="content">
                        <div class="icon"><img src="./img/1.png" alt=""></div>
                        <div class="name">IMOOC</div>
                        <div class="btn">
                            <span>start</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

css：

* {
    margin: 0px;
    padding: 0px;
}

a {
    text-decoration: none;
}

li {
    list-style: none;
}

/*ipad设备*/
#main {
    width: 100%;
}

.background-overlay {
    background-color: #B2C5CC;
    width: 100%;
    min-height: 700px;
}

.container {
    width: 100%;
    height: auto;
    box-sizing: border-box;
    position: relative;
    padding: 0 40px;
    overflow: hidden;
}

.content-wrap {
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.content-warp>nav {
    width: 100%;
    position: relative;
}

.content-wrap>nav>ul {
    margin: 0 auto;
    padding: 0 8px 0 0;
    text-align: center;
    display: block;
}

.content-wrap>nav>ul>li {
    display: inline-block;
    margin-left: 30px;
    margin-right: 30px;
    padding: 12px 0;
}

.content-wrap>nav>ul>li>a {
    color: #757575;
    transition: color 0.2s ease;
}

.content-wrap>nav>ul>li:first-child>a {
    color: #afafaf;
}


.content {
    padding-top: 100px;
    box-sizing: border-box;
    text-align: center;
}

.content>.icon,
.content>.name,
.content>.btn {
    width: 100%;
}

.content>.icon>img {
    vertical-align: middle;
}

.content>.name {
    line-height: 100px;
    color: #fff;
}

.content>.btn {
    width: 100%;
    box-sizing: border-box;
    padding: 47px 42px 0px 45px;
    margin-bottom: 20px;
}

.content>.btn>span {
    font-size: 13px;
    padding: 15px 60px;
    border-width: 2px;
    border-color: rgb(255, 255, 255);
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);

}






/*iphone6设备*/
@media screen and (max-device-width:376px) {
    .background-overlay>.container>.content-wrap>nav>ul {
        position: absolute;
        width: 100%;
        left: 0;
        top: -350px;
        background: #7EA6B1;
        z-index: 2;
        transition: all 0.5s;
    }

    .background-overlay>.container>.content-wrap>nav>ul>li {
        width: 100%;
        height: 20px;
        border-bottom: 1px solid #B2C5CC;
        margin: 0 auto;
    }

    .background-overlay>.container>.content-wrap>nav>ul>li>a {
        color: #fff;
        font-size: 20px;
        font-weight: bold;
    }

    .background-overlay>.container>.content-wrap>nav:before {
        content: 'imooc';
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        line-height: 80px;
        background: #7EA6B1;
        z-index: 3;
        color: #fff;
        font-size: 28px;
        font-weight: bold;
    }

    .background-overlay>.container>.content-wrap>nav>span {
        content: '';
        position: absolute;
        right: 30px;
        top: 30px;
        width: 20px;
        height: 20px;
        border: 2px solid #B2C5CC;
        z-index: 3;
    }

}

作业完成之后，建议同学上传作业。会有批复作业的老师为你指导，并把问题与修改方案整理成文档发送给你，能够更好的帮助你完善作业