关闭

html实现时间轴_纯css实现响应式竖着/垂直时间抽布局效果

时间: 2018-03-29阅读: 4026标签: 布局

1、概述  

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



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

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


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选择属于其父元素第一个子元素。


3、示例demo

转载来源:http://www.cnblogs.com/xibei666/p/5106465.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/563

关闭

CSS三种布局模型是什么?

在网页中,元素有三种布局模型:流动模型(Flow) 默认的、浮动模型 (Float)、层模型(Layer)。下面我们来看一下这三种布局模型。

前端布局方式汇总及概念浅析

前端布局方式汇总:普通/文档流 布局、 Float 布局、绝对布局、Grid 网格布局、CSS3 Flex 弹性盒子布局、静态布局、流式布局、 自适应布局、响应式布局...

符合SEO的HTML布局规范

少用例如iframe等标签引入内容,可以不用尽量不用,因为搜索引擎无法搜索到框架里面的内容;在<body>..</body>标签区中的罗列,都是一些基础的HTML标签,这些标签出现的次序是可以变化的。

IOS 浏览器页面布局错位(如:点不到)的分析与解决

IOS 浏览器软键盘的拉起与收缩、微信 IOS 浏览器底部导航条的显示与隐藏,很容易导致页面布局错位(相对窗体的绝对定位元素):明明按钮在这里,却要在上面一点儿点击屏幕才能点到它

css实现保持div的等宽高比

css如何实现高度height随宽度width变化保持比例不变呢?即给定可变宽度的元素,它将确保其高度以响应的方式保持成比例(即,其宽度与高度的比率保持恒定)。这里以 4:3 为例,通过2种方式来实现

基于jquery 横向/纵向 时间轴插件推荐

这篇文章主要整理一些关于基于jquery,实现横向/纵向时间轴的插件推荐:jquery.jqtimeline插件、timeline.js插件、Timeglider.js插件、Melon HTML5 、jQuery Timelinr、Timeline Porfolio

解决页面缩小时页面布局会乱的问题

给body加上一个min-width最小宽度,以px为单位,这样当页面变小时,当达到你所设置的最小宽度,body的宽度不再改变,超出的部分会用横向滚动条显示,其内所有元素的布局也不会受影响。

瀑布流的实现

现在很多网站都会使用瀑布流的一个效果,什么是瀑布流呢,用在哪些地方呢?大概就是这样的一个效果,一般用于无法保证图片大小的网站。先看下布局+css

前端之移动页面布局

Native App 原生app手机应用程序使用原生的语言开发的手机应用,Android系统用的是java,iOS系统用的是object-C;Hybrid App 混合型app手机应用程序混合使用原生的程序和html5页面开发的手机应用

你以为 CSS 只是个简单的布局?

本文中,所有的图形都是在单个标签内实现的,大量使用了 CSS3 中的 ::before 、::after 伪元素,transparent 、border,多重线性与径向渐变,多重内外阴影,如果你的效果不尽人意,请尝试在 Chrome 浏览器下预览。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!