Jack个人作品
Jack博客展示所有ZBLOG主题应用/插件应用等个人作品，联系QQ2126245521进行咨询。
网站首页 >> ul样式
网页中ul、li的外边距和属性样式特殊用法
ul和li的特殊样式用法，如第一个li和最后一个li的样式、第N个li和倒数第N个li的特殊样式、奇数和偶数li的样式以及ul和li百分比排序排列样式用法。
li特殊样式
第一个li的样式：
li:first-child {
background:#f00;
}
最后一个li的样式：
li:last-child {
background:#000;
}
第n个li的样式：
li:nth-child(n) {
background:#000;
}
倒数第二个li的样式：
nth-last-of-type(2){
background:#000;
}
奇数列表：
li:nth-child(odd) {
background:#f00;
}
偶数列表：
li:nth-child(even) {
background:#f00;
}ul和li布局样式
ul{
margin: 0;
padding: 0;
width: calc(100% + 10px);
overflow: hidden;
}
ul li {
margin: 0 10px 10px 0;
padding: 0;
width: calc(25% - 10px);
float: left;
list-style-type: none;
}代码布局展示效果可以看本站首页的版块样式，多分辨率适应，经常用的到的排序排列等特殊的样式案例。