zoukankan      html  css  js  c++  java
  • html实现时间轴_纯css实现响应式竖着/垂直时间抽布局效果

    1、概述  

    html实现用时间点来展示事件发生点来代替用table展示一条条数据,能够给人清晰、一目了然能够看清事情发生的过程,UI页面也显示的那么清晰。如何用css+html做出时间轴展示事件点的?先来看看下面的效果:

    做出这样效果的时间轴展示事件点,需要了解一下知识:

    1、css位置:position
    2、css伪类:after,befault
    3、css内容:content

    办公资源网址导航 https://www.wode007.com

    2、CSS中Postion 

    语法: 

    position : static | absolute | fixed | relative

    取值:

    static :默认值。无特殊定位,对象遵循HTML定位规则  
    absolute :将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象,则依据 body 对象。而其层叠通过 z-index 属性定义
    fixed :未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范
    relative :对象不可层叠,但将依据 left , right , top , bottom 等属性在正常文档流中偏移位置

    position默认是static ,absolute是相对父元素来绝对定位的,relative是相对自己来定位。relative 不脱离文档流,absolute 脱离文档流。也就是说:relative 的元素尽管表面上看到它偏离了原来的位置,但它实际上在文档流中还是没变。absolute的元素不仅位置改变了,同时也脱离了文档流。 

    2、CSS中伪类和content

    css中的伪类     :after,:befault,:first-child,:last-child

    content 属性与 :before 及 :after 伪元素配合使用,来插入生成内容。

    举例:(在a内容后面插入a的链接)

    a:after{
      content: " (" attr(href) ")";
    }

    :after 选择器在被选元素的内容后面插入内容。请使用 content 属性来指定要插入的内容。

    :befault选择器在被选元素的内容前面插入内容。请使用 content 属性来指定要插入的内容

    :last-child选择属于其父元素最后一个子元素。

    :first-child选择属于其父元素第一个子元素。

  • 相关阅读:
    Idea快捷键大全
    Minio创建访问策略
    如何把Minio设置成开机启动
    windows10怎么添加开机启动项
    Intellij IDEA中如何配置Maven环境
    MySQL 8.0.19安装和配置超详细教程
    图文详解一台电脑怎么设置两个显示器
    无法加载文件 E:PROGRAM FILESNODEJSNODE_GLOBALyarn.ps1,因为在此系统中禁止执行脚本
    通过MacOS的ssh远程打开linux的firefox(通过X11协议实现图形化显示)
    Java8 stream分组按某字段取最大值
  • 原文地址:https://www.cnblogs.com/ypppt/p/13111051.html
Copyright © 2011-2022 走看看