关于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>& ...
随机推荐
- python运维开发(七)----面向对象(上)
内容目录: 面向对象应用场景 类和对象的创建 类中的__init__构造方法 self理解 面向对象的三大特性:封装.继承.多态 概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装 ...
- Seeding--zoj2100
Seeding Time Limit: 2 Seconds Memory Limit: 65536 KB It is spring time and farmers have to plan ...
- 【原创】QT5-卸载精灵v1.0-卸载windows软件-简易版
由于项目需求,需要实现卸载windows上的普通软件的小功能,实现起来还是比较简单的. 先发个图: 思路: 1.根据注册表的信息去打开应用程序,卸载也一样: 2.读桌面的快捷方式,根据快捷方式的指向路 ...
- SQL Server sp_configure 控制内存使用
背景知识: sp_configure 显示或更改当前服务器的全局配置设置(使用 sp_configure 可以显示或更改服务器级别的设置.) 查看 全局配置值 方法 1.execute sp_co ...
- QT:“下载速度柱状图”的模拟实现——思路真好,会动脑筋,连我都有了启发(这个思路好像是通用的)
不知是哪个版本的迅雷,有个“下载速度柱状图”的小界面,我比较喜欢(只不过最新版本的迅雷却没了),所以决定来山寨一个.当然,这个山寨品不能下载文件,呵呵. 思路:1:将界面的背景涂成黑色2:每隔0.1秒 ...
- VC连接SQL server2005
VC连接SQL server2005 1.创建一个MFC对话框程序 界面如下 2.创建一个成员变量 这个成员变量用于连接数据库 3.响应按钮函数OnButton1() 在响应函数里主要有三个函数 函数 ...
- Oracle11g重建EM 报ORA-20001: SYSMAN already exists
日志: Apr , :: PM oracle.sysman.emcp.EMReposConfig createRepository : SYSMAN already exists.. ORA-0651 ...
- 在CSDN上看到的一个过滤方法,感觉还不错
/// <summary> /// 把字符串中包含的敏感词替换成别的关键字 /// </summary> /// <param name="s"> ...
- HTML——JavaScript简介
一.简介: JavaScript是个脚本语言,需要有宿主文件,他的宿主文件是HTML文件. JavaScript 是属于 web 的语言,它适用于 PC.笔记本电脑.平板电脑和移动电话. JavaSc ...
- Daily Sentence
2016-12-05 08:59:15 Knowing yourself is the beginning of all wisdom. 智者始于自知. 2016-05-01 19:38:25 The ...