嘿,我正在尝试在HTML CSS中重新创建此PSD(http://www.psdchat.com/resources/templates/freebie-hexal-portfolio-template/),但需要一些帮助来弄清楚如何执行主菜单下的下划线。顶部导航下的下划线,向下箭头分割
到目前为止,我有: http://codepen.io/jasonm4130/pen/BKrwpE
nav.navbar.navbar-default
.container-fluid
.navbar-header
button(type="button", class="navbar-toggle collapsed", data-toggle="collapse", data-target="#navbar-collapse-1", aria-expanded="false")
span.sr-only Toggle Navigation
span.icon-bar
span.icon-bar
span.icon-bar
a(class="navbar-brand navbar-brand-hidden", href="#") Nikora's Photography
#navbar-collapse-1.collapse.navbar-collapse
ul.nav.navbar-nav
li
a(href="#") Portfolio
li
a(href="#") About
li
a(class="navbar-brand", href="#") Nikora's Photography
li
a(href="#") Blog
li
a(href="#") Get in Touch
.menu-underline-container
.menu-underline
.menu-underline-seperator
.menu-underline
`//头自定义样式
.navbar.navbar-default
background-color: #323232
border: none
border-radius: 0px
&:after
content: ""
border-bottom: 2px solid
.navbar-brand.navbar-brand-hidden
color: #fff
@media (min-width: 769px)
display: none
ul.nav.navbar-nav
float: none
display: inline-block
li
a
color: white
.navbar-brand
margin: 0 auto
text-align: center
&:after
content: ""
width: 0
border-top: 53px solid #323232
border-left: 90px solid transparent
border-right: 90px solid transparent
position: absolute
bottom: -53px
left: 50%
margin-left: -90px
@media (max-width: 768px)
display: none
.navbar-collapse
text-align: center
.menu-underline-container
width: 90%
margin: 1px auto
.menu-underline
display: inline-flex
height: 1px
width: auto
border-bottom: 1px solid #e4e9eb
@media (max-width: 1200px)
width: 40%
.menu-underline-seperator
width: 52px
我在想,创造3周的div内联和下方带有边框一样的我可能下划线但我很确定这是一个非常低效的方法。
任何帮助将不胜感激。谢谢
请注意我正在使用sass和jade。
你尝试过文字修饰:下划线; – mlegg
我试图强调文字,但整个菜单,谢谢 –