老师我的首页2个字的下划线没有显示，还有立即购买的框怎么会显示成这样？
来源：3-3 header头部导航条制作
慕姐8225231
2020-09-17 16:35:42
<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;
}
1回答
-
好帮手慕久久
2020-09-17
同学你好，问题解答如下：
1. 红色下划线没有显示，是因为“after”这个伪元素，单词写错了，如下：
2. 由于“.header_nav-item”这个样式中，设置了 padding-left: 40px;，该样式影响了“立即购买”的按钮，导致按钮样式不对，建议将其去除，如下：
同学试一下。
如果我的回答帮到了你，欢迎采纳，祝学习愉快！
0
相似问题