老师,我的第一屏的div为什么会跑到导航里面了呢?

老师,我的第一屏的div为什么会跑到导航里面了呢?

css文件

-------------

.header{ 

    background-color: #f7f7f7;

}

.header_wrap{

    width:1200px;

    height:80px;

    position:relative;

    margin:0 auto;

}

.header_logo{

    width: 150px;

    height:38px;

    line-height:38px;

    font-size:20px;

    color:#07111b;

    text-indent:50px;

    background:url('../img/logo.png') left center no-repeat;

    background-size:38px 38px;

    position:absolute;

    top:50%;

    margin-top:-19px;

    left:20px;

}

.header_nav{

    height:38px;

    position:absolute;

    top:50%;

    right:20px;

    margin-top:-19px;    

}

.header_nav-item{

  font-size:14px;

  color: #292f35;

   display: block;

   height:38px;

   line-height:38px;

   float:left;

   width:30px;

   text-align:center;

   margin-left:40px; 

   position:relative; 

}

.header_nav-item:hover{color:#f01400;}

.header_nav-item_status_active{

    color: #f01400;

}

.header_nav-item_status_active:after{

    content:'';

    display:block;

    height:2px;

    width:100%;

    background-color:#f01400 ;

    position:absolute;

    left:0;

    bottom:0;

}

.header_nav-item_custom_button{background:#000;

color:#f4f4f5;

text-align:center;

border-radius:3px;

width:90px;

border-radius: 3px;

margin-left:40px;

padding:0;}


.screen-1{

height:800px;

background:url(../img/bg-screen-1.png) no-repeat center;

overflow: hidden;

background-size:100%;


}

.sreen-1_heading{}

.screen-1-phone{}

.screen-1-shadow{}

---------------

html文件

--------------------

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <link rel="stylesheet" href="../css/base.css" />

    <link rel="stylesheet" href="../css/cssall1.css" />

    <title>Document</title>

  </head>

  <body>

    <header class="header">

      <div class="header_wrap">

        <div class="header_logo">慕课手机</div>

        <nav class="header_nav">

        <a src="javascript:;" class="header_nav-item header_nav-item_status_active">首页</a>

        <a src="javascript:;" class="header_nav-item">外观</a>

        <a src="javascript:;" class="header_nav-item">配置</a>

        <a src="javascript:;" class="header_nav-item">型号</a>

        <a src="javascript:;" class="header_nav-item">说明</a>

        <a src="javascript:;" class="header_nav-item header_nav-item_custom_button">立即购买</a>

    </nav>

<div class="screen-1">

  <div class="sreen-1_heading"><span>慕课手机</span>让你的生活更加精彩 </div>

  <div class="screen-1-phone"></div>

  <div class="screen-1-shadow"></div>

</div>


      </div>

    </header>

  </body>

</html>


http://img1.sycdn.imooc.com//climg/5ef17eb909da3d7718640565.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

5回答
好帮手慕码 2020-06-25 19:05:23

同学你好,可以自己找到解决方案棒棒的,继续加油。祝学习愉快~

好帮手慕码 2020-06-24 09:38:03

同学你好,效果中是没有阴影的。同学的代码有如下问题:

1、标签嵌套错了,header和screen-1应该是同级关系,如下:

http://img1.sycdn.imooc.com//climg/5ef2ae01090a2e5511890496.jpg

2、background-size设置的不对。background-size: 100%;会先满足 宽度100%,那么垂直部分就无法实现100%,导致出现了空行。建议修改:

http://img1.sycdn.imooc.com//climg/5ef2ae48091e6b1406610183.jpg

效果:

http://img1.sycdn.imooc.com//climg/5ef2ae67095af54519200904.jpg

同学可以测试看下。

祝学习愉快~

  • 提问者 慕用6222994 #1
    老师不是的,是因为我base文件里面搞错了一个参数。我找到了解决方案了
    2020-06-25 18:43:10
好帮手慕码 2020-06-23 19:11:53

同学你好,不知道同学修改了什么,建议你新建提问:把最新的代码粘贴到问答区进行准确的测试。

祝学习愉快~

  • 提问者 慕用6222994 #1
    上面就是我写的代码啦
    2020-06-23 19:20:48
  • 提问者 慕用6222994 #2
    上面就是我写的代码啦
    2020-06-23 19:20:59
好帮手慕码 2020-06-23 16:00:16

同学你好,“左上角和右上角的阴影”是指哪里呢?老师查看视频中是没有这个效果的,如下:

http://img1.sycdn.imooc.com//climg/5ef1b52009c10ea007680081.jpg

建议同学详细描述一下,以便准确帮助同学解答。

祝学习愉快~

  • 提问者 慕用6222994 #1
    老师,这是什么问题呢?我接下来的第一屏,也出现了这种问题,部分显示不出背景图片
    2020-06-23 18:48:43
提问者 慕用6222994 2020-06-23 12:19:47

老师,我知道原因了。

但是导航左上角和右上角的阴影却没有消失,这是什么问题呢?

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师