html+css显⽰代码书写版式
由于要显⽰⾏数,所以需选⽤html的列表标签ol,以下代码可以显⽰代码书写版式的效果:
<style>
.code-part {
好看的css代码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即可,这是很简单的事嘛
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论