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

    网上找了个案例,以这个为参考!

    案例


    首先,分析一下页面元素,再根据自身要求调整,最终得出以下:

           大标题、年标题(2017年)、月标题(3月)、日期(3月5日)、圆点、竖线、内容。

    接下来就是布局:

           大标题下面是整个时光轴,然后分年份(例如:2016年、2017年等),每个年份下面再分月份(例如:1月、2月、3月等),然后月份下面就是具体的日期(例如:1月2日、1月3日等)和内容(例如:开始制作时光轴)。

    分析完后就开始写代码:


    <div class="timeline-main">
        <h1><i class="fa fa-clock-o"></i>时光轴</h1>
        <div class="timeline-line"></div>
        <div class="timeline-year">
            <h2>2017<i class="fa fa-caret-down"></i></h2>
            <div class="timeline-month">
                <h3>3月<i class="fa fa-caret-down"></i></h3>
                <ul>
                    <li>
                        <div class="h4">
                            <p class="date">3月5日</p>
                        </div>
                        <p class="dot-circle"><i class="fa fa-dot-circle-o"></i></p>
                        <p class="content">不落阁正在制作时光轴,源码写完即分享!</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>


    布局大概这样没错,接下来就是CSS样式表了!


HTML和CSS代码写好后,大概就是这个样子了!后期再调整

Demo展示


下篇预告:一步步制作时光轴(CSS篇)



    出自:不落阁

    链接:www.lyblogs.cn

    转载请注名出处!

来说两句吧
最新评论
  • 小六HI
    小六HI 2017-05-12 16:49:46
    后台数据是怎么存储的?