index-menu容器沒有被撐開,導致menu-tips直接頂?shù)絝ooter下面去了,顯示index-menu為0?
/*菜單menu部分*/
.index-menu{
position:relative;
border-top:4px solid #f34949;?
}
.index-menu .menu-tips{
position:absolute;
left:50%;
top:0px;
margin-left:-78px;
width:156px;
height:75px;
text-align:center;
line-height:65px;
color:#fff;
background:#f34949;
}
/*菜單提示標簽*/
.index-menu .menu-tips:after{
position:absolute;
content:"";
left:0;
buttom:0;
width:0;
height:0;
border-left:78px solid transparent;
border-right:78px solid transparent;
border-bottom:10px solid #fff;
}
2016-07-15
還是要把.index-menu .menu-tips {}位置的position:absolute;改成position:relative;才能被撐開,你發(fā)下你的public-container樣式,就這個了,其他的沒什么不同
.index-menu{
position:relative;
border-top:4px solid #f34949;?
}
.index-menu .menu-tips{
position:relative;
left:50%;
top:0px;
margin-left:-78px;
width:156px;
height:75px;
text-align:center;
line-height:65px;
color:#fff;
background:#f34949;
}
/*菜單提示標簽
.index-menu .menu-tips:after{
position:absolute;
content:"";
left:0;
buttom:0;
width:0;
height:0;
border-left:78px solid transparent;
border-right:78px solid transparent;
border-bottom:10px solid #fff;
}
.public-container{
position:relative;
margin:0 auto;
width:1100px;
}
2016-07-14
代碼是這樣的,你看看你會不會哪里寫錯或者拼寫錯了
<!--------------------------html-------------------------------->
<div class="index-menu">
? ?<div class="menu-tips">The Menu</div>
? ?<div class="public-container menu-list">
? ?</div>
</div>
/*菜單css部分*/
.index-menu {
? ? position:relative;
? ? border-top:4px soid #f34949;
}
.index-menu .menu-tips {
position:absolute;
left:50%;
top:0;
margin-left:-78px;
width:156px;
height:75px;
text-align:center;
line-height:65px;
color:#fff;
background:#f34949;
}
.index-menu .menu-tips:after {
position:absolute;
content:'';
left:0;
bottom:0;
width:0;
height:0;
border-left:78px solid transparent;
? ? border-right:78px solid transparent;
border-bottom:10px solid #fff;
}
2016-07-07
.index-menu .menu-tips{
position:relative;
left:50%;
top:0px;
margin-left:-78px;
width:156px;
height:75px;
text-align:center;
line-height:65px;
color:#fff;
background:#f34949;
}
/*菜單提示標簽*/
.index-menu .menu-tips:after{
position:absolute;
content:"";
left:0;
buttom:0;
width:0;
height:0;
margin-top:65px;
border-left:78px solid transparent;
border-right:78px solid transparent;
border-bottom:10px solid #fff;
}
我自己把.index-menu .menu-tips的position屬性改為relative后就可以撐開了,使用absolute就不行,倒三角那家了margin-top:65px;屬性也可以了,就是不知道老師的為什么可以定位到了
2016-07-07
父元素index-menu盒模型的高度為0,子元素menu-tips的盒模型高度為75px,溢出在了外面,試了很多次父元素無法撐開,除非給父元素直接加個高度,不過就算那樣的話倒三角形的效果也出不來
2016-07-06
貼的代碼看不出有什么錯,你在開發(fā)者工具里面看看盒模型,尺寸,位置的信息是否哪里有誤。