晕，楼上的都在胡说八道
成都创新互联主营甘南网站建设的网络公司,主营网站建设方案,成都App制作,甘南h5微信小程序定制开发搭建,甘南网站营销推广欢迎甘南等地区企业咨询
ul是定义无序列表的样式
li是列表内行的样式
在HTML代码中列表是这样的
ul
li列表一/li
li列表二/li
/ul
没区别，因为ul都和li配套使用。
ul li表示 匹配HTML中所有ul下的(后代)li。
li表示 匹配HTML中所有的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。。。
在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 大写拉丁字母
