关于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>& ...
随机推荐
- fzu 1753 Another Easy Problem
本题题意为求 t (t<150) 个 c (n,m) (1<=m<=n<=100000)的最大公因子: 本题的难点为优化.主要有两个优化重点.一是每次对单个素因子进行处理,优 ...
- 致终将火爆的NFC——ISO14443 TypeA
毫无疑问,当NFC终端越来越普及,逐渐成为智能手机标配功能后,我们终将迎来NFC的火爆.国内NFC应用最为广泛的将是TypeA,如Mifare.NFC Tag.移动支付等,所以接下来将主要研究Type ...
- 常用433MHZ无线芯片性能对比表分享
常用433M芯片性能对比: 芯片型号 SI4432 CC1101 NRF905 A7102 A7108 输出功率 20dBm 10dBm 10dBm 15dBm 20dBm 功耗 TX:85mA RX ...
- javascript链式调用实现方式总结
方法链一般适合对一个对象进行连续操作(集中在一句代码).一定程度上可以减少代码量,缺点是它占用了函数的返回值. 一.方法体内返回对象实例自身(this) function ClassA(){ this ...
- 读<<代码整洁之道>>的感想
花去了近一周的时间浏览一下这本书.总体感觉这本书写得不错. 我发现自己以前写的代码时多么的糟糕.有很多改进之处... 同时我也发现写出优秀的代码不易.优秀的代码不仅仅易读,并且易修改,易维护,程序易维 ...
- iostat,mpstat,sar即时查看工具,sar累计查看工具
iostat,mpstat,sar即时查看工具,sar累计查看工具
- Windows Azure 的开源 DNA
去年年底,第二期微软云加速器在中国正式启动,17 家创业公司入选.依靠云计算的 HTML 5 专业富媒体动画平台 Mugeda(乐享云)是其中之一.微软云加速器为创业公司提供大量支持,但 Mugeda ...
- SQL Server 2008数据库的一些基本概念 区、页、行
原文地址:http://www.cnblogs.com/liuzhendong/archive/2011/10/11/2207361.html 以前总是没弄明白这些基本概念,现在整理如下: 1.区: ...
- oracle error info
1,oracle jdbc HTTP Status 500 - Incorrect result size: expected 1, actual 0 2015-03-31 00:03:58,250 ...
- #include <boost/array.hpp>
Boost的array,元素可以是std::string #include <iostream> #include <string> #include <boost/ar ...