老师我的首页2个字的下划线没有显示,还有立即购买的框怎么会显示成这样?

老师我的首页2个字的下划线没有显示,还有立即购买的框怎么会显示成这样?

<body>

    <header class="header">

        <div class="header_wrap">

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

       

        <nav class="header_nav">

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

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

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

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

            <a  href="javascript:;" class="header_nav-item">其他产品</a>

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


        </nav>

    </div>

    </header>

    

</body>


.header{

    

    background-color: #f7f7f7;

   


}

.header_wrap{

    width:1200px;

    position: relative;

    height:80px;

    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:50px;

   margin-top: -19px;

   left:20px;

}

.header_nav{

    position:absolute;

    right:20px;

    height:38px;

    top:50%;

    margin-top:-19px;


}

.header_nav-item{

    color:#292f35;

    font-size: 14px;

    display: block;

    height:38px;

    float:left;

    padding-left: 40px;

    position:relative;

}

.header_nav-item:hover{

    color:#f01400;

}

.header_nav-item_custom_button{

    background: #000;

    color:#f4f4f5;

    text-align: center;

    border-radius: 3px;

}

.header__nav-item_status_active{

    color:#f01400;

   

}

.header__nav-item_status_active::affter{

    content: ' ';

    display: block;

    width:100%;

    height:2px;

    position:absolute;

    left:0;

    bottom:0;

    background-color: #f01400;


}

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

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

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

1回答
好帮手慕久久 2020-09-17 16:53:24

同学你好,问题解答如下:

1. 红色下划线没有显示,是因为“after”这个伪元素,单词写错了,如下:

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

2. 由于“.header_nav-item”这个样式中,设置了 padding-left: 40px;,该样式影响了“立即购买”的按钮,导致按钮样式不对,建议将其去除,如下:

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

同学试一下。

如果我的回答帮到了你,欢迎采纳,祝学习愉快!

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

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

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

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

在线咨询

领取优惠

免费试听

领取大纲

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