CSS样式ul与li标签属性与布局技巧
2015-03-03 14:45
330 查看
配合div与css ,ul 、li 可以创建无表格布局,li 代码的格式化:
<1> 运用CSS格式化列表符:
<2> 将列表符换成图标:
<3> 左边对齐:
<4> 添加背景色:
<5> mouseover背景变色:
[注] display:block 不能少,这样才能块状显示。
<6> li 中的元素水平排列,关键 float : left:
<1> 运用CSS格式化列表符:
以下为引用内容: ul li{ list-style-type:none; } |
<2> 将列表符换成图标:
以下为引用内容: ul li{ list-style-type:none; list-style-image: url(images/icon.gif); } |
<3> 左边对齐:
以下为引用内容: ul{ list-style-type:none; margin:0px; } |
<4> 添加背景色:
以下为引用内容: ul{ list-style-type: none; margin:0px; } ul li{ background:#CCC; } |
<5> mouseover背景变色:
以下为引用内容: ul{ list-style-type: none; margin:0px; } ul li a{ display:block; width: 100%; background:#CCC; } ul li a:hover{ background:#F5F5F5; } |
[注] display:block 不能少,这样才能块状显示。
<6> li 中的元素水平排列,关键 float : left:
以下为引用内容: ul{ list-style-type:none; width:100%; } ul li{ width:80px; float:left; } |
相关文章推荐
- iOS开发技巧:布局UIButton的imageView和titleLabel属性
- Android布局技巧:使用TextView的drawable属性
- iOS开发技巧:布局UIButton的imageView和titleLabel属性
- 4-基本布局+CSS样式属性+盒子模型
- pads布局布线技巧(【PCB文件中显示引脚号】 【敷铜】 【显示网络名】 【高亮网络】 【修改PCB中文本的尺寸】 【同时修改多个文本(对象)的尺寸(属性) 让集中在一起的元件散开)
- CSS样式position属性的一个小实例:z方向三层布局分析
- 安卓开发技巧一:深入理解Android布局中Layout_weight的属性
- Android最佳性能实践(四)——布局优化技巧
- Android在XML布局中,textview的text属性,预览提示,但不编译tools
- android基础-view的属性(XML通用属性和方法)和布局管理器(常用布局)
- 使用css中的flexbox属性布局
- Android 布局技巧
- android布局学习--相对布局属性说明
- 安卓常用布局基本属性
- 布局属性
- 关于相对布局RelativeLayout的各种属性介绍
- 【android学习笔记】关于相对布局RelativeLayout的各种属性介绍
- 布局技巧3:创建高效布局
- 枚举技巧~为枚举加Describe属性,输出枚举元素的说明信息
- 布局技巧:创建高效布局