css+font awesom 做的时间轴

最新推荐文章于 2024-05-08 15:03:49 发布
最新推荐文章于 2024-05-08 15:03:49 发布
阅读量1.1k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： 时间轴 css bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mfc2003/article/details/49797115
本文介绍了一种使用HTML和CSS实现的时间轴布局方案，并提供了两个实例。通过不同的样式调整，展示了如何创建美观且响应式的事件时间轴。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >







<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">


       <!-- bootstrap3.3.5-->
     <link href="../../components/bootstrap/css/bootstrap.css" rel="stylesheet">
      <!--字体图标 4.4.0-->
    <link href="../FontAwesome4.4/css/font-awesome.css" rel="stylesheet">


    <!-- 全局js -->
    <script src="../../js/jquery-1.11.3.min.js"></script>
    <script src="../../components/bootstrap/js/bootstrap.min.js"></script>

     <style>

         body{
             background-color: #efefef;
         }

           /*时间轴大容器*/
         .line-warp{
               position: relative;
               width: 70%;
               min-width: 600px;
               margin: 0 auto;
              margin-top: 100px;
         }
        /*  画一根时间线*/
         .line-warp:before{
             position: absolute;
             content: '';
             left:22px;
             width: 4px;
             height: 100%;
             margin-top: 10px;
             margin-bottom: 15px;
             background: #adadad;

         }
             /* 每一行*/
         .line-item{

             position: relative;
             margin-top: 30px;
         }
            /* 左边的图标 容器*/
         .line-icon-warp{
             position: absolute;
             top: 0;
             left: 0;


         }
        /*    通过修改font-size来控制图标大小*/
         .line-icon-warp span{
             font-size: 22px;

         }
          /*右边 内容*/
         .line-content-box{
             position: relative;
             margin-left: 60px;
             background: #fff;
             border-radius: .25em;
             padding: 1em


         }

         /* 用来画内容框左边的小箭头*/
         .line-content-box:before{
             content: '';
             position: absolute;
             top: 16px;
             left: -14px;
             height: 0;
             width: 0;
             border: 7px solid transparent;
             border-right: 7px solid #fff

         }
     </style>



</head>

<body>
        <div class="line-warp" >


            <div class="line-item">
            <div class="line-icon-warp  ">
               <span class="fa-stack fa-lg" >
                  <i class="fa fa-circle fa-stack-2x" style="color: #ff9357"></i>
                  <i class="fa fa-flag fa-stack-1x  " style="color: #ffffff"></i>
                </span>
            </div>
            <div class="line-content-box">
               我是一个兵
            </div>
           </div>

            <div class="line-item">
                <div class="line-icon-warp ">
                   <span class="fa-stack fa-lg"  >
                      <i class="fa fa-circle fa-stack-2x" style="color: #39998d"></i>
                      <i class="fa fa-chrome fa-stack-1x  fa-1x " style="color: #ffffff"></i>
                   </span>
                </div>
                <div class="line-content-box">
                     从前有个<br>
                    从前有个<br>
                    从前有个<br> 从前有个<br>
                    从前有个<br>
                    从前有个<br>
                    从前有个<br>
                    从前有个<br>

                </div>
            </div>


            <div class="line-item">
                <div class="line-icon-warp ">
                   <span class="fa-stack fa-lg" >
                      <i class="fa fa-circle fa-stack-2x" style="color: #31699d"></i>
                      <i class="fa fa-cloud fa-stack-1x  " style="color: #ffffff"></i>
                   </span>
                </div>
                <div class="line-content-box">
                    从前有个<br>
                    从前有个<br>
                    从前有个<br> 从前有个<br>
                    从前有个<br>
                    从前有个<br>
                    从前有个<br>
                    从前有个<br>

                </div>
            </div>

            <div class="line-item">
                <div class="line-icon-warp ">
                   <span class="fa-stack fa-lg" >
                      <i class="fa fa-circle fa-stack-2x" style="color: #b04149"></i>
                      <i class="fa fa-bell fa-stack-1x  " style="color: #ffffff"></i>
                   </span>
                </div>
                <div class="line-content-box">
                    从前有个<br>
                    从前有个<br>
                    从前有个<br> 从前有个<br>
                    从前有个<br>
                    从前有个<br>
                    从前有个<br>
                    从前有个<br>

                </div>
            </div>



        </div>

</body>

</html>



----------------------------------------------------------------------------------第2个--------------------------------










<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">


       <!-- bootstrap3.3.5-->
     <link href="components/bootstrap/css/bootstrap.css" rel="stylesheet">
      <!--字体图标 4.4.0-->
    <link href="components/FontAwesome4.4/css/font-awesome.css" rel="stylesheet">


    <!-- 全局js -->
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="components/bootstrap/js/bootstrap.min.js"></script>

     <style>

         body{
             background-color: #efefef;
         }

           /*时间轴大容器*/
         .line-warp{
               position: relative;
               width: 70%;
               min-width: 600px;
               margin: 0 auto;
              margin-top: 100px;
         }
        /*  画一根时间线*/
         .line-warp:before{
             position: absolute;
             content: '';
             left:22px;
             width: 4px;
             height: 100%;
             margin-top: 10px;
             margin-bottom: 15px;
             background: #adadad;

         }
             /* 每一行*/
         .line-item{

             position: relative;
             margin-top: 30px;
         }
            /* 左边的图标 容器*/
         .line-icon-warp{
             position: absolute;
             top: 0;
             left: 0;


         }
        /*    通过修改font-size来控制图标大小*/
         .line-icon-warp span:first-child{
             font-size: 22px;

         }
          /*右边 内容*/
         .line-content-box{
             position: relative;
             margin-left: 140px;
             background: #fff;
             border-radius: .25em;
             padding: 1em


         }

         /* 用来画内容框左边的小箭头*/
         .line-content-box:before{
             content: '';
             position: absolute;
             top: 16px;
             left: -14px;
             height: 0;
             width: 0;
             border: 7px solid transparent;
             border-right: 7px solid #fff

         }
     </style>



</head>

<body>
        <div class="line-warp" >


            <div class="line-item">
            <div class="line-icon-warp  ">
               <span class="fa-stack fa-lg" >
                  <i class="fa fa-circle fa-stack-2x" style="color: #ff9357"></i>
                  <i class="fa fa-flag fa-stack-1x  " style="color: #ffffff"></i>
                </span>
                <span> 2014-11-13 </span>
            </div>
            <div class="line-content-box">
               我是一个兵
            </div>
           </div>

            <div class="line-item">
                <div class="line-icon-warp ">
                   <span class="fa-stack fa-lg"  >
                      <i class="fa fa-circle fa-stack-2x" style="color: #39998d"></i>
                      <i class="fa fa-chrome fa-stack-1x  fa-1x " style="color: #ffffff"></i>
                   </span>
                    <span> 2014-11-12 </span>
                </div>
                <div class="line-content-box">
                     从前有个<br>
                    从前有个<br>
                    从前有个<br> 从前有个<br>
                    从前有个<br>
                    从前有个<br>
                    从前有个<br>
                    从前有个<br>

                </div>
            </div>


            <div class="line-item">
                <div class="line-icon-warp ">

                   <span class="fa-stack fa-lg" >
                      <i class="fa fa-circle fa-stack-2x" style="color: #31699d"></i>
                      <i class="fa fa-cloud fa-stack-1x  " style="color: #ffffff"></i>
                   </span>
                   <span> 2014-11-11 </span>

                </div>
                <div class="line-content-box">
                    从前有个<br>
                    从前有个<br>
                    从前有个<br> 从前有个<br>
                    从前有个<br>
                    从前有个<br>
                    从前有个<br>
                    从前有个<br>

                </div>
            </div>

            <div class="line-item">
                <div class="line-icon-warp ">
                   <span class="fa-stack fa-lg" >
                      <i class="fa fa-circle fa-stack-2x" style="color: #b04149"></i>
                      <i class="fa fa-bell fa-stack-1x  " style="color: #ffffff"></i>
                   </span>
                    <span> 2014-11-10 </span>
                </div>
                <div class="line-content-box">
                    从前有个<br>
                    从前有个<br>
                    从前有个<br> 从前有个<br>
                    从前有个<br>
                    从前有个<br>
                    从前有个<br>
                    从前有个<br>

                </div>
            </div>



        </div>

</body>

</html>

常用邮箱导航（邮箱导航-使用font-awesome实现导航小图标）
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
08-29 1万+
常用邮箱导航（邮箱导航-使用font-awesome实现导航小图标） 使用font awesome的具体步骤： 1.到官网下载相关压缩包 2.解压后得到四个文件夹，把css文件夹中的font-awesome.css引入到你的项目css目录下。 还有一点十分重要！一定要把font文件夹放到你项目css文件夹的同级目录下，否则到时不会正确显示图标，网上很多教程都没提到。 3.在你的html文件中引入font-awesome.css就可以直接使用...
使用 CSS 实现时间轴
前端路上
05-29 2689
文章目录使用 CSS 实现 Timeline基本思路具体实现其他 使用 CSS 实现 Timeline 基本思路 首先在最外层构建一个 box，用来包裹所有的 item 每一个子项拥有各自的元件，包括：line，icon，content 使用伪元素来创建 line 和 icon 把内容放在右边 具体实现 话不多说，直接上代码，仔细看注释。 .timeline { display: blo...
纯css时间轴
07-12
用css写的一个时间轴，兼容所有浏览器，非常好用的哦~
css时间轴
祈澈菇凉
05-28 1042
原型： 代码： <!DOCTYPE html > <html> <head> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn...
CSS 时间轴
sinat_16664531的专栏
04-24 274
<!DOCTYPE html> <html> <head> <title>css timeline20200423</title> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″> <meta name="view...
css实现时间轴
你说你有丶难追的博客
05-08 1006
【代码】css实现时间轴。
css 时间轴样式
q1ngqingsky的博客
07-05 2748
51个纯html和css时间轴（包括横向时间轴和纵向时间轴），只有少部分时间轴有用到javascript。 示例和下载代码都在zip文件中。
Bootstrap的Font Awesome Icon Picker组件、fontawesome-iconpicker
最新发布
12-07
Font Awesome Icon Picker是一个完全可自定义的Twitter Bootstrap插件，具有基于的强大基础API 您可以使用Font Awesome 5或您选择的其他字体图标集（图标列表是完全可自定义的）。 实例化 您可以通过几种方式调用...
fontawesome-5.15.4-web.zip
09-24
Font Awesome 5.15.4最新版 Font Awesome 字体为您提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式。 前端字体库，目前最新专业版。 可用于页面设计、QT图标设计
font-awesome-4.4.0
10-06
与普通字体一样，你可以通过CSS控制Font Awesome图标的颜色、大小、边距等样式属性，以适应你的网站设计。 5. **图标分类和搜索：** 在官方文档（http://fortawesome.github.io/Font-Awesome/icons/）中，图标被...
开发工具 font-awesome.min
05-31
开发工具 font-awesome.min开发工具 font-awesome.min开发工具 font-awesome.min开发工具 font-awesome.min开发工具 font-awesome.min开发工具 font-awesome.min开发工具 font-awesome.min开发工具 font-awesome.min...
纯CSS时间轴
04-17
css设计html时间轴,快速制作时间轴，从简单的入手，慢慢的复杂的就容易解决啦！
CSS3实现时间轴效果
09-24
主要为大家详细介绍了CSS3实现时间轴效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Horizontal-Timeline:纯CSS的水平时间轴
05-22
水平时间轴 纯CSS的水平时间轴
时间轴CSS Timeline
ICode联盟
11-10 536
下载地址 简约的时间轴CSS Timeline，垂直样式的时间轴效果，可以作为事件展示等用途。 dd:
不需要 JavaScript，仅用 CSS 实现时间轴动画效果
希望看完文章的你能够带着答案离开。
03-28 4792
不需要 JavaScript，仅用 CSS 实现时间轴动画效果
CSS 时间轴样式效果
黄河爱浪的博客-专注CSS,jQuery,uni-app领域
07-31 749
效果预览 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale
css 实现时间轴 节点
leos
10-12 713
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&..
css+html实现时间轴
热门推荐
39660593的博客
01-09 1万+
原文地址：https://blog.youkuaiyun.com/weixin_40687883/article/details/80388420
优化开发效率：深入font-awesome.min.css的使用技巧
资源摘要信息:"font-awesome.min是一个极为流行的开源图标库，它通过CSS类的方式为Web开发人员提供了一种简便的方法来在网页上添加和自定义图标。这些图标集成了多种设计风格，包括符号字体和SVG图标。font-awesome....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值