关于css中使用ul li的一些体会
参考网址:http://hi.baidu.com/july_leo/item/5237cd612070ae2668105b40
如何修改ul li的显示
--------------------------------
css对应的定义:
ul{ margin-left: 15px;margin-bottom: 0px; } li{ list-style-type:disc; }
----------------
参考资料:
list-style-type的常用用法
语法: list-style-type : disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
取值: disc : CSS1 默认值。实心圆 circle : CSS1 空心圆 square : CSS1 实心方块 decimal : CSS1 阿拉伯数字 lower-roman : CSS1 小写罗马数字 upper-roman : CSS1 大写罗马数字 lower-alpha : CSS1 小写英文字母 upper-alpha : CSS1 大写英文字母 none : CSS1 不使用项目符号
-------------------
LI代码的格式化:
A).运用CSS格式化列表符:
ul li{ list-style-type:none; }
B).如果你想将列表符换成图像,则:
ul li{ list-style-type:none; list-style-image: url(images/icon.gif); }
C).为了左对齐,可以用如下代码:
ul{ list-style-type:none; margin:0px; }
D).如果想给列表加背景色,可以用如下代码:
ul{ list-style-type: none; margin:0px; } ul li{ background:#CCC; }
E).如果想给列表加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;这一行必须要加的,这样才能块状显示!
F).LI中的元素水平排列,关键FLOAT:LEFT:
ul{ list-style-type:none; width:100%; } ul li{ width:80px; float:left; }
关于css中使用ul li的一些体会的更多相关文章
- CSS中的ul与li样式详解
CSS中的ul与li样式详解ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性.list-style-image属性.li ...
- CSS中的ul与li样式详解 list-type
转自新浪博客http://blog.sina.com.cn/u/2539885750 ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style ...
- DIV+CSS中标签ul ol li dl dt dd用法
ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...
- CSS中如何将li横向排列
直接贴段例子代码吧: @{ Layout = null;} <!DOCTYPE html><style type="text/css"> .test li ...
- css中实现ul两端的li对齐外面边缘
其实就是设置ul的宽度大一些就好
- jquery中对于ul>li列表分页。学习记录
这个是很简单的一种分页,只能对列表进行分页.为了开发有可能需要用到记录下来 Html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
- html中去除ul,li标签的样式列表标签的点?
- css控制UL LI 的样式详解
用<ul>设置导航 <style> #menu ul {list-style:none;margin:0px;} #menu ul li {float:left;} </ ...
- css控制UL LI 的样式详解(推荐)
代码如下: <div id="menu"> <ul> <li><a href="#">首页</a>& ...
随机推荐
- Android的Drawable
1.获取Drawable的内部宽\高:getIntrinsicHeight/Width.但是并不是所有Drawable都有内部宽高(比如说一个颜色形成的宽高,Drawable的宽高不等于大小,大小是根 ...
- 计算两点间的距离,hdu-2001
计算两点间的距离 Problem Description 输入两点坐标(X1,Y1),(X2,Y2),计算并输出两点间的距离. Input 输入数据有多组,每组占一行,由4个实数组成,分别表示x1 ...
- 创建一个Hello World模块
这篇文章描述了怎样为Orchard建立一个非常小的模块,它只显示一个"Hello World"页面. 另一个模块[Module]的简单例子,你可以从这找到:Quick Start ...
- COB Epoxy灌膠時氣泡產生的原因與解決方法
COB的黑膠 (Epoxy)有氣泡通常是不被允許的,因為外部氣孔不但會影響到外觀,內部氣孔更有可能會破壞 Wire bonding 的鋁線穩定度.既使在COB製程剛完成的時候沒有通過功能測試,也不代表 ...
- Dependency Walker使用说明
Dependency Walker使用说明 标签: dllexewindowsvbqq工具 2010-03-29 11:10 25175人阅读 评论(22) 收藏 举报 分类: 基本常识(45) ...
- C语言的本质(27)——C语言与汇编之计算机结构
现代计算机都是基于冯·诺依曼或哈佛体系结构的,不管是嵌入式系统.个人电脑还是服务器.这种两种体系结构的主要特点是:CPU和内存是计算机的两个主要组成部分,内存中保存着数据和指令,CPU从内存中取指令执 ...
- MFC子窗口和父窗口(SetParent,SetOwner)
一.概念和区别 在windows系统中,每个窗口对象都对应有一个数据结构,形成一个list链表.系统的窗口管理器通过这个list来获取窗口信息和管理每个窗口.这个数据结构中有四个数据用来构建list, ...
- Linux下的sudo及其配置文件/etc/sudoers的详细配置说明
http://www.osedu.net/article/linux/2011-01-03/178.html Linux下的sudo及其配置文件/etc/sudoers的详细配置说明 1.sudo介绍 ...
- MVC折线图应用
后台 获取值并转换成json数据存到实体里面,然后前台输出 HighchartsModels model = new HighchartsModels(); model.DataDicJson = J ...
- 通过 Autostereograms 案例学习 OpenGL 和 OpenCL 的互操作性
引言 在过去的十年里, GPU (图形处理单元)已经从特殊硬件(特供)转变成能够在数值计算领域开辟新篇章的高性能计算机设备. 很多算法能够使用拥有巨大的处理能力的GPU来快速运行和处理大数据量.即使在 ...