CSS设计问题与彼此分离图标

时间:2014-08-02 14:48:50

标签: html css css-position positioning

我正在尝试复制一个网站,但有些CSS问题我无法找到答案。现在,我希望我的黑色导航栏看起来像下面的图像。这里是我的代码http://jsfiddle.net/FLWb5/1/我需要复制这个作为编码挑战的一部分,我应该在css上构建这个框架,最好的方法是什么

website screenshot

这是指向黑色导航栏图标的代码的一部分:

<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>

3 个答案:

答案 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 */