利用css制作横向和纵向时间轴
Html代码:
<div class="container">
<p>原文地址:http://www.cnblogs.com/xiaofeixiang/</p>
<ul class="time-horizontal">
<li><b></b>成立</li>
<li><b></b>合作</li>
<li><b></b>发展</li>
<li><b></b>共赢</li>
</ul>
</div>
<div class="container">
<ul class="time-vertical">
<li><b></b><span>1</span><a href="javascript:void(0)">keso</a></li>
<li><b></b><span>2</span><a href="javascript:void(0)">FlyElephant</a></li>
<li><b></b><span>3</span><a href="javascript:void(0)">博客园</a></li>
<li><b></b><span>4</span><a href="javascript:void(0)">创业</a></li>
</ul>
</div>
CSS样式:
/*横向时间轴*/
.time-horizontal {
list-style-type: none;
border-top: 1px solid #707070;
max-width: 800px;
padding: 0px;
margin: 0px;
} .time-horizontal li {
float: left;
position: relative;
text-align: center;
width: 25%;
padding-top: 10px;
} .time-horizontal li b:before {
content: '';
position: absolute;
top: -10px;
left: 47%;
width: 12px;
height: 12px;
border: 2px solid #4c4c4c;
border-radius: 8px;
background: #4c4c4c;
}
/*纵向时间轴*/
.time-vertical {
list-style-type: none;
border-left: 1px solid #707070;
padding: 0px;
height: 400px;
} .time-vertical li {
height: 100px;
position: relative;
} .time-vertical li a {
display: inline-block;
margin-left: 20px;
margin-top: 15px;
text-decoration: none;
color: #000;
} .time-vertical li b:before {
content: '';
position: absolute;
top: 15px;
left: -12px;
width: 18px;
height: 18px;
border: 2px solid #98FB98;
border-radius: 10px;
background: #98FB98;
} .time-vertical li span {
position: absolute;
color: #fff;
top: 18px;
left: -6px;
}
利用css制作横向和纵向时间轴的更多相关文章
- 横向、纵向时间轴timeline系列
近期移动端项目用到了很多时间轴.纵向的.开始可以实现,但是不利于维护.整理下, 以作为备份留存学习参考.子元素的 标签的 :before实现圆点,:after实现边线border纵向时间轴,单一右边内 ...
- 利用CSS制作背景变色的横向导航栏
1.表单 页面如下: <html> <head> <title>注册表单页面</title> </head> <body> &l ...
- CSS- 横向和纵向时间轴
时间轴在展示公司发展信息,服务流程中用的比较多,常见的注册登录有的是通过引导,一步一步的来完成,上面会通过时间轴告诉用户当前在哪一步,公司在关于我们或者发展流程的时候也特别喜欢用时间轴来展示,简单的实 ...
- Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果
Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果 在一个项目中,用到了时间轴展示产品的开发进度,为了更好用户体验,想到了Facebook的timeline效果, 搜了一 ...
- 利用CSS制作图形效果
前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧 以下所有内容只使用一个HTML元素.任何类型 ...
- [原创]首次制作JQueryUI插件-Timeline时间轴
特点: 1. 支持多左右滚动,左右拖动. 2. 时间轴可上下两种显示方式. 3. 支持两种模式的平滑滚动/拖动. 4. 行压缩(后续版本此处可设置是否开启,上传的代码不带这个功能). 5. 支持hov ...
- 利用CSS制作脸书
很多网站都支持图片上的头像框识别,鼠标在头像框处,会提示一些人物信息. 这次就利用CSS实现这样一个功能: div处主要包括两部分,一部分是图片:另一部分是链接以及脸框 <div class=& ...
- 利用 css 制作简单的提示框
在网页开发中,为了提高用户体验,经常会用到一些提示框来引导用户,这里分享下一些简单的提示框的制作 1.首先类似一个长方形右上角一个关闭按钮 这里用到的主要是一些定位的知识,运用relative和abs ...
- 利用css制作带边框的小三角
标签(空格分隔):css 在项目中会使用到的小实例,目前知道的有两种方法来实现 设置元素的宽和高,利用rotate实现,比较简单的一种 div{ width: 10px; height: 10px; ...
随机推荐
- JavaScript 原型解析
1.什么是对象? javascript中除了null和undefined之外都是Object的实例. 在Javascript中, 每定义一个函数, 将伴生一个原型对象. 原型就是用来为同一类对 ...
- 九度OJ 1174:查找第K小数 (排序、查找)
时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:6376 解决:2539 题目描述: 查找一个数组的第K小的数,注意同样大小算一样大. 如 2 1 3 4 5 2 第三小数为3. 输入: ...
- 镜像回源主要用于无缝迁移数据到OSS,即服务已经在自己建立的源站或者在其他云产品上运行,需要迁移到OSS上,但是又不能停止服务,此时可利用镜像回写功能实现。
管理回源设置_管理文件_开发指南_对象存储 OSS-阿里云 https://help.aliyun.com/document_detail/31865.html 通过回源设置,对于获取数据的请求以多种 ...
- wifi debug command
==================================================================================================== ...
- MySQL修改配置 区分大小写
在使用mysql的时候,数据库名,表名,字段名等有大小写的区分,这个可以通过配置文件设置.如果设置了严格区分大小写,在访问表的时候没有注意到表名的大小写,将会报出表不存在的错误.下面是修改配置文件: ...
- windows下python安装face_recognition模块
安装face_recognition出现报错,要先安装dlib 安装dlib时报错,要先安装cmake cmake安装成功后,用pip安装dlib失败 从pypi下载dlib的wheel文件,然后用w ...
- 剑指Offer:矩形覆盖【N1】
剑指Offer:矩形覆盖[N1] 题目描述 我们可以用2*1的小矩形横着或者竖着去覆盖更大的矩形.请问用n个2*1的小矩形无重叠地覆盖一个2*n的大矩形,总共有多少种方法? 题目思考 我们先把2*8的 ...
- java.util.ResourceBundle国际化用法详解
java.util.ResourceBundle国际化用法详解 初识国际化和ResourceBundle 这个类主要用来解决国际化和本地化问题.国际化和本地化可不是两个概念,两者都是一起出现的.可以说 ...
- 使用meld作为git的辅助工具
原文链接: https://lrita.github.io/2017/05/14/use-meld-as-git-tool/?hmsr=toutiao.io&utm_medium=toutia ...
- nginx websocket
前两天折腾了下socketio,部署完发现通过nginx代理之后前端的socket无法和后端通信了,于是暴查一通,最后解决问题: location / { proxy_pass http://127. ...