我正在尝试复制一个网站,但有些CSS问题我无法找到答案。现在,我希望我的黑色导航栏看起来像下面的图像。这里是我的代码http://jsfiddle.net/FLWb5/1/我需要复制这个作为编码挑战的一部分,我应该在css上构建这个框架,最好的方法是什么
这是指向黑色导航栏图标的代码的一部分:
<div id="content">
<div id="left_nav_bar">
<i class="ss-icon">home</i>
<i class="ss-icon">time</i>
<i class="ss-icon">user</i>
<i class="ss-icon">question</i>
<i class="ss-icon">play</i>
</div>
答案 0 :(得分:0)
尝试将z-index:-1;
提供给您的垂直元素。
还研究CSS中的z-index
。
希望你管理它。
答案 1 :(得分:0)
试试这个:
<div id="content">
<div id="left_nav_bar">
<i class="ss-icon">home</i><hr>
<i class="ss-icon">time</i><hr>
<i class="ss-icon">user</i><hr>
<i class="ss-icon">question</i><hr>
<i class="ss-icon">play</i>
</div>
和CSS:
hr {
border: 0; border-top: 1px solid gray; }
答案 2 :(得分:0)
你的html / css是如此混乱,所以我花了一些时间来修复一个简单的小提琴,让你了解如何做你想要的。不要介意颜色和所有它只是一个简单的演示。还有什么你想要的这个演示让我知道。
使用导航项进行编辑
DEMO
希望这有帮助
<div class="container clearfix">
<div class="nav">
<a href="#" class="nav__link"></a>
<a href="#" class="nav__link"></a>
<a href="#" class="nav__link"></a>
<a href="#" class="nav__link-last"></a>
</div>
<div class="timeline">
<div class="timeline__line"></div>
<div class="timeline__item clearfix">
<div class="timeline__day"></div>
<div class="timeline__icon"></div>
<div class="timeline__text"></div>
</div>
<div class="timeline__item clearfix">
<div class="timeline__day"></div>
<div class="timeline__icon"></div>
<div class="timeline__text"></div>
</div>
</div>
.clearfix:after {
content:"";
display:table;
clear:both;
}
/* nav start */
.nav {
position: relative;
float: left;
width: 80px;
height: 400px;
background-color: #111;
}
.nav__link {
display: block;
width: 100%;
height: 60px;
border-bottom: 1px solid #dcdcdc;
}
.nav__link-last {
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
border-top: 1px solid #dcdcdc;
background-color: #999;
}
/* nav end */
/* timeline start */
.timeline {
position: relative;
float: left;
width: 300px;
height: 400px;
background-color: #f9f9f9;
}
.timeline__line {
position: absolute;
height: 100%;
width: 2px;
top: 0;
left: 80px;
background-color: #dcdcdc;
}
.timeline__item {
position: relative;
z-index: 100;
width: 100%;
min-height: 40px;
margin-top: 30px;
}
.timeline__day {
float: left;
width: 62px;
min-height: 40px;
background-color: aqua;
}
.timeline__icon {
float: left;
width: 40px;
height: 40px;
border-radius: 25px;
background-color: #111;
}
.timeline__text {
float: left;
min-width: 100px;
min-height: 40px;
}
/* timeline end */