(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 属性自定义项目列表图案。此方案可灵活控制图案位置,而且文字与图案之间间距也易于控制。总结一下,其实初始化样式表将 <li>默认的小圆点去掉是有其道理。第一,大多情况下,不会用到列表项。第二,用 list-style 自定义列表项实在不好控制。
(2017.9.27) 自定义列表项 list-style 使用心得的更多相关文章
- WPF界面设计技巧(4)—自定义列表项样式
原文:WPF界面设计技巧(4)-自定义列表项样式 有前面修改按钮样式的基础,我们可以尝试来定制一个即好看又好用的 ListBox ,今天先来讲“好看”部分. 打开 Microsoft Visual S ...
- WPF界面设计技巧(5)—自定义列表项呈现内容
原文:WPF界面设计技巧(5)-自定义列表项呈现内容 接续上次的程序,稍微改动一下原有样式,并添加一个数据模板,我们就可以达成下面这样的显示功能: 鼠标悬停于文件列表项上,会在工具提示中显示图像缩略图 ...
- Android零基础入门第39节:ListActivity和自定义列表项
原文:Android零基础入门第39节:ListActivity和自定义列表项 相信通过前两期的学习,以及会开发最简单的一些列表界面了吧,那么本期接着来学习更多方法技巧. 一.使用ListActivi ...
- 每日学习心得:SharePoint 2013 自定义列表项添加Callout菜单项、文档关注、SharePoint服务端对象模型查询
前言: 前一段时间一直都比较忙,没有什么时间进行总结,刚好节前项目上线,同时趁着放假可以好好的对之前遇到的一些问题进行总结.主要内容有使用SharePoint服务端对象模型进行查询.为SharePoi ...
- SharePoint 2013 自定义翻页显示列表项
项目需求:自定义开发一个能分页显示列表项的小部件,允许左右翻页,能根据用户权限来显示管理链接等. 效果如下: 技术要求:使用sharepoint rest API 来获取列表项,这样性能高,能够快速响 ...
- WijmoJS 中自定义 React 菜单和列表项模板
WijmoJS 中自定义 React 菜单和列表项模板 在V2019.0 Update2 的全新版本中,React 框架下 WijmoJS 的前端UI组件功能再度增强. WijmoJS的菜单和类似列表 ...
- 自定义ListView适配器Adapter引用布局文件的情况下实现点击列表项时背景颜色为灰色
listview控件设置适配器的时候,如果使用自定义的adapter,比如MyArrayAdapter extends ArrayAdapter<String> 如果listitem布局文 ...
- SharePoint 列表项通过自定义WebService读取
简述:给其他系统提供集成,发现SharePoint自带的WebService各种不好使,索性就自己写一点,也当做自己学习的记录了.当然内容比较简单,希望大侠们不要介意,也不要骂我啊.好了,进入正题吧. ...
- Flutter 实战(一):列表项内容可自定义的列表组件
前言 本篇文的目的是熟练掌握 Flutter 组件的封装,并且使用回调函数实现主要功能. 本组件的设计灵感来源于 Element 组件库的 table 组件. 正题 定义回调函数 在此之前,必须要了解 ...
随机推荐
- Windows 8 64位系统 在VS2010 32位软件上 搭建 PCL点云库 开发环境
Windows 8 64位系统 在VS2010 32位软件上 搭建 PCL点云库 开发环境 下载PCL For windows 软件包 到这个网站下载PCL-All-In-One Installer: ...
- Jmeter连接MySQL配置(能执行多条sql语句)
Database URL为MySQL的连接串,如果要执行多条SQL语句,后面还要添加“?allowMultiQueries=true”
- 2. Web渗透测试中常见逻辑漏洞解析与实战
注:以下漏洞示例已由相关厂商修复,切勿非法测试! 0x01 漏洞挖掘 01 注册 注册中最常见的有两个,一个是恶意注册,另一个是账户遍历.一个好的注册界面应该是这样 或者这样的 而不是这样的 要么使 ...
- redis系列:通过共同好友案例学习set命令
前言 这一篇文章将讲述Redis中的set类型命令,同样也是通过demo来讲述,其他部分这里就不在赘述了. 项目Github地址:https://github.com/rainbowda/learnW ...
- 网页游戏开发秘笈 PDF扫描版
精选10种常见的游戏类型,透过典型实例,深入剖析游戏引擎及工具的选用技巧,详细讲解每款游戏的制作过程,为快速掌握网页游戏开发提供系统而实用的指南. 网页游戏开发秘笈 目录: 译者序 前 言 导 言 ...
- Django 之装饰器实现登录认证
def check_login(func): # 自定义登录验证装饰器 def warpper(request, *args, **kwargs): is_login = request.sessio ...
- [Design-Pattern]工厂模式
Java版本 1 package interfaces; 2 3 interface Service { 4 void method1(); 5 void method2(); 6 } 7 8 int ...
- 《OD大数据实战》Spark入门实例
一.环境搭建 1. 编译spark 1.3.0 1)安装apache-maven-3.0.5 2)下载并解压 spark-1.3.0.tgz 3)修改make-distribution.sh VER ...
- 洛谷P3068 [USACO13JAN]派对邀请函Party Invitations
P3068 [USACO13JAN]派对邀请函Party Invitations 题目描述 Farmer John is throwing a party and wants to invite so ...
- [Swift]Scanner字符串扫描类
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...