ul li 布局

编辑  在线网址： w3c 在线测试 代码编辑 

w3c 在线测试 代码编辑w3c 在线测试http://w3c0.com/tiy/t?f=css_sel_nth-child#

ul li 这两个是一起的
ul li{ margin:0px; padding:0px; list-style-type:none} 首先初始化一下 便于兼容
一般用于列表， 导航
li{ float:left} 就是横向排列了
a 就是超链接
/* 连接样式 顺序不能乱 */
a{color: #027fb5;text-decoration:none;} /* 未访问的链接 */
/* a:visited {color: #00FF00}已访问的链接 */
a:hover {color: #666; text-decoration:underline;} /* 鼠标移动到链接上 */
/* a:active {color: #0000FF} 选定的链接 */
有时导航可以需要 鼠标经过换换背景 呀什么 的
给<a> 标签加上 display:block 这个属性 转换成块级元素 就可以 设宽 高 背景 什么的了

详情: a标签写样式时要加display:block;属性，
这样a标签就显示一行了。

一个li下面有多个a标签的话，就得给他们定宽度，

必要的情况下就float:left。

css控制ul标签下的指定li标签样式
ul li:first-child{ }  第一个
ul li:last-child{ }   最后一个
ul li:nth-child(4){ } 指定第几个,4就是代表第四个
ul li:nth-child(2n+1){background:red;}/*匹配第1、第3、第5、…个li*/
ul li:nth-child(odd){background:red;}   基数
ul li:nth-child(even){background:red;}  偶数