`

UL-LI 标签结合CSS的运用基础

阅读更多
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/
分享到:
评论
1 楼 上善如水 2010-12-17  
我刚刚开始写网页,看了不少的写作规范写作规范,可是还是有浏览器兼容的问题不能解决,我都是这样写的,.
在.div ul{}写ul的宽和调整位置
在.div ul li 里写list-style-type: none;和li的样式,
看了上边的文章,list-style-type: none;这个样式该写在那里啊?

相关推荐

    div+css+ul-li制作横向导航栏

    本教程将详述如何使用HTML的`<div>`、`<ul>`和`<li>`标签,结合CSS来创建一个简洁且清晰的横向导航栏。这种方法既简单又实用,非常适合初学者学习。 首先,我们来理解一下这些HTML标签的基本概念: 1. `<div>`:这...

    JavaScript使用ul中li标签实现删除效果

    本文实例为大家分享了js使用ul中li标签实现删除效果的具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"&...

    Vue.js做select下拉列表的实例(ul-li标签仿select标签)

    在本文中,我们将深入探讨如何使用Vue.js来创建一个基于`ul-li`标签的下拉列表,以此模拟原生的`select`标签功能。这个实例将涵盖Vue.js中的几个核心概念,包括组件的创建与使用、组件间的数据传递以及动态数据绑定...

    ul的li样式

    综上所述,`<ul>`和`<li>`的样式调整是网页设计中的基本技巧,通过灵活运用CSS,我们可以创造出各种各样的列表样式,甚至实现复杂的选项卡功能。在实际开发中,要结合具体需求和用户体验,合理运用这些技巧,打造出...

    css3-ul-ol列表

    此外,`ul`和`ol`列表也可以与其他CSS3特性结合,如响应式设计(`media queries`),使列表在不同设备上展现最佳效果。还可以利用`pseudo-class`(伪类)如`:hover`, `:active`, `:focus`等来定义不同状态下的样式。...

    CSS的ul和li实现横向排列和去掉li的点

    首先,我们来探讨如何使用CSS实现无序列表ul和列表项li的横向排列以及如何去掉li项前面的默认样式——点。这一需求在网页设计中是非常常见的,特别是当需要制作水平导航栏时。 在CSS中,为了实现ul的横向排列,我们...

    CSS+JS实现 用UL和li标签模拟select控件.zip

    CSS+JS实现 用UL和li标签模拟select控件 资源介绍: 纯CSS实现的动态按钮特效,想知道按钮效果的朋友,可以去我的专栏查看。资源名就是文章名。在前端的工作中,经常会遇到 selcet控件,但我们用css来写它的样式时候...

    DIV CSS布局教程:应用ul、li实现表格形式

    标题中的“DIV CSS布局教程:应用ul、li实现表格形式”指的是使用HTML的无序列表(`<ul>`)和列表项(`<li>`)元素,通过CSS样式来模拟传统HTML表格(`<table>`)的效果。这种方法常用于创建灵活、响应式的布局,...

    用“ul li”及css制作韩国风格菜单.rar

    本教程将详细介绍如何利用HTML的`<ul>`和`<li>`元素,结合CSS样式,来创建一个具有韩国风格的菜单导航。这个"用“ul li”及css制作韩国风格菜单.rar"压缩包文件包含了一整套实现这一效果所需的资源和代码。 首先,`...

    UL+LI模拟selcet标签demo

    这就是“UL+LI模拟selcet标签”方法的用途。这种方法利用了HTML的无序列表`<ul>`和列表项`<li>`元素,通过CSS样式和JavaScript交互来创建一个可选的下拉菜单,使其既具有功能又具有视觉吸引力。 首先,让我们深入...

    用ul、li标签创建css横向导航菜单示例

    现在我们正常的做法是应用ul、li标签把链接作为无序列表(unordered list)来标识。再应用CSS样式对其进行控制,按我们预想的形式在容器中显示出来。对导航条使用无序列表似乎是不符合直观感受的,因为我们习惯于把...

    CSS3自定义美化UL OL列表

    这是我们之前没有分享过的CSS3特效类型,它是一个可以自定义美化UL和OL列表的CSS3应用。当我们将鼠标滑过每一个列表项的时候都会出现一定的动画特效,效果非常不错。这种列表美化样式一共有3种,发光效果最酷了。

    css中使用ul li ul li ul li ul li 实现四层级联菜单

    在实现过程中,我们会用到HTML的无序列表(ul)和列表项(li)标签来构建菜单的层级结构,并通过CSS来控制这些菜单项的显示与隐藏,以及交互效果。 首先,我们来理解HTML结构。在这里,我们使用了嵌套的ul和li标签...

    jsp ul 下的li 标签循环滚动

    在`jsp`页面中,我们经常会遇到需要实现元素动态效果的需求,例如`ul`(无序列表)下的`li`(列表项)标签进行循环滚动。这种效果可以增强用户界面的交互性和吸引力,常见于新闻滚动、公告栏或者菜单导航等场景。 ...

    jquery实现ul_li菜单展开收起效果

    在网页设计中,导航菜单是不可或缺的部分,而`ul`和`li`元素通常是构建这种菜单的基础。`jQuery`作为一种强大的JavaScript库,提供了简洁的API,使得实现`ul_li`菜单的展开收起效果变得非常简便。这个效果常用于创建...

    CSS实现ul和li横向排列的两种方法

    本文将详细介绍两种利用CSS实现`<ul>`和`<li>`横向排列的方法。 ### 方法一:使用`float:left` 首先,我们可以使用`float`属性来改变`<li>`元素的行为。默认情况下,`<li>`是块级元素,占据一整行。通过将`<li>`的...

    纯CSS UL LI下拉式菜单特效.rar

    "纯CSS UL LI下拉式菜单特效"是一个高效且实用的解决方案,尤其适用于那些希望保持页面简洁、避免过多JavaScript交互的网站。这个压缩包提供了一种无需JavaScript就能实现下拉效果的CSS方法,遵循了WEB2.0标准,提高...

    css创意ul+li实现的细线表格实现代码

    通过使用ul和li标签,以及CSS样式,我们可以实现一个细线表格的效果,而不需要使用传统的table标签。这种方法非常有创意,可以应用于各种网页设计中。 优点 这种方法有很多优点。首先,它可以减少代码的数量,...

Global site tag (gtag.js) - Google Analytics