cssulli样式,css ul li 漂亮样式

css代码中的ul和li是什么意思

晕，楼上的都在胡说八道

成都创新互联主营甘南网站建设的网络公司,主营网站建设方案,成都App制作,甘南h5微信小程序定制开发搭建,甘南网站营销推广欢迎甘南等地区企业咨询

ul是定义无序列表的样式

li是列表内行的样式

在HTML代码中列表是这样的

ul

li列表一/li

li列表二/li

/ul

css样式设置中如图，ul li{}和li{}有什么区别？

没区别，因为ul都和li配套使用。

ul li表示 匹配HTML中所有ul下的(后代)li。

li表示 匹配HTML中所有的li标签。

html css 样式 ul li

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"" 

html xmlns="" lang="zh-CN"

head

title鼠标移动显示/title

meta http-equiv="Content-Type" content="text/html;charset=utf-8"/

meta name="description" content=""/

script type="text/javascript" src="js/jquery-1.8.0.js"/script 

style type="text/css"

ul,li{

margin:0px;

padding:0px;

list-style: none;

}

ul{

height:31px;

border-bottom:1px solid #f46d52;

}

li{

width:100px;

height:30px;

border-radius:5px 5px 0px 0px;

border:1px solid #ccc;

border-bottom:none;

text-align: center;

line-height: 30px;

background-color:#EEEEEE;

float: left;

color:black;

font-weight: 800;

margin-left:5px;

}

li:hover{

height:31px;

background-color: white;

color:#FDE7D2;

border:1px solid #f46d52;

border-bottom:none;

cursor:pointer;

}

/style 

/head

body

div class="nav"

ul

li导航1/li

li导航2/li

li导航3/li

/ul

/div

/body

/html

效果图：

这个只是简单的.hover事件，如果要点击得到效果那个需要写js。。。

css控制ul标签下li样式

在ul标签下li的默认样式为一个实心圆（disc）   可忽略不写

li样式的改变是用 list-style:属性值 来改变的

我们给li设置css，去除默认样式（实心圆）

将li的样式设置为空心圆

将li的样式设置为实心正方形

其他：

decimal   :  　CSS1　阿拉伯数字

lower-roman   :  　CSS1　小写罗马数字  

upper-roman   :  　CSS1　大写罗马数字  

lower-alpha   :  　CSS1　小写英文字母  

upper-alpha   :  　CSS1　大写英文字母  

armenian   :  　CSS2　传统的亚美尼亚数字  

cjk-ideographic   :  　CSS2　浅白的表意数字  

georgian   :  　CSS2　传统的乔治数字  

lower-greek   :  　CSS2　基本的希腊小写字母 

hebrew   :  　CSS2　传统的希伯莱数字  

hiragana   :  　CSS2　日文平假名字符  

hiragana-iroha   :  　CSS2　日文平假名序号  

katakana   :  　CSS2　日文片假名字符  

katakana-iroha   :  　CSS2　日文片假名序号  

lower-latin   :  　CSS2　小写拉丁字母  

upper-latin   : 　CSS2　大写拉丁字母 

文章标题：cssulli样式,css ul li 漂亮样式
路径分享：http://bjjierui.cn/article/dsigdis.html