(2017.9.27) 自定义列表项 list-style 使用心得
2018-06-24 01:55:22来源:未知 阅读 ()
今天给某公司做招聘专页。早上完成设计图,下午开始排版。页面套用了我之前做的某人才局的招聘页面,导航栏、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 自定义列表项实在不好控制。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- Html/css 列表项 区分列表首尾 2020-06-11
- Vue 打包后自定义样式无法覆盖elementUI组件原有样式问题 2020-05-31
- Bootstrap4 面包屑导航+表单+输入框组+自定义表单 2020-04-16
- css 自定义滚动条样式 2020-04-07
- html有序无序自定义列表 2020-03-28
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash