(2017.9.27) 自定义列表项 list-style 使用心得

今天给某公司做招聘专页。早上完成设计图，下午开始排版。页面套用了我之前做的某人才局的招聘页面，导航栏、banner 很快就出来了。这次内容里我有些地方用了列表，当然要用 <ul> <li> 标签。列表项（小圆点）做成绿色的小正方块，这时我想是不是有一个 CSS 属性用来自定义列表项。不用不知道，还真有。list-style 其中可定义 list-style-type、list-style-position 和 list-style-image，这三个属性是可以合在一起写。list-style-image 正是自定义列表项图案。

开始定义他们之前，我遇到了两个问题：1、 <li> 标签默认样式小圆点不见了。查看后发现，初始化样式表 <ul> 定义了 list-style: none，导致默认的小圆点去掉了。那需要我们把 <ul> 的 list-style 定义一下。2、list-style-position 有两个可选值：insite 和 outsite，使用 insite （列表项在行内）没有问题，但使用 outsite（列表项在行外），小圆点就不见了。原来还是因为初始化样式表，它把 <div> 定义了 overflow: hidden，溢出 <div> 那部分会被切掉。而 <ul> 包含在 <div> 里面，所以 <div> 把溢出的列表项给切掉。这里把 <div> 定义默认的 visible 就行了。

可以开始自定义列表图案。首先，把图案从 PS 上切下来保存在指定位置。定义 list-style-image: url(i/icon.gif)。问题来了，图案没有和文字水平居中。百度之，日 <li> 需设置固定高度，设之，无用。仔细再查，原来前人对自定义图案早有经验：方案1，在列表项图案切图时包含底下留白，该方案要确保图案留白与页面底色一致。我认为此方案不优雅，因为字体可能会变大变小因此，不能复用。方案2，用 background 属性自定义项目列表图案。此方案可灵活控制图案位置，而且文字与图案之间间距也易于控制，（我不会告诉你用 padding 控制间距）。总结一下，其实初始化样式表将 <li>默认的小圆点去掉是有其道理。第一，大多情况下，不会用到列表项。第二，用 list-style 自定义列表项实在不好控制。

(2017.9.27) 自定义列表项 list-style 使用心得相关推荐

html自定义列表图标,自定义列表项符号list-style-image详解
本篇文章给大家带来的内容是关于自定义列表项符号list-style-image详解,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 一.list-style-image属性不管是有序 ...
SharePoint 2010 列表项代码绑定附件心得（FileUpload上传附件）
最近项目中用到在插入Item时绑定附件,可以上传多个附件,很快就写出来了,可是测试一侧老是有问题,经过多番折腾,终于算通过测试.SharePoint 2010上传附件需注意一下几点: 判断文件是否为空 ...
html自定义列表嵌套,HTML 列表
HTML 支持有序.无序和定义列表: HTML 列表有序列表The first list item The second list item The third list item无序列表List ...
html 实现列表组并排,列表组--自定义列表组
Bootstrap框加在链接列表组的基础上新增了两个样式: ☑list-group-item-heading:用来定义列表项头部样式 ☑list-group-item-text:用来定义列表项主要内容 ...
HTML列表标签及自定义列表的应用
1.无序列表无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记. 无序列表始于 <ul> 标签.每个列表项始于<li>. 也可以通过CSS改变项目符号, ...
React结合虚拟列表VirtualList的动态获取列表项高度问题
React结合虚拟列表VirtualList的动态获取列表项高度问题: 问题场景:页面查询大量数据的时候结合VirtualList也就是虚拟列表: 例如:手机通讯录查询联系人结合虚拟列表问题描述: ...
无序列表，有序列表，自定义列表
无序列表-没有顺序的一组内容语法:<ul> 定义无序列表 <li></li> (列表项) </ul> 语义:用于将没有数字顺序的一组内容或数据进行 ...
关于HTML有序无序及自定义列表
HTML无序列表无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记. 无序列表使用 <ul> 标签 <ul> <li>Coffee</ ...
动态渲染element组件el-table表头项+自定义el-table列表项
动态渲染el-table表头项+自定义el-table列表项现在不少项目的表格需要结合穿梭框动态显示表头有哪些项,但按照el-table原本的设置,有多少项就直接在html写多少个el-table- ...

(2017.9.27) 自定义列表项 list-style 使用心得

(2017.9.27) 自定义列表项 list-style 使用心得相关推荐

最新文章

热门文章