css中ul li的用法
类别:Web前端 浏览量:1331
时间:2013-8-10 css中ul li的用法
css中ul li的用法css样式表为列表增加了一些功能,控制ul li列表的样式包括列表样式、图形符号、列表位置三个部分。
列表符号
列表符号是指显示于每一个列表项目前的符号标识。
/*基本格式如下:*/
list-style-type:参数
/*参数取值范围:*/
/*参数中的disc是默认选项。*/
·disc:圆形
·circle:空心圆
·square:方块
·decimal:十进制数字
·lower-roman:小写罗马数字
·upper-roman:大写罗马数字
·lower-alpha:小写希腊字母
·upper-alpha:大写希腊字母
·none:无符号显示
图形符号
图形符号指原来列表的项目符号将可以使用图形来代替。
/*基本格式如下:*/ /*URL是用来代替项目符号的图形文件的地址,可以使用相对地址或绝对地址。*/ list-style-image:URL /*例如*/ ul li{ list-style-type:none; list-style-image: url(/blog/images/icon.gif); }
列表位置
列表位置描述列表在何处显示。
/*基本格式如下:*/
list-style-position:参数
/*参数取值范围:*/
inside:在列表项目标记放置在文本以内,且环绕文本根据标记对齐。
outside:默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外,且环绕文本不根据标记对齐。
inherit:规定应该从父元素继承 list-style-position 属性的值。
li和ul标签几个用法实例
/*将列表符换成图像*/
ul li{
list-style-type:none;
list-style-image: url(/blog/images/icon.gif);
}
/*列表左对齐*/
ul{
list-style-type:none;
margin:0px;
}
/*给列表加背景色*/
ul{
list-style-type: none;
margin:0px;
}
ul li{
background:#CCC;
}
/*列表加MOUSEOVER背景变色效果*/
ul{ list-style-type: none; margin:0px; }
ul li a{ display:block; width: 100%; background:#ccc; }
ul li a:hover{ background:#999; } /*说明:display:block;这一行必须要加的,这样才能块状显示!*/
/*LI中的元素水平排列,关键FLOAT:LEFT: */
ul{
list-style-type:none;
width:100%;
}
ul li{
width:80px;
float:left;
}
您可能感兴趣
- html中table怎么用(详解CSS的table-layout属性的用法)
- css 中border基本语法(详解CSS的border边框属性及其在CSS3中的新特性)
- css浮动小例子教程(使用css transition属性实现一个带动画显隐的微信小程序部件)
- h5css3图片旋转(怎样实现H5+CSS3手指滑动切换图片的示例代码)
- css 三级层级菜单(利用CSS3实现动态的二级三级菜单效果实例源码)
- css语言代码大全(分享20条编写 CSS 代码的建议)
- css3背景渐变动画效果(css3制作的背景渐变动画效果)
- 纯css写三角形(老生常谈 使用 CSS 实现三角形的技巧多种方法)
- css长度单位有哪些(聊一聊CSS中的长度单位的使用)
- css特效边框流线动画(CSS 动画实现动态气泡背景的方法)
- css空白边叠加
- css的内外边距均设置为0(详解css边距重叠的几种解决方案)
- css3伸缩布局教学(css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效)
- css 宽度继承(CSS样式中大于号的使用及Css中处理继承方法)
- css经典技巧(CSS性能优化提高css性能的方法)
- css代码使用方法(写出牛逼的CSS代码13条建议你会哪几条)
- 他是梁山最早的头目,江湖人称 旱地忽律 ,宋江几乎将其遗忘(他是梁山最早的头目)
- 梁山创始人杜迁,为何不受宋江待见,只排名83位(梁山创始人杜迁)
- 法国面包(法国面包法棍)
- 微信(微信分身)
- 双十二(双十二和双十一哪个划算)
- 佛肚竹盆景的养护之道(佛肚竹盆景的养护之道)
热门推荐
- css3 media媒体查询
- idea的mysql如何连接(在IntelliJ IDEA中使用Java连接MySQL数据库的方法详解)
- html markdown 超链接对比(html+js 实现markdown编辑器效果)
- dedecms调用点击数(织梦DEDECMS中显示复制地址,推荐给QQ/MSN上的好友的代码)
- vue实现列表向上滚动更新(vue实现列表无缝滚动)
- mysql把重复数据删掉(mysql查找删除重复数据并只保留一条实例详解)
- 云服务器怎么上传16g文件(云服务器怎么上传下载文件?)
- 手机网站自适应的方法
- 租用云服务器注意事项(怎么租用到性能过硬的美国云服务器)
- 织梦图集怎么设置(织梦不能上传jpg格式怎么办如何解决)