css 常见时间轴的做法(————————————————时间轴——————————————————)

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<style type="text/css">
			* {
				padding: 0px;
				margin: 0px;
				border: 0px;
				list-style: none;
			}

			ul#demo1,
			ul#demo2 {
				width: 85%;
				margin: 30px auto;
				padding-top: 20px;
				padding-bottom: 20px;
				border-left: 1px solid #2B9EEF;
			}

			#demo1 li {
				margin-top: 20px;
				width: 100%;
			}

			#demo1 li img {
				width: 13px;
				float: left;
				height: auto;
				margin-top: 5px;
				margin-left: -7px;
			}

			#demo1 li div {
				color: #666666;
				margin-left: 50px;
				text-align: left;
			}

			#demo1 li p {
				width: 40px;
				height: 40px;
				line-height: 40px;
				color: #2B9EEF;
				float: left;
				margin-left: -20px;
				margin-top: -11px;
				border-radius: 50%;
				background: white;
				border: 1px solid #2B9EEF;
				text-align: center;
			}
			/**************************************/

			#demo2 li {
				margin-top: 20px;
				width: 100%;
				color: red;
			}

			#demo2 li img {
				width: 13px;
				float: left;
				height: auto;
				margin-top: 5px;
				margin-left: -7px;
			}

			#demo2 li div {
				margin-left: 30px;
			}

			#demo2 li div h4 {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			#demo2 li div p {
				-webkit-line-clamp: 3;
				overflow: hidden;
				text-overflow: ellipsis;
				word-break: break-all;
				-webkit-box-orient: vertical;
				display: -webkit-box !important;
			}
			/**************************************/

			ul#demo3 {
				width: 100%;
				height: auto;
				margin: 30px auto;
				position: relative;
			}

			ul#demo3:before {
				content: "";
				display: block;
				padding-top: 30px;
				position: absolute;
				left: 50%;
				top: 0px;
				height: 500px;
				width: 1px;
				background: red;
			}

			#demo3 li.lf {
				padding-top: 30px;
				width: 45%;
				margin-left: 5%;
			}

			#demo3 li.lf img {
				float: right;
				width: 13px;
				margin-right: -7px;
			}

			#demo3 li.lf div {
				text-align: right;
				margin-right: 30px;
			}

			#demo3 li.rt {
				width: 45%;
				margin-top: 30px;
				margin-left: 50%;
			}

			#demo3 li.rt img {
				float: left;
				width: 13px;
				margin-left: -7px;
			}

			#demo3 li.rt div {
				text-align: left;
				margin-left: 30px;
			}
			/***********************************/

			ul#demo4 {
				height: 720px;
				width: 1px;
				background: red;
				z-index: 1;
				position: relative;
				left: 50%;
				padding-top: 20px;
			}

			ul#demo4 li.lf {
				width: 155px;
				position: relative;
				left: 0px;
				margin-left: -149px;
			}

			ul#demo4 li.lf img {
				float: right;
			}

			ul#demo4 li.lf div {
				margin-right: 30px;

			}

			ul#demo4 li.rt {
				width: 155px;
				position: relative;
				left: 0px;
				margin-left: -6px;
			}

			ul#demo4 li.rt img {
				float: left;
			}
			ul#demo4 li.rt div {
				margin-left: 30px;
			}
		</style>
	</head>

	<body>
		<ul id="demo1">
			<li>
				<img src="img/gwm_my_quan.png" />
				<div>百度(www.baidu.com)(Nasdaq:BIDU)是全球最大的中文搜索引擎,2000年1月由李彦宏、徐勇两人创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。 “百度”二字源于中国宋朝词人辛弃疾的《青玉案》诗句:“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。</div>
			</li>
			<li>
				<img src="img/gwm_my_quan.png" />
				<div>百度以自身的核心技术“超链分析”为基础,提供的搜索服务体验赢得了广大用户的喜爱;超链分析就是通过分析链接网站的多少来评价被链接的网站质量,这保证了用户在百度搜索时,越受用户欢迎的内容排名越靠前。百度总裁李彦宏就是超链分析专利的唯一持有人,目前该技术已为世界各大搜索引擎普遍采用。</div>
			</li>
			<li>
				<p>2016</p>
				<div>百度拥有全球最大的中文网页库,目前收录中文网页已超过12亿,这些网页的数量每天正以千万级的速度在增长;同时,百度在中国各地分布的服务器,能直接从最近的服务器上,把所搜索信息返回给当地用户,使用户享受极快的搜索传输速度。</li>
			</li>
		</ul>
		<ul id="demo2">
			<li>
				<img src="img/gwm_my_quan.png" />
				<div>
					<h4>百度(www.baidu.com)(Nasdaq:BIDU)是全球最大的中文搜索引擎</h4>
					<p>2000年1月由李彦宏、徐勇两人创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。 “百度”二字源于中国宋朝词人辛弃疾的《青玉案》诗句:“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。</p>
				</div>
			</li>
			<li>
				<img src="img/gwm_my_quan.png" />
				<div>
					<h4>百度(www.baidu.com)(Nasdaq:BIDU)是全球最大的中文搜索引擎</h4>
					<p>2000年1月由李彦宏、徐勇两人创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。 “百度”二字源于中国宋朝词人辛弃疾的《青玉案》诗句:“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。</p>
				</div>
			</li>
		</ul>
		<ul id="demo3">
			<li class="lf">
				<img src="img/gwm_my_quan.png" />
				<div>
					<h4>百度是全球最大的中文搜索引擎</h4>
					<p>2000年1月由李彦宏、徐勇两人创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。 “百度”二字源于中国宋朝词人辛弃疾的《青玉案》诗句:“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。</p>
				</div>
			</li>
			<li class="rt">
				<img src="img/gwm_my_quan.png" />
				<div>
					<h4>百度是全球最大的中文搜索引擎</h4>
					<p>2000年1月由李彦宏、徐勇两人创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。 “百度”二字源于中国宋朝词人辛弃疾的《青玉案》诗句:“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。</p>
				</div>
			</li>
		</ul>
		<ul id="demo4">
			<li class="lf">
				<img src="img/gwm_my_quan.png" />
				<div>
					<h4>百度是全球最大的中文搜索引擎</h4>
					<p>2000年1月由李彦宏、徐勇两人创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。 “百度”二字源于中国宋朝词人辛弃疾的《青玉案》诗句:“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。</p>
				</div>
			</li>
			<li class="rt">
				<img src="img/gwm_my_quan.png" />
				<div>
					<h4>百度是全球最大的中文搜索引擎</h4>
					<p>2000年1月由李彦宏、徐勇两人创立于北京中关村,致力于向人们提供“简单,可依赖”的信息获取方式。 “百度”二字源于中国宋朝词人辛弃疾的《青玉案》诗句:“众里寻他千百度”,象征着百度对中文信息检索技术的执著追求。</p>
				</div>
			</li>
		</ul>
	</body>

</html>

  

时间: 2024-10-23 21:58:28

css 常见时间轴的做法(————————————————时间轴——————————————————)的相关文章

原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间

原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org

CSS常见布局问题整理

实现div的水平居中和垂直居中 多元素水平居中 实现栅格化布局 1. 实现div的水平居中和垂直居中 实现效果: 这大概是最经典的一个题目了,所以放在第一个. 方法有好多, 一一列来 主要思路其实就是 使用position,相对父元素做绝对定位(设置百分比[由父元素宽高调节子元素大小]/设置margin和相对位置(确定宽高)) 使用flex属性 使用tranfrom做相对位移的调节 1) 只适用: 宽高已定 设置position: absolute(父元素记得设置: relative), 然后t

(python基础)时间辍time、时间元组localtime、时间格式化strftime

可以直接将下方代码运行查看结果: #!/usr/bin/python# coding=utf-8import time # 引入time模块 # 时间戳:# 每个时间戳都以自从1970年1月1日午夜(历元)经过了多长时间来表示.# 但是1970年之前的日期就无法以此表示了.太遥远的日期也不行,UNIX和Windows只支持到2038年.# Python的time模块下有很多函数可以转换常见日期格式.如函数time.time()用于获取当前时间戳, 如下实例:ticks = time.time()

年月日时间和64位时间的使用及相互转换

通常在我们的程序中,需要使用到年月日类型的时间,也需要使用64位整型的时间,比如存储到数据库中(数据库中对应的时间字段的类型则为big int数据类型).代码中会涉及到如何获取当前时间,以及年月日时间和64位时间之间的转换问题.下面就自己遇到的实际情况,做一个小的总结. 1.获取当前时间 获取当前时间的时间有多种,下面说说使用time函数,使用CTime类和使用SYSTEMTIME结构体这三种常见的获取当前时间的方法. (1)使用time函数获取当前时间 使用该函数的时候应该包含time.h头文

时间处理得到UTC时间

在工作过程遇到了时间处理的问题,因为需要统一将时间处理按照utc时间进行处理,因此,不能简单的通过系统运行直接得到时间的毫秒数,这样会在不同时区得到的值是不同的. import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Calendar; import java.util.Date; import java.util.TimeZone; public class TimeUtil {

php 显示某一个时间相当于当前时间在多少秒前,多少分钟前,多少小时前

/* *function:显示某一个时间相当于当前时间在多少秒前,多少分钟前,多少小时前 *timeInt:unix time时间戳 *format:时间显示格式 */ public function timeFormat($timeInt,$format='Y-m-d H:i:s'){ if(empty($timeInt)||!is_numeric($timeInt)||!$timeInt){ return ''; } $d=time()-$timeInt; if($d<0){ return

格林时间转换成正常时间

[email protected]:~> date +%s 1414741902 oracle中怎么把这个1414741902转换成正常时间格式 select Numtodsinterval(1414741902+TO_NUMBER(SUBSTR(TZ_OFFSET(sessiontimezone), 1, 3)) * 3600, 'second')+to_date('1970-1-1', 'yyyy/mm/dd') from dual; select Numtodsinterval(14147

Linux下文件的三种时间标记:访问时间、修改时间、状态改动时间 (转载)

在windows下,一个文件有:创建时间.修改时间.访问时间. 而在Linux下,一个文件也有三种时间,分别是:访问时间.修改时间.状态改动时间. 两者有此不同,在Linux下没有创建时间的概念,也就是不能知道文件的建立时间,但如果文件建立后就没有修改过,修改时间=建立时间;如果文件建立后, 状态就没有改动过,那么状态改动时间=建立时间;如果文件建立后,没有被读取过,那么访问时间=建立时间,因为不好判断文件是否被改过.读过.其状态是否 变过,所以判断文件的建立时间基本上能为不可能. 如何查一个文

仿真时间推进的逻辑时间与物理时间如何成比例推进

仿真过程中,如何控制邦元的推进速度已经成为仿真过程中重要的问题,仿真中有实时仿真推进.加快仿真时间推进. 减慢仿真时间推进. 假如仿真系统默认的推进速度为1秒(物理时间,一个步长所需要的物理时间为1秒).那在程序中如何实现仿真过程中的推进速度呢,假如成员从上一次推进完到下一次申请推进的物理时间为lt,也即lt=1. 我们知道成员每推进一步,成员内部计算模型需要一定的时间,如果模型计算所需的时间小于等于lt,则模型运算完后还需要(等待(lt(物理时间)-模型运算时间))(物理时间)这长的时间,才能

css常见属性

### css常见属性- color:red/rgb(255,0,0)/#f00; + 注意,如果有a链接,必须在a链接中设置字体的颜色:在外面设置a链接中的字体颜色,无效:- font:400 14px/28px "宋体 微软雅黑": + font-weight:400; bold->700; + font-size:14px; + line-height:28px; + font-family:"宋体"- background:url("相对地址