《CSS权威指南》学习记录——列表
2016-06-11 08:09
429 查看
HTML部分
无序列表
<ul> <li>咖啡</li> <li>茶</li> <li>牛奶</li> </ul>
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
有序列表
<ol> <li>咖啡</li> <li>牛奶</li> <li>茶</li> </ol>
列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
自定义列表
自定义列表不仅仅是一列项目,而是项目及其注释的组合。自定义列表以
标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以 开始。
<dl> <dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd> </dl>
嵌套列表
<ul> <li>咖啡</li> <li>茶 <ul> <li>红茶</li> <li>绿茶 <ul> <li>中国茶</li> <li>非洲茶</li> </ul> </li> </ul> </li> <li>牛奶</li> </ul>
CSS部分
列表类型
关键字:list-style-type。默认值为disc,应用于display值为list-item的元素,有继承性。CSS无法区别有序列表项和无序列表项,因此可以在有序列表中使用同心圆而非数字,不过最终的结果可能还是要由用户代理决定。
不想显示标志,可以使用none,不过并不会中断有序列表中的计数。
<ol> <li class="try">咖啡</li> <li>牛奶</li> <li class="try">茶</li> <li>水</li> </ol> .try{list-style-type:none;}
列表项图像
关键字:list-style-image。可接受:url、none(默认值)。应用于display值为list-item的元素。有继承性。ul li{list-style-image:url(onio.jpg);}
如果图像未能正常加载,或被破坏,或不是用户代理能处理的格式,这时提供一个作为“后路”的标志类型往往是一个好主意:
ul li{list-style-image:url(nhio.png); list-style-type:square;}
列表标志位置
关键字:list-style-position。可接受:inside、outside(默认值)。有继承性。<ul class="inside"> <li>Earl Grey Tea - 一种黑颜色的茶</li> <li>Jasmine Tea - 一种神奇的“全功能”茶</li> <li>Honeybush Tea - 一种令人愉快的果味茶</li> </ul> <ul class="outside"> <li>Earl Grey Tea - 一种黑颜色的茶</li> <li>Jasmine Tea - 一种神奇的“全功能”茶</li> <li>Honeybush Tea - 一种令人愉快的果味茶</li> .inside{ list-style-position:inside; } .outside{ list-style-position:outside; } </ul>
简写列表样式
关键字:list-style。顺序无所谓,没有显式声明的值为默认值,有继承性。li{list-style:url(ohio.jpg) square outside;}
相关文章推荐
- Web布局连载——两栏固定布局(五)
- [div+css]晒晒最新制作专题推广页模板
- 在Windows 8.1的IE 11中屏蔽双击放大功能
- 盒子模型
- CSS选择器
- CSS样式优先权
- HTML5调用摄像头实例
- Powershell 创建炫丽美观的Html报表
- [css] line-height 百分比单位和数值单位的区别
- Apple官网研究之使用Justify布局导航
- 关于前端的思考与感悟
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 设计更快的网页(三):字体和 CSS 调整
- 纯CSS制作的新闻网站中的文章列表
- 10条影响CSS渲染速度的写法与使用建议第1/3页