html+css显示代码书写版式

由于要显示行数，所以需选用html的列表标签ol,以下代码可以显示代码书写版式的效果：

<style>
	    .code-part {
			background: yellow;
		}
		
		.code-part li {
			list-style-position: outside;/*关键处*/
			background:green;
			color:black;
			margin-left:10px;
			border-left:2px solid #000;
		}
</style>
		<div class="code-part">
			<ol>
				<li>var param = "shit";</li>
				<li>document.write(param);</li>
			</ol>
		</div>

显示的效果如下:

其中最关键的是li的css属性：list-style-position，其中有两个属性值：inside 和 outside.默认的序号是inside属性的,如果要将序号隔离开来，就必须设置成outside.

所以如果在用到代码书写版式的地方时，可以根据以上的方法来实现那种效果。要显示多行,则只需要增加多个li即可，这是很简单的事嘛

转载于:https://www.cnblogs.com/stefanlee/p/3390878.html