web前端开发过程中，CSS+HTML ul li列表原点如何相

目前我列出两个方案，很详细，希望可以帮助到有疑问的朋友。

方案一:

html

<ul>

<li class="active">

<em></em>

<p><b>参与考试《第一期模拟考试》</b></p>

<p><time>3小时50分钟</time></p>

</li>

<li>

<em></em>

<p><b>学习文档《LDO电路设计规范》</b></p>

<p><time>3小时50分钟</time></p>

</li>

<li>

<em></em>

<p><b>学习文档《LDO电路设计规范》</b></p>

<p><time>3小时50分钟</time></p>

</li>

</ul>

Css:

*{margin:0;padding:0;}

ul{

margin:100px;

padding:0;

list-style: none;

}

ul li{

position:relative;

padding-left: 30px;

padding-bottom: 20px;

border-left:2px #999 solid;

}

ul li em{

position:absolute; left:-5px; top:0; width:8px;

height:8px;border-radius:8px;background:#999;

}

ul li.active em{ background: red;}

ul li p{margin:0;}

ul li time{color:#999;font-size:12px;}

实现原理:

给每一个li一个左边框,em标签使用样式写成原点,采用定位将原点定位到边框线上

方案二:

Html

<ul>

<li class="active">

<img src="2.png" alt="" />

<p><b>参与考试《第一期模拟考试》</b></p>

<p><time>3小时50分钟</time></p>

</li>

<li>

<img src="1.png" alt="" />

<p><b>学习文档《LDO电路设计规范》</b></p>

<p><time>3小时50分钟</time></p>

</li>

<li>

<img src="1.png" alt="" />

<p><b>学习文档《LDO电路设计规范》</b></p>

<p><time>3小时50分钟</time></p>

</li>

</ul>

Css

*{margin:0;padding:0;}

ul{

margin:100px;

padding:0;

list-style: none;

}

ul li{

position:relative;

padding-left: 30px;

padding-bottom: 20px;

border-left:2px #999 solid;

}

ul li img{

position:absolute;

left:-5px;

top:0;

width:10px;

height:10px;

border-radius:10px;

background:#999;

}

ul li p{margin:0;}

ul li time{color:#999;font-size:12px;}

实现原理:

给li一个左边框,同时在结构中添加img作为原点,使用定位将图片原点定位在指定位置上

另外，如果想交流技术的可以点击加入进来

也可一关注我的博客：Eric_qf

都会有新的技巧以及疑难技术讲解。