CSS时间线样式

css实现时间线样式,效果如下图:请添加图片描述

一、CSS代码

.timeline {padding-left: 5px}			.timeline-item { position: relative;padding-bottom: 20px;}			.timeline-axis {position: absolute;left: -5px;top: 0;z-index: 10;width: 20px;height: 20px;line-height: 20px;background-color: #fff;color: #16b777;border-radius: 50%;text-align: center;cursor: pointer;}			.timeline-axis:hover {color: #ff5722}			.timeline-item:before {content: "";position: absolute;left: 5px;top: 0;z-index: 0;width: 1px;height: 100%;background: #16b777;}	.timeline-item:first-child:before {display: block;}			.timeline-item:last-child:before {display: none;}			.timeline-content {padding-left: 25px;}			.timeline-title {position: relative;margin-bottom: 10px;line-height: 22px}.roundness{background-color: #16b777;}

二、html代码

<div class="mythBox mid timeline"><div class="timeline-item"><i class="timeline-axis roundness"></i><div class="timeline-content text"><div class="timeline-title">2005年大学毕业</div></div></div><div class="timeline-item"><i class="timeline-axis roundness"></i><div class="timeline-content text"><div class="timeline-title">2005年大学毕业</div></div></div><div class="timeline-item"><i class="timeline-axis roundness"></i><div class="timeline-content text"><div class="timeline-title">2005年大学毕业</div></div></div></div>

三、完整代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1" /><style>.timeline {padding-left: 5px}			.timeline-item { position: relative;padding-bottom: 20px;}			.timeline-axis {position: absolute;left: -5px;top: 0;z-index: 10;width: 20px;height: 20px;line-height: 20px;background-color: #fff;color: #16b777;border-radius: 50%;text-align: center;cursor: pointer;}			.timeline-axis:hover {color: #ff5722}			.timeline-item:before {content: "";position: absolute;left: 5px;top: 0;z-index: 0;width: 1px;height: 100%;background: #16b777;}	.timeline-item:first-child:before {display: block;}			.timeline-item:last-child:before {display: none;}			.timeline-content {padding-left: 25px;}			.timeline-title {position: relative;margin-bottom: 10px;line-height: 22px}.roundness{background-color: #16b777;}</style></head><body><div class="mythBox mid timeline"><div class="timeline-item"><i class="timeline-axis roundness"></i><div class="timeline-content text"><div class="timeline-title">2005年大学毕业</div></div></div><div class="timeline-item"><i class="timeline-axis roundness"></i><div class="timeline-content text"><div class="timeline-title">2005年大学毕业</div></div></div><div class="timeline-item"><i class="timeline-axis roundness"></i><div class="timeline-content text"><div class="timeline-title">2005年大学毕业</div></div></div></div></body>
</html>

ok,完工。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/184210.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android Studio报错:connect refused

参考链接&#xff1a; https://blog.csdn.net/qq_43213783/article/details/113936012 参考文章中说报错主要是由于代理导致的&#xff0c;在文件->设置->外观与行为->系统设置->HTTP代理。 方法一&#xff1a; 查看打开代理&#xff08;前提是代理可以通网&#x…

数据可视化PCA与t-SNE

PCA&#xff08;主成分分析&#xff09;和t-SNE&#xff08;t分布随机近邻嵌入&#xff09;都是降维技术&#xff0c;可以用于数据的可视化和特征提取。 降维&#xff1a;把数据或特征的维数降低&#xff0c;其基本作用包括&#xff1a; 提高样本密度&#xff0c;以及使基于欧…

实验(一):运算器实验

一、实验内容与目的 实验要求&#xff1a; 利用 CP226 实验仪的 K16..K23开关做为DBUS数据&#xff0c;其它开关做为控制信号&#xff0c;将数据写累加器A和工作寄存器W&#xff0c;并用开关控制ALU的运算方式&#xff0c;实现运算器的功能&#xff0c;将结果送入OUT寄存器。 实…

C# TCP Server服务端多线程监听RFID读卡器客户端上传的读卡数据

本示例使用设备介绍&#xff1a;液显WIFI无线网络HTTP协议RFID云读卡器可编程实时可控开关TTS语-淘宝网 (taobao.com) using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using Sy…

EM@解三角形@正弦定理@余弦定理

文章目录 abstract解三角形基本原理不唯一性 正弦定理直角三角形中的情形推广锐角三角形钝角情形 小结:正弦定理 余弦定理直角三角形中的情形非直角情形小结:余弦定理公式的角余弦形式 abstract 解直角三角形问题正弦定理和余弦定理的推导 对于非直角情形,都是直角情形的推广同…

机器视觉的试卷批改系统 - opencv python 视觉识别 计算机竞赛

文章目录 0 简介1 项目背景2 项目目的3 系统设计3.1 目标对象3.2 系统架构3.3 软件设计方案 4 图像预处理4.1 灰度二值化4.2 形态学处理4.3 算式提取4.4 倾斜校正4.5 字符分割 5 字符识别5.1 支持向量机原理5.2 基于SVM的字符识别5.3 SVM算法实现 6 算法测试7 系统实现8 最后 0…

微服务架构深入理解 | 技术栈

&#x1f497;wei_shuo的个人主页 &#x1f4ab;wei_shuo的学习社区 &#x1f310;Hello World &#xff01; 微服务架构深入理解 | 技术栈 服务网关 服务网关是在微服务架构中扮演重要角色的组件&#xff0c;它是系统对外的入口&#xff0c;负责接收和处理客户端的请求&#x…

【算法 | 模拟No.3】leetcode 38. 外观数列

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【手撕算法系列专栏】【Leetcode】 &#x1f354;本专栏旨在提高自己算法能力的同时&#xff0c;记录一下自己的学习过程&#xff0c;希望…

鸿蒙原生应用开发-DevEco Studio超级终端模拟器的使用

一、了解超级终端模拟器支持的设备情况 该特性在DevEco Studio V2.1 Release及更高版本中支持。 目前超级终端模拟器支持“PhonePhone”、“PhoneTablet”和“PhoneTV”的设备组网方式&#xff0c;开发者可以使用该超级终端模拟器来调测具备跨设备特性的应用/服务&#xff0c;如…

中远麒麟堡垒机SQL注入漏洞复现

简介 中远麒麟堡垒机用于运维管理的认证、授权、审计等监控管理&#xff0c;在该产品admin.php处存在SQL 注入漏洞。 漏洞复现 FOFA语法&#xff1a; body"url\"admin.php?controlleradmin_index&actionget_user_login_fristauth&username" 或者 c…

redis: 记录一次线上redis内存占用过大问题解决过程

引言 记录一次线上redis占用过大的排查过程&#xff0c;供后续参考 问题背景 测试同事突然反馈测试环境的web系统无法登陆&#xff0c;同时发现其他子系统也存在各类使用问题 排查过程 1、因为首先反馈的是测试环境系统无法登陆&#xff0c;于是首先去查看了登陆功能的报错…

【STM32】HAL库UART含校验位的串口通信配置BUG避坑

【STM32】HAL库UART含校验位的串口通信配置BUG避坑 文章目录 UART协议校验位HAL库配置含校验位的串口配置BUG避坑附录&#xff1a;Cortex-M架构的SysTick系统定时器精准延时和MCU位带操作SysTick系统定时器精准延时延时函数阻塞延时非阻塞延时 位带操作位带代码位带宏定义总线函…

Vuex状态管理(简单易懂、全网最全)

目录 Vuex是什么&#xff1f; 如何部署 如何使用 state 基础使用 在计算属性属性中使用 使用展开运算符 mutations 基础使用 使用辅助函数&#xff08;mapMutations&#xff09;简化 使用常量替代 Mutation 事件类型 getters actions 使用辅助函数&#xff08;…

启动Hbase出现报错

报错信息&#xff1a;slave1:head: cannot open/usr/local/hbase-2.3.1/bin/../logs/hbasewanggiqi-regionserver-slavel.out’ for reading: No such file or direslave2: head: cannot open/usr/local/hbase-2.3.1/bin/../logs/hbasewangqiqi-regionserver-slave2.out’ for …

计算机毕业论文内容参考|基于spingboot的金融投资顾问推荐系统

文章目录 导文文章重点摘要前言绪论课题背景:国内外现状与趋势:课题内容:相关技术与方法介绍系统分析系统设计系统实现总结与展望1本文总结2后续工作展望导文 计算机毕业论文内容参考|基于spingboot的金融投资顾问推荐系统 文章重点 摘要 基于SpingBoot的金融投资顾问推荐…

汽车生产RFID智能制造设计解决方案与思路

汽车行业需求 汽车行业正面临着快速变革&#xff0c;传统的汽车制造方式正在向柔性化、数字化、自动化和数据化的智能制造体系转变&#xff0c;在这个变革的背景下&#xff0c;汽车制造企业面临着物流、生产、配送和资产管理等方面的挑战&#xff0c;为了应对这些挑战&#xf…

ch579串口编程笔记

“CH579SFR.h”库文件&#xff0c;关于串口中断部分 /* UART interrupt identification values for IIR bits 3:0 */ #define UART_II_SLV_ADDR 0x0E // RO, UART0 slave address match #define UART_II_LINE_STAT 0x06 // R…

PTE SST和RL模板

目录 事实证明&#xff0c;SST分值占比很小&#xff0c;不是很需要好好练 SST的模板&#xff1a; RL模板&#xff1a; 给你一个模版供参考&#xff1a; RA技巧 为什么说日本人团结 This lecture mainly talked about the importance of words and the sound of words and…

10道高频webpack面试题快问快答

面试中的快问快答 快问快答的情景在面试中非常常见。 在面试过程中&#xff0c;面试官通常会使用快问快答的方式来快速评估面试者的基础知识、思维能力和反应速度。 这种情景下&#xff0c;面试官会提出一系列简短的问题&#xff0c;并期望面试者能够迅速做出回答或提供简洁明…

在微信小程序中怎么实现报名功能

在当今数字化时代&#xff0c;微信小程序已经成为各行各业进行营销和客户管理的必备工具。其中&#xff0c;报名功能作为微信小程序的一个重要应用场景&#xff0c;为企业或组织提供了方便、高效、实时的数据收集与管理方式。本文将为你详细介绍如何在微信小程序中实现报名功能…