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选择属于其父元素第一个子元素。
html实现时间轴_纯css实现响应式竖着/垂直时间抽布局效果的更多相关文章
- 使用纯 CSS 实现响应式的图片显示效果
有许多方法可以实现页面里图像的响应式显示(Responsive).然而,我碰到的所有方案都使用了JavaScript.这使我疑惑不用 JavaScript 实现图像响应是否可行. 我提出了下面纯CSS ...
- 【纯css】响应式图片列表
示例演示 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...
- 纯CSS完成tab实现5种不同切换对应内容效果
很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...
- CSS制作响应式正方形及其应用
CSS制作响应式正方形?什么鬼?干嘛用的?干嘛用的没人有每人的需求,本人也正好是由于公司正在做的业务须要,想做个照片展示的功能(当然得符合响应式了).而这个照片展示必须符合下面几点功能:1.用三张图片 ...
- Responsive Web CSS – 在线响应式布局创建器
如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...
- CSS:响应式下的折叠菜单(条纹式)
原文:CSS: Responsive Navigation Menu 译文:CSS:响应式导航菜单 译者:dwqs 写在之前,关于如何制作响应式的下拉菜单:响应式下的下拉菜单 之前,我写了一篇关于怎么 ...
- CSS实现响应式布局
用CSS实现响应式布局 响应式布局感觉很高大上,很难,但实际上只用CSS也能实现响应式布局要用的就是CSS中的没接查询,下面就介绍一下怎么运用: 使用@media 的三种方法 1.直接在CSS文件中使 ...
- [刘阳Java]_纯CSS代码实现内容过滤效果
继续我们技术专题课,我们今天给大家带来的是一个比较酷炫的"纯CSS代码实现内容过滤效果",没有加入任何JS的效果.全部都是应用CSS3的新增选择器来实现的.先看效果截图 实现思路 ...
- 纯CSS无hacks的跨游览器多列布局
利用纯CSS创建一个等高多列的布局并不件易事,本教程将着重分析出现在多列布局的多个问题,然后为大家等来一个简单全游览器通吃的解决方法,不使用图片,脚本,CSS hacks并在最严格的XHTML 规范中 ...
随机推荐
- Java实现 洛谷 P1149 火柴棒等式
import java.util.HashMap; import java.util.Iterator; import java.util.LinkedList; import java.util.S ...
- java实现第七届蓝桥杯平方圈怪
平方圈怪 题目描述 如果把一个正整数的每一位都平方后再求和,得到一个新的正整数. 对新产生的正整数再做同样的处理. 如此一来,你会发现,不管开始取的是什么数字, 最终如果不是落入1,就是落入同一个循环 ...
- MD760按键说明书
- 第一章04-Activity中常用的标志位
Activity的LaunchMode Android中提供了四中Activity的启动模式 1. standard 2. singleTop 3. singleTask 4. signleInsta ...
- ubuntu下创建流媒体服务器的步骤
注意,我用的是ubuntu16.04.10,用ubuntu18安装会报错 通过crtmpserver搭建的步骤: 服务器端前置操作: 安装openssh-server,这样可以在windows中通过s ...
- javaScript的执行机制-同步任务-异步任务-微任务-宏任务
一.概念理解 1.关于javascript javascript是一门单线程语言,在最新的HTML5中提出了Web-Worker,但javascript是单线程这一核心仍未改变.所以一切javascr ...
- BrainF**k的编译器
按照语法编写了这个"编译器"(对于解释性语言而言"编译"二字的确很奇怪). 功能: 1."编译".运行一个后缀为 '.bf' ...
- Second Large Rectangle【单调栈】
Second Large Rectangle 题目链接(点击) 题目描述 Given a N×MN \times MN×M binary matrix. Please output the size ...
- Pyinstaller 打包python 到exe 在windows下免python环境运行python
在创建了独立应用(自包含该应用的依赖包)之后,还可以使用 PyInstaller 将 Python 程序生成可直接运行的程序,这个程序就可以被分发到对应的 Windows 或 Mac OS X 平台上 ...
- 基于Python3.7的robotframework环境搭建步骤
一.前言 Robot Framework作为公司能快速落地实现UI自动化测试的一款框架,同时也非常适合刚入门自动化测试的朋友们去快速学习自动化,笔者计划通过从搭建逐步到完成自动化测试的过程来整体描述它 ...