ul 原点显示_CSS+HTML ul li列表原点如何相连

方案一:

html

参与考试《第一期模拟考试》

3小时50分钟
学习文档《LDO电路设计规范》

3小时50分钟
学习文档《LDO电路设计规范》

3小时50分钟

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

参与考试《第一期模拟考试》

3小时50分钟
学习文档《LDO电路设计规范》

3小时50分钟
学习文档《LDO电路设计规范》

3小时50分钟

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作为原点,使用定位将图片原点定位在指定位置上

ul 原点显示_CSS+HTML ul li列表原点如何相连相关推荐

ul 原点显示_web前端开发学习教程，CSS HTML - ul li列表原点如何相连
原标题:web前端开发学习教程,CSS HTML - ul li列表原点如何相连目前我列出两个方案,很详细,希望可以帮助到有疑问的朋友. 方案一: html 参与考试<第一期模拟考试> ...
ul、li列表简单实用代码实例
利用ul和li可以实现列表效果,下面就是一个简单的演示. 代码如下: 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 ...
列表标签ul、ol、dl、li
列表标签的种类无序列表标签(ul标签) 有序列表标签(ol标签) 自定义列表标签(dl标签) 无序列表无序列表的各个列表项之间没有顺序级别之分,是并列的.其基本语法格式如下: <!-- ul ...
jquery生成一个li_如何使用jQuery从字符串数组生成UL Li列表？
如何使用jQuery从字符串数组生成UL Li列表? 我有像这样的字符串数组 "美国","加拿大","阿根廷","亚美尼亚&quo ...
Vue ul li 列表最后一个子元素 “不需要列表横线写法”
Vue里面 ul li 列表最后一个子元素 "不需要列表横线写法" .blockflex 1text-align centerborder-right 1px solid rgb ...
ul好看的li列表样式
以下是实际效果截图: 示例代码如下: <!DOCTYPE html> <html> <head> <style> .other-item-title{m ...
css删除li 圆点_css取消ul里的li小圆点代码
去除ul里的li列表小圆点,一般主要有两个方式来解决,一个在html里写,一个在css里写方法1: 我习惯有list-style: none;也有很多人用list-style-type: none; ...
js控制ul的显示隐藏，对象的有效范围
js控制ul的显示隐藏,对象的有效范围 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo ...
java css隔行变色_JS+CSS实现Li列表隔行换色效果的方法
本文实例讲述了JS+CSS实现Li列表隔行换色效果的方法.分享给大家供大家参考.具体实现方法如下: CSS+Js实现Li列表隔行换色效果 .mytable {border-collapse:colla ...

ul 原点显示_CSS+HTML ul li列表原点如何相连

ul 原点显示_CSS+HTML ul li列表原点如何相连相关推荐

最新文章

热门文章