css中的列表样式
在网页设计中,我们经常将某些具有相似功能的标签放在同一组中,这时我们经常会用到列表标签(无序列表ul,有序列表ol),在列表标签中对列表样式的设计可以使我们的页面得到一定程度的美化。
在css中对列表样式主要是对列表项目前列表符号的设置,其语法如下:
list-style-type : disc | circle | square | decimal |
lower-roman | upper-roman | lower-alpha | upper-alpha |
none | armenian | cjk-ideographic | georgian | lower-greek |
hebrew | hiragana | hiragana-iroha | katakana | katakana-iroha |
lower-latin | upper-latin
通过取不同的list-style-type属性值,我们可以得到不同的项目符号。
例:
ul { list-style-type:disc;} /*实心圆*/
ul { list-style-type:circle;} /*空心圆*/
ul { list-style-type:square;} /*实心方块*/
ul { list-style-type:none;} /*不显示项目符号*/
ol { list-style-type:decimal;} /*阿拉伯数字*/
ol { list-style-type:lower-roman;} /*小写罗马数字*/
ol { list-style-type:upper-alpha;} /*大写英文字母*/
如果对于css中所规定了的众多列表符号感到不满意,我们呀可以自定义列表的符号
list-style-image : none | url ( url )
使用这种方式,我们可以为项目列表设置任意的图片为列表符号。这里,我们所设的值为图片文件相对于网页文件的路径或绝对路径(来自网站的文件)。
在列表样式中最为需要注意的是,列表样式只能在列表标签中设置(ul,ol),而不能设置在列表的自标签中(li)。
css中的列表样式的更多相关文章
- CSS Ul(列表样式)
CSS Ul(列表样式) CSS列表属性作用如下: 设置不同的列表项标记为有序列表 设置不同的列表项标记为无序列表 设置列表项标记为图像 一.列表 在HTML中,有两种类型的列表: 无序列表 - 列表 ...
- css3系列-2.css中常见的样式属性和值
css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...
- css中的字体样式及元素样式
css中的字体样式一般包含有就9中,常见的有7种.这7种依次为: 1.字体样式:font-family: 2.字体大小:font-size: 3.字体加粗:font-weight: 4.字体斜体:fo ...
- 【经验】在CSS中定义超链接样式a:link、a:visited、a:hover、a:active的顺序
以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面.出现一些问题,搜索引擎查了一些网站和资料,发现很多人问到这个问题,给出的结果我试了试,大部分都不正确. 给出我试的顺序,可能会对大 ...
- css中的列表属性
list-style-type设定引导列表的符号类型,可以设置多种符号类型,值为disc.circle.square等 list-style-image使用图像作为定制列表的符号 list-style ...
- css中的段落样式及背景
一.段落样式 css中关于段落的样式主要有行高,缩进,段落对齐,文字间距,文字溢出,段落换行等.它们的具体语法如下: line-height : normal | length text-indent ...
- CSS如何设置列表样式属性
列表样式属性 在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...
- CSS如何设置列表样式属性,看这篇文章就够用了
列表样式属性 在HTML中有2种列表.无序列表和有序列表,在工作中无序列表比较常用,无序列表就是ul标签和li标签组合成的称之为无序列表,那什么是有序列表呢?就是ol标签和li标签组合成的称之为有序列 ...
- css冲突2 要关闭的css在项目代码以外,但是是通过<link>标签引入的css(例如bootstrap):解决方法,在APP.css中使用全局样式
css冲突,导致html字体过小. 通过浏览器检查发现,导致字体过小的css来自bootstrap. 现要关闭bootstrap的css: 直接在APP.css中添加: html{ font-size ...
随机推荐
- DynamicMBean(Java SE 6 新特性: JMX 与系统管理)
Dynamic MBean 是一种在运行时定义其管理接口的 MBean.例如,配置 MBean 可以通过解析 XML 文件来确定它所公开的属性名称和类型. 任何实现 DynamicMBean 接口的类 ...
- com.microsoft.sqlserver.jdbc.SQLServerException: 结果集没有当前行
參考博客com.microsoft.sqlserver.jdbc.SQLServerException: 结果集没有当前行 java获取结果集,if(rs!=null).和while(rs.next( ...
- [React] React Router: IndexRoute
IndexRoute allows us to define a default child component to be rendered at a specific route when no ...
- [Angular 2] Filter items with a custom search Pipe in Angular 2
This lessons implements the Search Pipe with a new SearchBox component so you can search through eac ...
- 通过layout实现可拖拽自动排序的UICollectionView
文/CenturyGuo(简书作者)原文链接:http://www.jianshu.com/p/8d1bf1838882著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. Translat ...
- 设计模式(Java版)-创建型模式之简单工厂模式
前言:这段时间在学习设计模式,本人也是小菜一枚(所以写的如果有错误的地方请大大们给予指出).这个东西也是我一直想学习的,从点点滴滴做起,记录下自己每天的领悟! 一.工厂模式的动机 在软件系统中,经常面 ...
- 酷Q机器人,QQ机器人使用教程
软件介绍: 酷Q,软件酷Q机器人是一款基于webqq开发的一款自动接收.处理qq消息的软件. 改程序使用易语言编写,精简大量不必要代码,减小了软件体积,优化程序速度,使得酷Q更加轻巧好用. 在消息处理 ...
- (原创)初识cordova(一)
在公司做项目,发现有人在做大项目使用了cordova技术.做的是昆山的项目.之前听说过phonegap,也测试过,但是感觉效率不是很好,就没怎么研究,后来看他们做的项目还不错,于是想试一试. 搭建开发 ...
- jQuery中DOM操作
1 定义:jquery中对DOM的操作就是对DOM元素进行增删查改操作 2 分类: 1)DOM Core(核心):用途广泛 支持多种编程语言 2)HTML DOM:代码简短 只用于处理web ...
- struts2 JS获取上传文件的绝对路径,兼容IE和FF
因为file控件上传失败后会自动清空,所以使用文本框来保存上传路径,而且在不同的浏览器下,控件的样式也需要兼容.下面是自己用到的实例 // 初始化判断浏览器的版本,根据版本的不同使用不同的样式func ...