<style>
.redcircle { position: relativemargin: auto width: 8pxheight: 8pxbackground: #FF0000border-radius: 50%border: 1px solid #FF6347}
</style>
<table>
<tr><th>服务器</th><th>状态</th><th>CPU</th><th>MEM</th></tr>
<tr><td>game1</td><td><div class="redcircle"></div></td> <td>10</td><td>22</td></tr>
</table>
实现思路
在实现上，完全通过 HTML 和 CSS 来实现，没有使用一行的 JS 逻辑代码。主要是用了一些伪类和 CSS 属性来实现。
HTML 部分
<ul class='time-line'>
<li class='timeline-stone is-completed'>
<div class='list-content'>
<div class='title'>HeloWorld</div>
<span class='time'>1993.08.03</span>
</div>
</li>
<li class='timeline-stone is-completed'>
<div class='list-content'>
<div class='title'>HeloWorld</div>
</div>
</li>
<li class='timeline-stone'>
<div class='list-content'>
<div class='title'>HeloWorld</div>
</div>
</li>
</ul>
这部分没什么讲的，主要是一些 <ul>无序列表和子项 <li>以及各自的 css 样式组成的基本结构。这里只是使用 <div>作为条目内容做结构，内部使用了 flex-box 盒子模型来做了 title 和 time 的左右布局。
CSS 部分(核心)
为了方便起见，直接将重用多次的几个值作为变量放到头部。
$purpleBText: #7d5ae7
$darkText: #666666
$lightText: #999999
$darkLine: #eaeaea.time-line { list-style: none// 不显示列表默认样式(即就是左侧的小黑点或数字) margin: 0 position: relative top: -18px
// 列表项内容
.list-content { display: flex font-size: 12px padding: 12px 10px 12px 0 margin-left: 10px position: relative bottom: -18px
.title { flex-grow: 1
} .time { font-weight: 200 font-size: 12px color: $lightText
}
} .timeline-stone { border-left: $darkLine 1px solid position: relative margin-left: -23px font-weight: 200 color: $darkText
&::before { content: '' width: 5px height: 5px background-color: $darkLine border-radius: 50% position: absolute bottom: 0 left: -3px
}
&.is-completed { border-left-color: $purpleBText z-index: 1 color: $purpleBText font-weight: 600
&:first-child { border-left: transparent 1px solid
}
&::before { width: 11px height: 11px background-color: $purpleBText opacity: 0.4 left: -6px bottom: -5px
}
&::after { content: '' width: 7px height: 7px border-radius: 50% position: absolute background-color: $purpleBText left: -4px bottom: -3px
}
}
}
}
圆点居中
图中绿色的表示<li>每一个子项，而红色则表示条目内容区。可以看到，这里的实现方式是在 list-content内容区采用相对布局将自身向下移动一半列表项高度，将圆点以绝对布局的方式定位到 <li>的底部。
圆点的绘制
这里的圆点均采用 pseudo-class 伪类的方式来添加元素，只需要将 content 设置为空串即可代替常规的 HTML 结点。
共有如下两种状态：
unfinished: 就是一个小灰点，只需要在 timeline-stone 样式上给<li>加 before 伪类即可。
finished：在 is-completed 样式中，使用 before 和 after 搭配绝对布局的方式来绘制已激活状态的小圆点。
小竖线
小竖线同样和小圆点一样都具有两种状态，而它的渲染我们采取了使用小圆点所在的<li>元素的左边框作为时间线，并且通过 first-child 或者 last-child 这两个伪类来实现对第一个或者最后一个边框样式的控制。
这是以前写的涂鸦板一样的东西,按住鼠标左键拖拽就可以绘制指针的运动轨迹<body>
<center>
<canvas id="cavsElem" width="800" height="560" style="border: 1px solid black ">你的浏览器不支持此涂鸦板</canvas>
画笔颜色：<input type="color" id="context.color" />
画笔大小:<input type="number"id="context.size" max="10" value="1" />
</center>
<script>
(function(){
var canvas=document.getElementById('cavsElem')//获得画布
var context=canvas.getContext('2d')//准备画笔
var a=document.getElementById('context.color')
var b=document.getElementById('context.size')
canvas.onmousedown=function(e){ //鼠标触发onmousedown事件时,获取起始坐标
var x=e.clientX-canvas.getBoundingClientRect().left
var y=e.clientY-canvas.getBoundingClientRect().top
context.beginPath()
context.moveTo(x,y)
canvas.onmousemove=function(event){ //触发鼠标移动事件时，获取绘制线条的坐标
var x=event.clientX-canvas.getBoundingClientRect().left
var y=event.clientY-canvas.getBoundingClientRect().top
context.lineTo(x,y)//绘制线条
context.strokeStyle=a.value
context.lineWidth=b.value
context.stroke()
}
canvas.onmouseup=function(event){ //鼠标被松开时，返回null
canvas.onmousemove=null
}
}
}())
</script>
</body>
