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;
}
list-style-type -- 定义列表样式
取值:disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
disc:点
circle: 圆圈
square: 正方形
decimal: 数字
decimal-leading-zero: 以一个0开头的数字e.g., 01, 02, 03, ..., 98, 99
lower-roman: 小写罗马文字i, ii, iii, iv, v, etc.
upper-roman: 大写罗马文字I, II, III, IV, V, etc.
lower-greek: 小写阿拉伯文字α, β, γ, ...
lower-latin: 小写拉丁文a, b, c, ... z
upper-latin: 大写拉丁文A, B, C, ... Z
armenian: 亚美尼亚数字
georgian: 乔治亚数字an, ban, gan, ..., he, tan, in, in-an, ...
lower-alpha: 小写拉丁文a, b, c, ... z
upper-alpha: 大写拉丁文A, B, C, ... Z
none: 无(取消所有的list样式)
inherit:继承
初始值: disc
继承性: 是
适用于: 所有属于list的元素
list:列表,style:样式,type:类型.
引用网址:http://www.dreamdu.com/css/property_list_style_type/
分享到:
相关推荐
本教程将详述如何使用HTML的`<div>`、`<ul>`和`<li>`标签,结合CSS来创建一个简洁且清晰的横向导航栏。这种方法既简单又实用,非常适合初学者学习。 首先,我们来理解一下这些HTML标签的基本概念: 1. `<div>`:这...
本文实例为大家分享了js使用ul中li标签实现删除效果的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"&...
在本文中,我们将深入探讨如何使用Vue.js来创建一个基于`ul-li`标签的下拉列表,以此模拟原生的`select`标签功能。这个实例将涵盖Vue.js中的几个核心概念,包括组件的创建与使用、组件间的数据传递以及动态数据绑定...
综上所述,`<ul>`和`<li>`的样式调整是网页设计中的基本技巧,通过灵活运用CSS,我们可以创造出各种各样的列表样式,甚至实现复杂的选项卡功能。在实际开发中,要结合具体需求和用户体验,合理运用这些技巧,打造出...
此外,`ul`和`ol`列表也可以与其他CSS3特性结合,如响应式设计(`media queries`),使列表在不同设备上展现最佳效果。还可以利用`pseudo-class`(伪类)如`:hover`, `:active`, `:focus`等来定义不同状态下的样式。...
首先,我们来探讨如何使用CSS实现无序列表ul和列表项li的横向排列以及如何去掉li项前面的默认样式——点。这一需求在网页设计中是非常常见的,特别是当需要制作水平导航栏时。 在CSS中,为了实现ul的横向排列,我们...
CSS+JS实现 用UL和li标签模拟select控件 资源介绍: 纯CSS实现的动态按钮特效,想知道按钮效果的朋友,可以去我的专栏查看。资源名就是文章名。在前端的工作中,经常会遇到 selcet控件,但我们用css来写它的样式时候...
标题中的“DIV CSS布局教程:应用ul、li实现表格形式”指的是使用HTML的无序列表(`<ul>`)和列表项(`<li>`)元素,通过CSS样式来模拟传统HTML表格(`<table>`)的效果。这种方法常用于创建灵活、响应式的布局,...
本教程将详细介绍如何利用HTML的`<ul>`和`<li>`元素,结合CSS样式,来创建一个具有韩国风格的菜单导航。这个"用“ul li”及css制作韩国风格菜单.rar"压缩包文件包含了一整套实现这一效果所需的资源和代码。 首先,`...
这就是“UL+LI模拟selcet标签”方法的用途。这种方法利用了HTML的无序列表`<ul>`和列表项`<li>`元素,通过CSS样式和JavaScript交互来创建一个可选的下拉菜单,使其既具有功能又具有视觉吸引力。 首先,让我们深入...
现在我们正常的做法是应用ul、li标签把链接作为无序列表(unordered list)来标识。再应用CSS样式对其进行控制,按我们预想的形式在容器中显示出来。对导航条使用无序列表似乎是不符合直观感受的,因为我们习惯于把...
这是我们之前没有分享过的CSS3特效类型,它是一个可以自定义美化UL和OL列表的CSS3应用。当我们将鼠标滑过每一个列表项的时候都会出现一定的动画特效,效果非常不错。这种列表美化样式一共有3种,发光效果最酷了。
在实现过程中,我们会用到HTML的无序列表(ul)和列表项(li)标签来构建菜单的层级结构,并通过CSS来控制这些菜单项的显示与隐藏,以及交互效果。 首先,我们来理解HTML结构。在这里,我们使用了嵌套的ul和li标签...
在`jsp`页面中,我们经常会遇到需要实现元素动态效果的需求,例如`ul`(无序列表)下的`li`(列表项)标签进行循环滚动。这种效果可以增强用户界面的交互性和吸引力,常见于新闻滚动、公告栏或者菜单导航等场景。 ...
在网页设计中,导航菜单是不可或缺的部分,而`ul`和`li`元素通常是构建这种菜单的基础。`jQuery`作为一种强大的JavaScript库,提供了简洁的API,使得实现`ul_li`菜单的展开收起效果变得非常简便。这个效果常用于创建...
本文将详细介绍两种利用CSS实现`<ul>`和`<li>`横向排列的方法。 ### 方法一:使用`float:left` 首先,我们可以使用`float`属性来改变`<li>`元素的行为。默认情况下,`<li>`是块级元素,占据一整行。通过将`<li>`的...
"纯CSS UL LI下拉式菜单特效"是一个高效且实用的解决方案,尤其适用于那些希望保持页面简洁、避免过多JavaScript交互的网站。这个压缩包提供了一种无需JavaScript就能实现下拉效果的CSS方法,遵循了WEB2.0标准,提高...
通过使用ul和li标签,以及CSS样式,我们可以实现一个细线表格的效果,而不需要使用传统的table标签。这种方法非常有创意,可以应用于各种网页设计中。 优点 这种方法有很多优点。首先,它可以减少代码的数量,...