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

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

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

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

底部粘连(stiky footer)布局

在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过。它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送

页面中有间隔的方格布局如何完美实现?

方格中间有一定的间隙,间隙是固定的。应该如何布局会更加完美呢,比如要保证在布局完成的情况下,可以快速的添加一个元素依然保持这样的布局。以及当出现第二行的时候,这样的布局依然能够不受影响

flex弹性布局

以下是弹性布局的一些知识点,很简单,易懂!元素一旦变为弹性布局的元素后,float,clear,vertical-align,text-align都失效,定位属性是有效的!接下来就是弹性布局的核心:弹性布局的属性。

rem布局和vw布局的理解

rem是一个灵活的、可扩展的单位,由浏览器转化像素并显示。与em单位不同,rem单位无论嵌套层级如何,都只相对于浏览器的根元素(HTML元素)的font-size。css3中引入了一个新的单位vw,与视图窗口有关,vw表示相对于视图窗口的宽度,除了vw,还有vmin和vmax两个相关的单位。

Web布局:display属性

经过 CSS盒模型 和视觉格式化模型两个章节中的学习,我们有了一个清晰的概念。即 在CSS中插何一个元素都是一个盒子,甚至是文本节点也是一个盒子(匿名盒子);都有自己的视觉格式化(不同的盒子)

弹性(Flex)布局的使用

最近我参与实施的两个项目中,一个页面交互复杂,而另一个相对传统,两个项目相比之下凸显出了页面布局样式的时间占比不可忽视,使用了弹性布局代码量精简了不少

css如何实现n宫格布局?

现在的APP界面基本都是大同小异, 宫格布局现在基本成了每个APP必然的存在.带边框, 先解释一个小技巧, 如何实现正方形, 保证看一遍就会, 结论就是:padding的值如果是百分比

CSS:BFC规则的应用自适应两栏布局

两栏布局是写页面时经常用到的,要想实现两栏布局,就需要明白BFC规则,Block formatting context,直译为“块级格式化上下文”,可以简单的理解它为一个独立的区域,把区域内部元素与外部元素区分开,两者互不干扰。

css两端对齐

w3school指出,text-align用于设置块级元素内文本的水平对齐方式。如果想使inline元素或inline-block元素居中对齐,可以使用text-align: center方法,对于block元素无法使用text-align实现居中对齐

关于display:flex碰上white-space nowrap 影响布局的问题

背景,做一个前面图片宽度固定,后面宽度自适应,使用到了flex布局,但是想让后面div里文字不换行,超出以点点表示时,这时布局就乱了,查了下,原来flex布局与white-space:nowrap有影响

点击更多...

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