关于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>& ...
随机推荐
- SQL Server 查看identity值的几种方法。
方法 1. ident_incr('Table_name');# 增量 identity(A,B) 中的B值 ident_seed('Table_name'); # 种子 identit ...
- Android常用代码
1.图片旋转 Bitmap bitmapOrg = BitmapFactory.decodeResource(this.getContext().getResources(), R.drawable. ...
- POJ 1562 Oil Deposits (并查集 OR DFS求联通块)
Oil Deposits Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 14628 Accepted: 7972 Des ...
- 【DSA MOOC】起泡排序的原理及常数优化
根据学堂在线TsinghuaX: 30240184X 数据结构(2015秋)这门课的内容,对bubblesort做了一些总结. 1. bubblesort(起泡排序),原理来自这样一个观察规律:若序列 ...
- spring 定时任务(3)--配置多个定时任务
<!-- 定义调用对象和调用对象的方法 --> <!-- 定时任务 A start --> <bean id="jobtask" class=&quo ...
- hdu 5606 tree(并查集)
Problem Description There is a tree(the tree is a connected graph which contains n points and n−1 ed ...
- win7运行sqlplus报错“SP2-1503: 无法初始化 Oracle 调用界面”
WIN7 64bit安装Oracle 10.2.0.1后,运行cmd-sqlplus / as sysdba会提示: C:\Users\Liu>sqlplus / as sysdba SP2-1 ...
- DevExpress VCL 2014.1.2 for C++BUILDER XE6
DevExpress VCL 2014.1.2 for C++BUILDER XE6 1)下载 DevExpress VCL 2014.1.2下载链接:http://pan.baidu.com ...
- 从linux telnet到exchange邮件server来測试发送邮件
我们在Linux下,能够通过telnet邮件server的25port(一般smtp邮件server都是这个),来測试是否能发送邮件. 前提是先得把DNS配好,或者/etc/hosts文件制定好邮件s ...
- JS中的逻辑哲学
1.幻灯片播放. 有重用功能的代码要封入一个函数内,尽量减少调用出口(一般传入的参数为索引值),以便调用: 计数器放在最终调用的函数那里,index++: 明确那部分函数执行什么功能,将代码块只放在相 ...