Jack博客展示所有ZBLOG主题应用/插件应用等个人作品,联系QQ2126245521进行咨询。
ul和li的特殊样式用法,如第一个li和最后一个li的样式、第N个li和倒数第N个li的特殊样式、奇数和偶数li的样式以及ul和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{ 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; }
代码布局展示效果可以看本站首页的版块样式,多分辨率适应,经常用的到的排序排列等特殊的样式案例。