网站首页 文章专栏 一步步制作时光轴(二)(CSS篇)
一步步制作时光轴(二)(CSS篇)
编辑时间:2017-03-05 19:00 作者:Absolutely 浏览:1102 评论:1

首先上成品图

成品图


    那么要如何达到这样的效果。

    首先看,中间的竖线我们需要将它用绝对定位到一个合适位置,然后以它为分界线,分为左右两半,可以看出左边部分的文本(日期、年份、月份)都是竖排右对齐的。要达到这样的效果,可以为年份、月份(日期例外,因为日期和圆点、内容在同一排,需另行设置样式)都指定一个宽度,然后文本居右。


/*竖线绝对定位*/
.timeline-line {
    position: absolute;
    left: 200px;
    top: 0;
    height: 100%;
    width: 2px;
    background: #009688;
    z-index: 0;
}

/*年份月份居右*/
.timeline-main h2,
.timeline-main h3 {
    width: 180px;
    text-align: right;
}

    这样下来就能实现,年份月份靠在竖线左侧且文字右对齐。



    再看日期那一排。因为需要在一排,可以利用浮动。


.timeline-month > ul > li .h4 {
    display: inline-block;
    width: 180px;
    text-align: right;
    float: left;
}
     然后是中间圆点,也需要浮动,且宽度计算一下,刚好设置为竖线平分即可。



.dot-circle {
    color: #009688;
    width: 42px;
    text-align: center;
    font-size: 22px;
    z-index: 1;
    position: relative;
    background: #fff;
    float: left;
}
     最后是内容,同样需要做浮动,而且为了做成气泡状,需要设置一个尖状箭头。



.content {
    max-width: 500px;
    float: left;
    padding: 10px;
    margin: 0px 5px;
    position: relative;
    z-index: 1;
    background: #009688;
    color: #fff;
}

    .content::before {
        position: absolute;
        left: -20px;
        top: 6px;
        height: 0;
        width: 0;
        content: '';
        border: 10px solid rgba(255, 255, 255, 0.00);
        border-top: 6px solid rgba(255, 255, 255, 0.00);
        border-bottom: 6px solid rgba(255, 255, 255, 0.00);
        border-right-color: #009688;
    }
    .content::before样式就是设置的尖状箭头,利用边框来实现!



    主要样式就是这些,需要完整的可以下载源码参考!






    出自:不落阁


    链接:www.lyblogs.cn

    转载请注明出处!

来说两句吧
最新评论
  • ωǒ們偠開鈊
    ωǒ們偠開鈊 2017-06-09 18:07:41
    [good]