bootstrap实现垂直时间线大事记代码
代码语言:html
所属分类:其他
代码描述:bootstrap实现垂直时间线大事记代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
<style type="text/css">
.demo {
padding:3em 0;
}
.main-timeline {
padding-top:50px;
position:relative;
}
.main-timeline:after {
content:"";
display:block;
clear:both;
}
.main-timeline .timeline {
width:54.2%;
float:left;
margin-top:-50px;
overflow:hidden;
position:relative;
}
.main-timeline .timeline:last-child {
overflow:visible;
}
.main-timeline .timeline:before {
content:"";
width:95px;
height:95px;
border-radius:50%;
background:#fff;
border:4px solid transparent;
border-top:4px solid #8c51c7;
border-left:4px solid #8c51c7;
position:absolute;
top:0;
right:0;
transform:rotate(45deg);
}
.main-timeline .timeline:after {
content:"";
width:65px;
height:100%;
border-radiu.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0