问答详情
源自:1-6 导航三角制作

出错,求解


body{

font-family: Georgia,serif;

background: #ddd;

font-weight: 400;

font-size: 15px;

color: #333;

-webkit-font-smoothing:antialiased;


}

a{

text-decoration: none;

color:#555;

}

<!-- 链接样式-->

.clr{

width: 0;

height:0;

overflow: hidden;

clear: both;

padding :0;

margin: 0;

}

.st-container{

width:100%;

height: 100%;

position: :absolute;

left: 0;

top :0;

font-family: "Josefin Slab","Myriad Pro",Arial,sans-serif;

}

.st-container > input,

.st-container > a{

width: 20%;

height: :34px;

line-height: 34px;

position: fixed;

bottom:0;

}

.st-container > input{

<!--- display: :none;position: absolute;left :-99999px;visibility: hidden;opacity: 0

都可以把元素影藏掉,

display: :none;影藏不占位,不在这个地方。position: absolute;在这个地方。left :-99999px;不


存在--->

opacity: 0.8 ;

z-index:1000;


}

.st-container > a{

z-index: 10;

font-weight: 700;

font-size: 16px;

background: #e23a6e;

text-align: center;

color: #fff;

box-shadow: 1px 1px 1px rgba(151,24,64,0.2);

}

#st-control-1,#st-control-1 + a{

    left: 0%;


}

#st-control-2,#st-control-2 + a {

left: 20%;

}

#st-control-3,#st-control-3 + a {

left: 40%;

}

#st-control-4,#st-control-4 + a {

left: 60%;

}

#st-control-5,#st-control-5 + a {

left: 80%;

}

.st-container input:checked  + a 

.st-container input:checked:hover + a {

background:#821134; 

}


}

<!--三角形-->

.st-container input:checked + a:after{

content: "";

width: 0;

height: 0;

overflow: hidden;

border: 20px solid transparent;

border-bottom-color: #821134;

position: absolute;

bottom: 100%;

left:50%;

margin-left: -20px;

}

.st-container input:hover + a {

background:#AD244F; 

}

http://img.mukewang.com/596ca3ef0001528d13630684.jpg


提问者:cym01494 2017-07-17 19:48

个回答

  • 风萧萧梦潇潇
    2017-07-22 22:59:49

    老兄,麻烦下次说一下出现的问题是什么?不然我还得自己推理。

    首先第一个问题:css代码注释要用/*注释*/,<!--注释-->是html注释。有两处。

    第二,有好几处语法错误,比如英文的冒号写成中文的冒号,多了一个花括号太粗心了。有两处。

    更正完以上两个错误,就没问题了。

    祝你前端学习愉快!