用HTML CSS 实现简洁美观的时间线（历史年表）

前几天在B站刷到尼尔后突发奇想，就想给尼尔做一个简单的小网站，在思考如何体现尼尔的世界观的时候想到了使用时间线的方式，将所有时间的事件罗列起来。所以就试着做了一下，这种方式可以很直观的表现一些历史上发生的事情，历史相关主题的一些网站应该可以参考一下

首先来看效果

以上都是游戏里的一些历史，简单的设计了一下，个人对整体的页面设计还是挺满意的，但是本期主要讲的是时间线，就不多扯其他的东西了，下面来讲讲具体是怎样实现的

首先是上面黑色的部分：

很简单

HTML：

<h2 class="daibiao">历史年表</h2>

CSS：

.daibiao {width: 100%;height: 50px;line-height: 50px;background-color: #47443B;color: white;text-align: center;margin: 0 auto 0;clear: both;
}

都是一些简单的样式，没什么好说的

在来看主要的时间线的部分，HTML因为是重复的，主要就只看格结构，这里我就只拿出一块来讲

HTML：

<div id="timeline"> <ul><li><div class="content"><h3>'复制体'们的文化开始成形</h3><p>几乎全部的复制体都获得了自我意识。与原有的格式塔人格无关，是受到环境影响而成形的人格。根据居住地区的不同，不同的文化和文明急速的发展起来(比中世纪的时候略微先进的程度，基本上围绕着过去的遗物进行增建、生活)。</p></div><div class="time"><h4>AD 3000-XX</h4></div></li><ul>
</div>

css的代码比较多

CSS：

#timeline {position: relative;margin: 0px auto;padding: 25px; width: 1000px;height: 17100px ;box-sizing: border-box;
}#timeline::before {content: '';position: absolute;left: 50%;width: 2px;height: 17045px;background: #47443B;
}#timeline ul {margin: 0;padding: 0;
}#timeline ul li {list-style: none;line-height: normal;position: relative;width: 50%;padding: 20px 40px;box-sizing: border-box;
}#timeline ul li:nth-child(odd) {float: left;;text-align: right;clear: both;
}#timeline ul li:nth-child(even) {float: right;;text-align: left;clear: both;
}#timeline ul li:nth-child(odd)::before{content: '';position: absolute;top: 24px;right: -6px;width: 10px;height: 10px;background: rgba(71, 68, 59, 1);border-radius: 50%;box-shadow: 0 0 0 3px rgba(71, 68, 59, 0.2);
}#timeline ul li:nth-child(even)::before{content: '';position: absolute;top: 24px;left: -4px;width: 10px;height: 10px;background: rgba(71, 68, 59, 1);border-radius: 50%;box-shadow: 0 0 0 3px rgba(71, 68, 59, 0.2);
}#timeline ul li h3 {margin: 0;padding: 0;font-weight: 600;color: rgba(71, 68, 59, 1);
}#timeline ul li p {margin: 10px 0 0;padding: 0;
}#timeline ul li .time h4 {margin: 0;padding: 0;font-size: 14px;
}#timeline ul li:nth-child(odd) .time {position: absolute;top: 10px;right: -165px;margin: 0;padding: 8px 16px;background: rgba(71, 68, 59, 1);color: white;border-radius: 18px;box-shadow: 0 0 0 3px rgba(71, 68, 59, 0.2);
}#timeline ul li:nth-child(even) .time {position: absolute;top: 10px;left: -165px;margin: 0;padding: 8px 16px;background: rgba(71, 68, 59, 1);color: white;border-radius: 18px;box-shadow: 0 0 0 3px rgba(71, 68, 59, 0.2);
}

上面这些代码都是非常基础的。

好了，此次分享暂时就到这里了，遇过有需要的朋友欢迎参考，再见（づ￣3￣）づ╭❤～

用HTML CSS 实现简洁美观的时间线（历史年表）相关推荐

视频编辑器-MovieMator 简洁使用-在时间线上拆分，修剪，连接剪辑
视频编辑器-MovieMator 简洁使用-在时间线上拆分,修剪,连接剪辑分割Split.修剪Trim和合并剪辑Join Clips是基本的视频编辑功能.把一个大的视频分割成几个小的剪辑对于上传.传 ...
水平时间轴css代码_使用CSS和JavaScript构建水平时间线
水平时间轴css代码在上一篇文章中 ,我向您展示了如何从头开始构建响应式垂直时间轴. 今天,我将介绍创建相关的水平时间线的过程. 与往常一样,要初步了解我们将要构建的内容,请查看相关的CodePen ...
Argon-Theme 一个非常好看的轻盈,简洁,美观的 WordPress 主题
介绍: Argon – 一个轻盈.简洁.美观的 WordPress 主题特性: 轻盈美观 – 使用 Argon Design System 前端框架,细节精致,轻盈美观高度可定制化 – 可自定义主 ...
django开源电子文档管理系统_「开源推荐」BookStack v2.8 发布，简洁美观的在线文档管理系统
程序介绍 BookStack,基于 Mindoc.使用Go语言的Beego框架开发的功能类似GitBook和看云的在线文档管理系统,拥有简洁美观的页面布局,实现了文档采集.导入.电子书生成以及版本控制 ...
【完整代码】用HTML/CSS制作一个美观的个人简介网页
[完整代码]用HTML/CSS制作一个美观的个人简介网页整体结构完整代码用HTML/CSS制作一个美观的个人简介网页--学习周记1 HELLO!大家好,由于<用HTML/CSS制作一个美观 ...
推荐5款简洁美观的Hexo主题
2018-11-17 17:15:46 原文地址:http://www.izhongxia.com 以下是 <hexo 主题列表> 中挑选出来一些比较简洁美观的主题(存在个人主观意识,请勿 ...
html简单组件（三）：简洁美观的搜索框
html简单组件(三):简洁美观的搜索框搜索框效果图: HTML代码: <div class="main"><div class="pannel-di ...
[css] 如何解决IE6浮动时产生双倍边距的BUG？
[css] 如何解决IE6浮动时产生双倍边距的BUG? 1.当块级元素有浮动样式的时候,给元素添加margin-left和margin-right样式,在ie6下就会出现双倍边距2.给当前元素添加样式 ...
PHP简洁美观轻量级秀恩爱网站源码
简介: PHP简洁美观轻量级秀恩爱网站源码完全开源有独立后台管理,可以上传照片和设置成就. 马上9月9号还不下载源码秀波恩爱网盘下载地址: http://kekewangLuo.cc/mff70 ...

用HTML CSS 实现简洁美观的时间线（历史年表）

用HTML CSS 实现简洁美观的时间线（历史年表）相关推荐

最新文章

热门文章